Customize your site’s contact forms to match your brand.

Use site styles to edit the appearance of form blocks on your site. You can change the fonts and colors of text and buttons on the form, as well as the style and shape of your forms' other elements, like text fields and checkboxes.

All form blocks on your site follow these style settings, making this a great way to give your forms a unique style while keeping them consistent.

Most of this guide focuses on form styling options only available in version 7.1 sites. If your site is in version 7.0, review Style form blocks in version 7.0.

Watch a video

Open form block style settings

To open form block style settings:

1. Open the Pages panel and click a page with a form block on it so you can review the changes in the site preview as you make them.
2. Click the paintbrush icon in the top-right corner.
3. Click Forms.
4. Click Switch to choose a preset form pack.
5. Click Effects to customize form field and submit button animations. 
6. Click Field Options to customize checkbox, radial, and survey field styles.
7. Click Fonts to customize form block text styles.
8. Click Colors to customize form block colors styles.
9. Click Form Spacing to customize the amount of white space in your form.
10. After making changes, click Save.

Keep in mind, these style settings affect all form blocks on your site. It’s not possible to give different form blocks different style settings, aside from colors, which can vary between form blocks if the blocks are in sections with different color themes.

Other types of forms, like newsletter blocks, cover page forms, and product forms, have their own style settings. To learn more about other types of forms, visit Adding forms to your site.

Choose and customize a form pack

Form packs are preset form styles you can choose from to choose as a starting point for your styling. Keep in mind, if you make changes to your settings after selecting a form pack, then switch to another form pack, your changes to the initial form pack won’t save.

Each form pack includes presets for the style options that appear in your Forms panel:

• Field Shape - Sets the shape of form fields. Choose from Square, Rounded Rectangle, Pill, or Custom Corners.
• Field Fill - Switch this toggle on to add a background color to the form field. When the toggle is switched off, the form fields match the color of the form block.
• Border - Choose None for no border or All to make the border appear on all sides. Depending on your other settings, None may not be available. If your shape is set to Square, you can also choose Bottom, for a border that only runs along the bottom side of the field, like an underline.
• Border Thickness - Set the thickness of the border lines around form fields. This option won’t appear if you’ve selected None for your border.
• Padding - Choose how much padding appears around text in the field. Choose S, M, or L, or click … to set custom padding.
• Field options - Customize the appearance of Checkbox, Radio, and Survey elements for certain fields.

After selecting a form pack, you can further customize these style settings in the Forms panel.

Change fonts

In the Forms style panel, click Font to change the font for each field:

• Title - Text above each field
• Input - Text your visitors enter in each field
• Description - Text below each field
• Caption - Text below the description, like “First Name” and “Last Name” in name fields
• Placeholder - Text you can display in each field
• Option - Text for selectable options in checkbox, radio, and survey fields
• Survey Title - Survey question text
• Select Dropdown - Drop-down menu text

The Submit button text follows your site’s primary, secondary, or tertiary button styles, depending on what you select in the form block’s Design tab.

Post-submit message

If you add a post-submit message, the text follows these style options in your site's your site's global styles:

• Font - Paragraph settings in the Fonts panel
• Size - Paragraph 2 slider in the Paragraphs section of the Fonts panel
• Color - Paragraph (Medium) color in the chosen section theme, or Paragraph (Medium) on Background if you've enabled a background on the block.

Change colors

By default, form blocks use colors from your site’s palette. In the Forms style panel, click Colors, then switch the Use theme colors toggle on to manually customize the colors for elements of your form blocks based on their section’s color theme.

If the tweak includes on Background, it will only apply to form blocks with the background color enabled, or form blocks set to open in a lightbox. The tweaks without on Background apply to form blocks without background color or lightbox enabled.

Style form blocks in version 7.0

In version 7.0, form block styles generally follow your template's body text and button tweaks, but options vary depending on your template, and some form field labels have a fixed size. For example, it's not possible to change the size of the "First Name" and "Last Name" labels that appear under the "Name" fields. It also may not be possible to change the color of placeholder text in fields.

The lightbox form has a fixed style. It's not possible to change most of the font or color settings. To learn more about styling your site, visit Making style changes.