Customizing your card form

Customizing your card form

Make your amazingly interactive interface of Card form more visually appealing with our theme builder specifically designed for Card forms. You can customize your form and play around with custom backgrounds, fonts, effects, and more, or pick a theme from the pre-designed themes available in the Themes Gallery.

Customize card forms

To customize the appearance of your Card form to your liking,
  1. After building your Card form, navigate to the Themes tab.
  2. Click Create from Scratch / Customize Form.

    Create from Scratch

  3. Under Form Customization, you can customize the following:
    1. Layout
    2. Page 
    3. Header
    4. Fields and Input
    5. Buttons and Progress Bar

Layout

Zoho Forms provides you with the flexibility to choose the layout that best suits your card form design and aligns with your branding or visual preferences.

Layout

Under Layout
  1. You can choose a Layout Type for your card form. These layout types determine the placement of the banner image on the form.
    1. No Banner: This layout type does not include a banner image. If you want a simpler design without a prominent image, you can choose this option. The form fields will be displayed without any banner on either side.
    2. Left Banner: In this layout type, the banner image will be displayed on the left side of your card form. This can be a visually appealing option if you want to showcase a prominent image or logo on the left-hand side while keeping the form fields on the right.
    3. Right Banner: This layout type is similar to the left banner, but the image will be positioned on the right side of your card form.

      Layout Type

      If you choose to have a banner image, you can customize its background color, alignment, opacity and more under Banner.

      Customize Banner image

  2. Under Container Styleyou can choose if you want the field on each page of your card form to be placed within a container.
    1. Having a container around a field provides a clear visual separation between the form background and the field, making the card form look more structured and organized.
    2. However, if you prefer a minimalistic or streamlined appearance for your card form to appear more integrated and flow seamlessly with the rest of the form design, you can do away with the container.

      Container Style

      If you choose to have a container, you can customize the border shape of the container, its color, background and more under Container & Footer

      Container customization

  3. Under Navigation Direction, you can choose if you want the navigation between the cards of the form to be horizontal or vertical.

    Navigation Direction
    1. Horizontal Navigation: In horizontal card navigation, users navigate through the cards from left to right. 
      Advantages:
      1. Provides a clear sequence of items.
      2. Suitable for presenting content with a linear progression.
      3. Works well for content with equal importance.

    2. Vertical Navigation: In vertical card navigation, users navigate through the cards from top to bottom.
       Advantages:
      1. Suitable for longer or variable-length content.
      2. Works well for content with different levels of importance.
  4. If you have chosen the Navigation Direction to be horizontal, under Navigation Style, you can choose if you want the the navigation buttons to align along with the fields below them or if you prefer to place them separately in a footer at the bottom of each page.

    Navigation Style

    1. If you choose to align the navigation buttons along with the fields, they will appear directly below the fields on each page of your card form. This option offers a more compact layout, keeping the buttons in close proximity to the relevant fields. It can provide a seamless user experience, as respondents can easily navigate to the next or previous page without having to scroll to the bottom of the form.
    2. If you choose to place the navigation buttons in a footer at the bottom of each page, they will appear separated from the fields. This layout can provide a clear visual separation between the form fields and the navigation buttons.

Transition Effect

Transition effects in card forms can add a touch of interactivity and visual appeal to your user interface with smooth and engaging animations while navigating through the pages.

Transition E

Here are the transition effects you can apply to card forms:
Fade Out: Use the Fade Out effect to make a page disappear gradually before the next or previous page of the card form is displayed.
Rotate: This effect rotates around a specific axis while navigating between the card form pages. 
Pushback: This effect animates the card to create an illusion of being pushed back before the next or previous card of the form is displayed.
Flip: The card can flip around its vertical axis to reveal the next/previous page on the opposite side. 

Page

Page Customization

Under Page,
  1. You can select the style of the font for your form and adjust the Font Size as needed. The font size you choose is dynamically adjusted for all text on your form (except the content on Welcome Page), including the button text, making the form responsive.
  2. You can choose a Background Color, upload an image from your desktop, select from pre-designed backgrounds, or search an image from Pixabay to use as the background on all pages across the form.
  3. You can also adjust the Opacity of the background.
If you have a Subform in your form, the Background Color selected for the form will be applied by default to the Subform Background. If you have set an image as the form's Background, it is recommended that you choose a Background color that blends with the colors of the form's background image so that the color of the Subform blends with the form.
Header Customization

Under Header,
  1. You can select the Background color for the Form Title on the top and adjust the Opacity of this background.
  2. You can also select the font color for the Form Title and Description.

Fields & Input

Field and Input Customization

Here, you can customize the style of your form fields and the error messages.

Fields
Under the Fields section, you can choose different colors for the field labels, field instructions and the field input value.

Input
Under the Input section, you can choose the border style of the field input box, color of the border, color of the input box background, and adjust the opacity of the background color.
The chosen colors for Input Value, Border, and Background are applicable to all the fields including Rating, Slider, Choice based fields and Hover Text field property.

Picker

You can even customize the color of the Picker elements' background and the color of selected values in the picker elements.
Picker elements include:
  1. Name - Salutation
  2. Address - Country
  3. Phone - Country Code
  4. Dropdown
  5. Multiple Choice
  6. Time field 
  7. Date field picker
  8. Date-Time field picker
  9. Matrix Choice - Dropdown
  10. Fields Pane (to jump between the questions)
  11. Zoho CRM field
  12. Hover Text
It is recommended that you use complementing colors for the Picker Background, Selection and the Input value.
Error Message
Under the Error Message section, you can choose the background color for the error messages and the color of the error message text.
If you have form fields that have field elements such as Name, Address, ensure that the colors of the Input Border and the Error Message Background are distinct, as using the same color for both will result in no visual distinction between the border of the field element with error and the borders of other field elements.

Buttons & Progress Bar

Buttons and Progress Bar Customization

Here, you can customize the colors of the Navigation buttons, Action buttons, Welcome Page button and Progress Bar.

Navigation
The Navigation buttons are the Previous and Next buttons on your form pages. You can customize the color of the labels for the Previous and Next navigation buttons separately.
If you have chosen the Navigation Direction to be vertical, you will have additional options to customize the color of the navigation labels' background.

Action
The Action buttons include the Submit, Save, and Review buttons. You can customize the background, text, and icon colors of these buttons.

Welcome Page
The Welcome Page includes a Start button that, when clicked, takes your respondents to the first question of your form. You can customize the background color and text color of this button.

Progress Bar
The progress bar displays the respondents' progress through the questions on your form as they fill it out. You can customize the color of completed and uncompleted questions in the progress bar.

Advanced

Advanced

If you have a Matrix Choice field in your form, you will have the option to pick a design for field and select a color that complements your card form theme for the Matrix Choice field headers. This way, you can ensure that your form maintains a cohesive and visually appealing look.


    Zoho CRM Training Programs

    Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

    Zoho CRM Training
      Redefine the way you work
      with Zoho Workplace

        Zoho DataPrep Personalized Demo

        If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

        Zoho CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now


            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION










                                    You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                        Manage your brands on social media

                                          Zoho Desk Resources

                                          • Desk Community Learning Series


                                          • Digest


                                          • Functions


                                          • Meetups


                                          • Kbase


                                          • Resources


                                          • Glossary


                                          • Desk Marketplace


                                          • MVP Corner


                                          • Word of the Day


                                            Zoho Marketing Automation

                                              Zoho Sheet Resources

                                               

                                                  Zoho Forms Resources


                                                    Secure your business
                                                    communication with Zoho Mail


                                                    Mail on the move with
                                                    Zoho Mail mobile application

                                                      Stay on top of your schedule
                                                      at all times


                                                      Carry your calendar with you
                                                      Anytime, anywhere




                                                            Zoho Sign Resources

                                                              Sign, Paperless!

                                                              Sign and send business documents on the go!

                                                              Get Started Now




                                                                      Zoho TeamInbox Resources



                                                                              Zoho DataPrep Resources



                                                                                Zoho DataPrep Demo

                                                                                Get a personalized demo or POC

                                                                                REGISTER NOW


                                                                                  Design. Discuss. Deliver.

                                                                                  Create visually engaging stories with Zoho Show.

                                                                                  Get Started Now









                                                                                                      • Related Articles

                                                                                                      • Switching between the Standard and Card Form Types

                                                                                                        Switching between Standard and Card Form Types in Zoho Forms provides flexibility in designing and presenting forms to suit different use cases. Although, the choice between Standard and Card Form Types depends on the complexity of the form and the ...
                                                                                                      • Viewing Form Entries

                                                                                                        Once you have successfully created and shared a form, the form responses will be listed under All Entries. Here, you can view all entries as a summary, and group them based on certain criteria. You can also change the view, edit the entries, assign ...
                                                                                                      • Customizing your standard form

                                                                                                        Table of Contents Form Customizing Form Background Adding a Wallpaper Adding a Banner Customizing Form Elements Container Header Body Fields Dropdown List Footer Customizing Form Buttons Subform Subform Container Subform Fields Pop-up Subform Page ...
                                                                                                      • Understanding Card Forms

                                                                                                        Assume you meet a new person and want to get along with them, and you say: Hey, what is your name, phone number, address, likes and dislikes, and so on? Being bombarded with questions before they have finished answering the first can frighten the ...
                                                                                                      • Embed a form as a Lightbox pop-up

                                                                                                        Lightbox form is a pop-up that overlays the webpage, when the user engages with your webpage . This helps in drawing the attention of your website visitors to the form. For example, if you require your customers to subscribe to your newsletter to ...
                                                                                                        Wherever you are is as good as
                                                                                                        your workplace

                                                                                                          Resources

                                                                                                          Videos

                                                                                                          Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                          eBooks

                                                                                                          Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                          Webinars

                                                                                                          Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                          CRM Tips

                                                                                                          Make the most of Zoho CRM with these useful tips.



                                                                                                            Zoho Show Resources