Customizing your card form

Customizing your card form


Overview

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. General
    2. Container
    3. Header
    4. Fields
    5. Special Fields
    6. Progress Bar
    7. Buttons
            Form Customization      

General

The General section allows you to customize the overall layout and visual presentation of your card form, including its style, wallpaper background, and fonts.

Style


Under Style, you can choose the Layout Type for your card form. These layout types determine the placement of the banner image on the form.
  1. No Banner: The form fields will be displayed without any banner on either side.If you want a simpler design without a prominent image, you can choose this option. 
  2. Left Banner: 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. 
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. 

Banners serve as effective tools for advertising your product and introducing your brand or service to respondents. If you choose to have a banner (left or right), you can customize it using the below options:
  1. Background: Choose a background color for the banner area.
  2. Background Image: Upload an image or choose from Pixabay to appear in the banner area. 
  3. Alignment: Choose the horizontal alignment of the banner image — left, center, or right.
  4. Fit: Define how the image fits within the banner area. Options are None, Tile, and Stretch.
  5. Opacity: Adjust the transparency level of the banner image and background.
  6. Banner Width: Drag the slider to set the width of the banner section relative to the form container.

Wallpaper


The Wallpaper section lets you personalize the background of your card form.
  1. Background: Set the background color using solid or gradient colors.
  2. Background Image: Upload an image from your device, select from pre-designed backgrounds in Pixabay or Unsplash. Unsplash offers individual photos, collections (image sets), and topics (subject based grouping), where you can filter images based on their orientation (All, Landscape, Portrait, Squarish), color, and sort by Latest/ Oldest/ Popular. After adding the background image of your choice, you can adjust its Alignment, Fit, and Opacity.
Idea
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.

Fonts

      

  1. Font Family: Choose the type of font used across your form.
  2. Font Size: Control the size of text displayed within your form. The chosen size is dynamically adjusted for all text on your form (except the content on Welcome Page), including the button text, making the form responsive.

Container

The Container section allows you to customize the visual boundary around each form field, as well as navigation and footer settings.

Style


Under Style, choose between two container styles to determine how fields appear on your card form:
  1. No Container: Fields are displayed without a visual container, creating a minimalistic or streamlined appearance. The card form will appear more integrated and flow seamlessly with the rest of the form design.
  2. With Container: A container is placed around each field, providing a clear visual boundary between the form background and the field. The card form will look more structured and organized.
When a container is chosen, you can further customize:
  1. Border Shape: Choose the shape of the container’s border — square, slightly rounded, or pill-shaped.
  2. Border: Set a border color for the container.
  3. Background: Select a background color for the container.
  4. Shadow: Choose the color of the shadow applied behind the container.
  5. Shadow Spread: Adjust how far the container’s shadow spreads.
Direction

Choose whether users navigate through cards horizontally (left to right) or vertically (top to bottom).
  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.
Notes
Note: If the Navigation Direction is set to vertical, Navigation Style, Transition Effect & Footer will be hidden and cannot be customized.

Style

If you have chosen the Navigation Direction to be horizontal, choose between two navigation styles to determine how navigation buttons are positioned on your card form:
  1. Directly below field: Navigation buttons are aligned directly below the form fields on each page of your card form. This option offers a more compact layout, keeping the buttons close 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. At the footer: Navigation buttons are placed separately in a footer at the bottom of each page. This layout can provide a clear visual separation between the form fields and the navigation buttons. 

Transition Effect

Transition Effect
Transition effects in card forms add a touch of interactivity and visual appeal with smooth and engaging animations while navigating through the pages. Choose a transition/animation effect to play when navigating between cards: 
  1. Default: The standard transition without any special animation.
  2. Slide: Pages slide in from the side during navigation.
  3. 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.
  4. Rotate: This effect rotates around a specific axis while navigating between the card form pages. 
  5. 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.
  6. Typewriter: Text appears with a typewriter-style animation as the page loads.
  7. Flip: The card can flip around its vertical axis to reveal the next/previous page on the opposite side.
The Footer holds the navigation buttons and actions like Save and Submit.
  1. Background: Choose a background color for the footer section. 

The Header section at the top of the form contains your form title and description. Under Header, you can customize the following:

Style

Customize the background and transparency of the header section to enhance your form's design.
  1. Background: Choose a background color for the form header.
  2. Opacity: Adjust the transparency level of the header background.

Text & Branding


Customize the appearance of your form's title, description, and logo to align with your brand identity.
  1. Form Title: Set the font style (bold/italic) and color for the form title.
  2. Form Description: Set the font style and color for the form description.
  3. Logo: Logos are symbols that represent your brand or company. Upload your logo from your device or choose one from Pixabay. You can also add alternative text to your image to make it accessible for users with visual impairments. Learn more
  4. Image Size: Control the size of the logo image using the slider.
  5. Image Alignment: Control how the logo, title, and description are aligned within the form header. Choose an image alignment based on the styles provided to create an organized layout.
  6. Fit to screen: When enabled, the logo image expands to fit the width of the screen.
  7. Image Shape: Choose the shape of the logo — square, rounded, or circle.

Spacing


Customize the inner horizontal and vertical spacing of the header section.
  1. Inner Horizontal Spacing: Adjust the spacing of header content from the left and right edges of the form header.
  2. Inner Vertical Spacing: Adjust the top-to-bottom spacing of the form header.

Bottom Border


Customize the border that appears at the bottom of the header section.
  1. Color: Choose a color for the bottom border of the header.
  2. Width: Adjust the thickness of the bottom border using the pixel slider.

Shadow


This creates a shadow effect for the header container.
  1. Color: Set the color of the shadow applied beneath the header.
  2. Spread: Drag the slider to adjust the intensity of the shadow effect.

Fields

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

Fields
Fields

Under the Fields section, you can choose different colors and styles for the field labels, instructions, and text alignment.
  1. Label: Choose the font style (bold/italic) and color for field labels.
  2. Instructions: Choose the font style and color for any instruction text associated with a field.
  3. Text Alignment: Control how field label text is positioned — left aligned or center aligned.

Input

Under the Input section, you can choose the border style and colors for the field input box.
  1. Value: Choose the color of the text a user enters into the field.
  2. Border Shape: Choose the style of the field’s border — square, slightly rounded, pill-shaped, or underline.
  3. Border: Customize the color of the field’s border.
  4. Background: Control the background color of the input area.
  5. Opacity: Adjust the transparency of the input background.
Info
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 customize the color of Picker elements’ background and the color of selected values in the picker elements.
  1. Background: Control the background color of the picker elements.
  2. Selection: Choose the color that highlights selected values in the picker.
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 colors for error messages shown to respondents.
  1. Background: Choose the background color for the error messages.
  2. Text: Choose the color of the error message text.
Idea
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.

Progress Bar

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.
  1. Default Background: Set the color for the uncompleted portion of the progress bar.
  2. Filled Background: Set the color for the completed portion of the progress bar.

Special Fields

Under this section, you can customize the special fields like Rating, Matrix Choice, Yes/No if they are added in the form.

Rating

Rating
If you have a Rating field in your form, you can customize it's border color. 

Matrix Choice

If you have a Matrix Choice field in your form, you will have the option to pick an appropriate table style and also 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.
Matrix Choice

Yes/No


For the Yes/No field, you can customize:
  1. Label-1 Background: Sets the background color of Label-1. This applies to all three styles.
  2. Label-1 Text: Sets the text color of Label-1 in Default style (toggle) and icon color in Styles 2 and 3 (like/dislike & checkmark/cross).
  3. Label-2 Background: Sets the background color of Label-2. This applies to all three styles.
  4. Label-2 Text: Sets the text color of Label-2 in Default style (toggle) and icon color in Styles 2 and 3 (like/dislike & checkmark/cross).
  5. Border: Defines the border color for the Yes/No field. Applies to all styles.

Buttons

Under Buttons, you can customize the appearance of all buttons in your card form.
The Navigation buttons are the Previous and Next buttons on your form pages. 
  1. Shape: Choose the shape of the navigation buttons borders — none, square, slightly rounded, or pill-shaped.
  2. Style: Choose the style of the navigation buttons from the available styles shown.
  3. Icon Style: Select the icon style used on the navigation buttons.
  4. Alignment: Set the alignment of navigation buttons within the card footer.

Previous Button

Previous Button
Set a color for the background, text, and border for the Previous Button. 

Next Button
Next Button

Set a color for the background, text, and border for the Next Button.

Start & Submit Buttons
Start & Submit Buttons

The Start Button is shown on the Welcome Page and when clicked, takes your respondents to the first field of your form. The Submit Button allows respondents to submit the form.
  1. Shape: Choose the shape of the start button’s and submit button’s border — square, slightly rounded, or pill-shaped.
  2. Start: Set a color for the background, text, and border for the Start button. 
  3. Submit: Set a color for the background, text, and border for the Submit button.

Save & Review Buttons

Save & Review Buttons

  1. Save Background: Select a background color for the Save button.
  2. Save Icon: Set the color of the icon inside the Save button.
  3. Review Background: Choose a background color for the Review button.
  4. Review Icon: Set the color of the icon inside the Review button.
Notes
Note: This section is labeled Start & Submit Buttons when a Welcome Page is configured, and Submit Button when no Welcome Page is present.

Choose background and text colors that complement your form theme and offer clear contrast for readability and accessibility.