The Form block lets you add a form to your post or page. Find how to use the Form Block when using the Block Editor.
You can find instructions on adding the Contact Form on the Classic editor here.
For general features and FAQs, please see our information page.
Jetpack’s Contact Form feature must be enabled to use the Form block. This should be enabled by default, but if it’s not, you can enable it as described here.
Adding the Form Block
You can add the Form Block to any post or page by selecting it from the Jetpack section of the block picker:
See our Jetpack Blocks page for more information on adding Jetpack blocks.
As soon as you add a Form block, you can choose from one of the pre-built forms: Contact Form, Newsletter Sign-up, RSVP, Registration, Appointment, or Feedback. Or you can build your own form by clicking Skip.
After choosing a form, the block will pre-fill with relevant fields. Here is an example of the regular email notification form:
Form Types [templates]
- Contact Form: add a simple contact form to your post or page.
- Newsletter Sign-up: A simple way to collect more information from your users visiting your site.
- RSVP Form: Add a RSVP form to your site. Help your users or invitees to confirm their presence on your events.
- Registration Form: Add a Registration form to your site. Help your users to register for events, clubs, etc.
- Appointment Form: Add a appointment booking form to your site, it will help you to organize your agenda.
- Feedback Form: Add a feedback form to your site. You have scale rate available and other good options to receive your users’ opinions.
- Skip: If you don’t want to use any of the templates available, just click on it and customize your form following the other information in this article.
Customizing Your Form
Each Form Block is a special block containing other nested blocks. Each form field is its own block within the main Form Block.
These internal form field blocks can be customized and rearranged within the primary Form Block. Forms can also be customized using the block settings (described here) or advanced filters (described here).
To add a form field to the end or beginning of your form, you can click on the ‘more options‘ icon and choose to insert a block before or after:
These are the form fields available:
- Name, Email, Website, Multi-line text, Text, Date Picker, Telephone, Checkbox, Checkbox Group, Radio, and Select.
Note that these sub-blocks can only be added within a Form Block.
Within each field block, you can edit the field label(s) and choose whether the field is required or not.
To rearrange the blocks, hover over the block you want to move, then use the up/down arrows to move it up/down one position, or drag it to the desired location by using the drag and drop tool between the two arrows.
You can also add other non-form blocks within your Form Block if you need to include some text or an image, for example.
In this video, you can check how to add a dropdown menu to your form:
To customize the Submit button, you can replace the text directly in the button with what you’d like to use instead.
After adding a Form Block, you can specify where email notifications will be sent; when the form is filled out by clicking on the edit icon in the block toolbar.
Select the sidebar Form Block to open the Block Settings to customize what happens when you submit the form.
If you leave them blank, the notifications will be sent to the author of the post or page, and the subject line will be the post or page title.
If you forgot to enter the email address and subject line for form submission notifications when adding the Form Block, or you need to update them, select the Form Block and edit the Email Feedback settings in the sidebar.
When adding or editing a form block, you can edit the Confirmation Message settings used to set the action that happens when a user submits a form:
- Display a summary of the form that was just submitted.
- Redirect to a new URL, either on your site or anywhere else.
- Display a custom confirmation message.
Individual form element
You can also customize elements of each individual form field. To do so, click on the field.
In the toolbar, there are the options to mark the field as required or not and modify the width. You’ll also see a brief explanation of the field itself. Here are the ‘message field’ options:
You can customize the background color and text color for the block. The background color has two options: solid and gradient:
Submit form button
If you select the submit (or contact) button field, you will see block toolbar options that change the color of the button and the button text.
The button color settings allow you to change the color of the Submit button, including the background color and text color.
The background color has two options: solid and gradient. The text has only the solid color option.
You can also change the border radius of the button:
The button can be filled or outlined:
And you have the option to size the button based on width percentage:
The Submit button alignment can be set by clicking the left, right, or center icons.
The Jetpack Form Block provides the following integrations:
If Jetpack CRM is not already installed on your site, you can install it directly from your Form Block.
Add a Form Block to a page or post, select it and navigate to the “CRM Integration” panel in the Form Block settings, and click the “Install Jetpack CRM” button.
This feature is activated by default. While there are no controls for it within the primary Jetpack settings area, it can be deactivated at any time by following this guide.
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.
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.
We track when and by which user the feature is activated and deactivated.
Data Synced (Read More)
We sync a single option that identifies whether or not the feature is activated.
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.