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.
To customize the appearance of your Card form to your liking,
- After building your Card form, navigate to the Themes tab.
- Click Create from Scratch / Customize Form.
- Under Form Customization, you can customize the following:
- Layout
- Page
- Header
- Fields and Input
- 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.
Under Layout,
- You can choose a Layout Type for your card form. These layout types determine the placement of the banner image on the form.
- 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.
- 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.
- 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.
If you choose to have a banner image, you can customize its background color, alignment, opacity and more under Banner. - Under Container Style, you can choose if you want the field on each page of your card form to be placed within a container.
- 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.
- 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.
If you choose to have a container, you can customize the border shape of the container, its color, background and more under Container & Footer. - Under Navigation Direction, you can choose if you want the navigation between the cards of the form to be horizontal or vertical.
- Horizontal Navigation: In horizontal card navigation, users navigate through the cards from left to right.
Advantages: - Provides a clear sequence of items.
- Suitable for presenting content with a linear progression.
- Works well for content with equal importance.
- Vertical Navigation: In vertical card navigation, users navigate through the cards from top to bottom.
Advantages: - Suitable for longer or variable-length content.
- Works well for content with different levels of importance.
- 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.
- 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.
- 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.
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
Under Page,
- 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.
- 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.
- 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
Under Header,
- You can select the Background color for the Form Title on the top and adjust the Opacity of this background.
- You can also select the font color for the Form Title and Description.
Fields & Input
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:
- Name - Salutation
- Address - Country
- Phone - Country Code
- Dropdown
- Multiple Choice
- Time field
- Date field picker
- Date-Time field picker
- Matrix Choice - Dropdown
- Fields Pane (to jump between the questions)
- Zoho CRM field
- 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
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
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.
Access your files securely from anywhere
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 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 Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
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.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
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 ...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 ...Differences between a Standard Form and a Card Form
A Standard form has multiple fields on it, whereas a Card form has only one field per page of your form, giving your users a free-flowing experience that reduces cognitive load. Welcome Page in Card forms While Welcome Page is a ready-to-use, ...
New to Zoho LandingPage?
Zoho LandingPage Resources