Style your Jetpack Form

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.

Video tutorialMD

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.

Customizing your FormMD

Adjust the form’s colorsMD

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.

Adding a Background Image to your formMD

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.

Set a unified style for all forms across your siteMD

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.

Adjust field widthsMD

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%.

Apply different styles to individual fieldsMD

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.

Related guidesMD

• 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

Still need help?MD

Please contact support. We’re happy to advise.

Privacy InformationMD

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.

Data Used
Site Owners / Users For activity tracking (detailed below): IP address, WordPress.com user ID, WordPress.com username, WordPress.com-connected site ID and URL, Jetpack version, user agent, visiting URL, referring URL, timestamp of event, browser language, country code.	Site Visitors If Akismet is enabled on the site, the contact form submission data (IP address, user agent, email address, site URL, and comment) is submitted to the Akismet service (also owned by Automattic) for spam checking. The actual submission data is stored in the site’s database on which it was submitted and is emailed directly to the owner of the form (i.e., the site author who published the page on which the contact form resides). This email will include the submitter’s IP address, timestamp, name, email address, website, and message. The IP address is included as an abuse prevention measure. And for sites using Akismet, it is required to provide proper spam defense.
Activity Tracked
Site Owners / Users We track when and by which user the feature is activated and deactivated and when CSVs or Google Sheets are exported from the Feedback forms page.	Site Visitors None.
Data Synced (Read More)
Site Owners / Users We sync a single option that identifies whether the feature is activated.	Site Visitors We sync post and post-meta data associated with a user’s contact form submission. If Akismet is enabled on the site, the IP address and user agent originally submitted with the comment are also synced, as they are stored in post meta.