The form block is a great way to offer your readers the ability to get in touch or submit information without giving out your personal email address.
In case you are unable to locate the functionality or the corresponding block in your editor, please visit Jetpack’s control modules page to learn how to activate this feature on your site.
To add a form, click on the
⊕ Block Inserter icon and select the “Form” block.
Alternatively, you can start typing
/jetpack in a new paragraph block, then select “Form” from the drop-down list.
Right after inserting the form block to your post or page, you will be prompted to specify where email notifications will be sent when your readers submit the form. You can enter an email address (or multiple comma-separated addresses), and a subject line.
In case you leave these fields blank, the notifications of form submission will be sent to the author of the post or page, and the subject line will be the post/page title.
Clicking on the “Add Form” button will insert a default form to your post or page, which might contain “Name”, “Email”, “Website”, and “Message” fields, along with a “Submit” button.
Customizing the form
The form block comes with a set of nested blocks and contains other blocks as child components, and this means that each form field is itself an individual block within the main form block.
Any of these internal or child form field blocks can be customized independently and rearranged within the main form block’s container.
Alternatively, you can click the “Add block” button at the top of an existing field to prepend a new field above the selected one.
The form block offers the following field options which you can choose from:
- Multi-line text
- Date Picker
- Checkbox group
Note that the blocks listed above can only be inserted within a “Form” block.
Hovering over the block that you would like to move will enable you to rearrange the selected block within the form block’s container by drag and drop.
You can drag any inner block within its form block’s container by clicking and holding the six-dot-grid icon near the top-left corner of each block, or use the up and down arrows to bump a block one spot in the direction you want.
You can choose the text and background colors for your form’s submit button.
Selecting proper colors will help you to call attention to important content with a nice contrast for readability purposes.
Accessibility parameters are implemented within this color picker panel to warn you when the text may become illegible for persons with reading impairments.
The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and apply styles to the block as you see fit.
Last updated: 2 years ago