Customize the style of a form

To customize the style of a form, you can use the general styling options available on the left-hand pane, as well as the item-specific configuration settings on the right-hand pane.

You can customize the general look and feel right after you create the form. You can also set up custom fonts, link settings, social media, and more.

If you have multiple pages, and you want to have a different look for some of them, you need to edit the styling of each page individually.

To customize the style of the form:

  1. In the left pane of the editor, click the Options tab.

  2. In the General settings section, you can set the following:

    • Content Width - enter the width or use the up and down arrows to edit the width. The default width is 1000.

    • Border Width - enter the width or use the up and down arrows to edit the border width.

    • Border Color - select the color of the border. The default color is black.

    • Background Color - select the background color. 

    • Add Background Image - click to select and upload a background image.

    • Change Background Image - click to select a new background image and replace the current one.

    • Remove Background Image - click to delete the current background image.

  3. Expand Google fonts to add a custom font to your design.

  4. To show your images with higher pixel density, select the Use retina quality images check box.

    Note

    Using retina quality images will result in more bandwidth usage for your recipients and sometimes longer loading times for your form.

  5. Expand Link settings to set link color, font family, and font size.

  6. Expand Slot to set the slot background color, content background color, alignment, minimum height, padding, and border width, radius, and color.

  7. Expand Text to set the text default font color, font size, line height, font family, background color, shadow, border width, color, radius, and padding.

  8. Expand Validation Messages to overwrite the default validation messages with custom messages. This can be done for Required field, the Email field, and the Phone field.

    Screenshot of the left-hand pane showing some styling configuration options

  9. Expand Spacer to set the spacer background color, shadow, height, border width, color, and radius.

  10. Expand Image to set the image background color, shadow, border width and color, alignment, padding, image border radius, URL link, and alternative text (Alt text).

  11. Expand Action button to set the button background color, shadow, button, label, and border color, label, font family, font size, alignment, button width, label padding, margin, border width and corner radius.

  12. Expand Social Media to set the social media background color, shadow, spacing, alignment, icon style, and social settings (click a social media icon to add its URL).

Do you have some feedback for us?

If you have suggestions for improving this article,