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.

Requirements

The “Form” block requires Jetpack plugin to be installed and connected to your WordPress.com account properly and the post type of this feature should be enabled by default on your setup.

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.

Adding block

To add a form, click on the Block Inserter icon and select the “Form” block.

add-jetpack-form-block
Inserting Jetpack’s form block

Alternatively, you can start typing /jetpack in a new paragraph block, then select “Form” from the drop-down list.

Editing block

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.

edit-jetpack-form-block
Configuring form block email notifications

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.

jetpack-form-block
Preview of the default fields in form block

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.

jetpack-form-block-fields
Adding internal form field 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:

  • Name
  • Email
  • Website
  • Multi-line text
  • Text
  • Select
  • Date Picker
  • Telephone
  • Checkbox
  • Checkbox group
  • Radio

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.

jetpack-form-block-reorder-fields
Rearrange the selected block within the form block’s container

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.

Color settings

You can choose the text and background colors for your form’s submit button.

jetpack-form-block-button-color-settings
Form block‘s submit button color settings

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.

Advanced

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.

advanced-custom-css-field
The advanced section lets you add a CSS class to your block

Last updated: 3 weeks ago

We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies ― Learn more

Accept