Customize your Jetpack Forms using block controls to reflect your site’s unique design.

Once you’ve added a Jetpack Form block to a page or post, you can fine-tune its appearance to match your site’s design. This guide explains how to control field widths, update colors, apply custom styles to specific fields, and set a consistent look for every form across your site.

This video covers how to manage and style a form built with Jetpack. It walks through adjusting the visual appearance of the form, controlling how wide each fields display, and configuring what visitors see after they submit.

You can change the colors of the entire form from a single place — no need to edit each field separately.

To update overall form colors:

1. Click on the outer edge of the Form block in the editor to select the form as a whole (rather than a field inside it).
2. In the right-hand sidebar, open the Block settings panel and click the Styles tab — this is the icon that looks like a circle split between black and white.
3. Adjust the text color, background color, and any other color properties shown.
4. Click Save or Update at the top of the editor to apply your changes.

You can set a background image for your form or for individual Step blocks:

1. Click on the outer edge of the Form block in the editor to select the form as a whole (rather than a field inside it).
2. In the right-hand sidebar, open the Block settings panel and click the Styles tab — this is the icon that looks like a circle split between black and white.
3. Add a background image
4. Click Save or Update at the top of the editor to apply your changes.

If your WordPress site uses a block theme, you can define one visual style that applies to every form you publish — so you don’t have to style each form individually. This is managed through the Styles panel in the Site Editor.

1. In your WordPress dashboard, go to Appearance → Editor.
2. In the Design section of the left-hand panel, click Styles.
3. At the bottom of the Styles panel, click Blocks.
4. Find Form in the list of block types and click on it.
5. Adjust the color, typography, and spacing settings to match your preferences.
6. Click Save to apply these settings site-wide. Every form on your site will now reflect this style.

📝 Note: The Site Editor is only available on WordPress sites running a block theme (also called a Full Site Editing theme). If you don’t see Editor listed under Appearance in your dashboard, your active theme doesn’t support this feature. Switching to a block theme will unlock it.

Each field inside a Jetpack Form block can be displayed at a custom width. This lets you organize fields in a compact, side-by-side layout or stretch them to fill the full container.

To change the width of a form field:

1. Open the post or page in the WordPress block editor.
2. Click on the field whose width you want to adjust.
3. Open the Block settings panel in the right-hand sidebar.
4. Scroll to the Width setting and select 25%, 50%, 75%, or 100%.

💡 Tip: To place two fields on the same row, set both of them to 50%.

By default, all fields in a form share the same style settings. If you want a specific field to look different from the rest, you can break it out of the group and style it on its own.

1. Use the List View panel (accessible from the editor toolbar) to locate and select the specific field you want to customize. You can also click directly on the field in the editor.
2. In the Block settings sidebar, find the Sync fields style toggle and turn it off. This separates that field’s styling from the rest of the form.
3. Click on the field’s label or its input area, then use the sidebar controls to set a custom color, font, or other typographic properties for that element.
4. Click Save or Update to apply your changes.

• Jetpack Form Block — An overview of all Jetpack Form features, fields, and block settings
• Jetpack Form Editor — Build and manage forms using the dedicated form-building interface
• Form responses and integrations — View, export, and manage submissions from your forms

Please contact support. We’re happy to advise.

The Form Block is activated by default. It can be deactivated/reactivated at any time by following the guide to control Jetpack features on one page.