The Form block lets readers get in touch with you through your website. Use the Form block to add many types of forms, including a contact form, appointment booking form, event registration form, feedback form, and more.
In this guide
To add the Form block, click the + Block Inserter icon and search for “Form.” Click it to add it to the post or page.
For more information, visit our detailed instructions on adding blocks.
💡
Using your keyboard, you can also type /form on a new line and press enter to quickly add a new Form block.
When you first add the Form block, you will be prompted to select the type of form you want to insert. Select the type that most closely suits your needs. After you’ve added the Form block, you can edit the form fields further.
Types of forms include:
- Contact Form
- RSVP Form
- Registration Form
- Appointment Form
- Feedback Form
- Salesforce Lead Form
Click the “Explore Form Patterns” button to browse beautifully designed, ready-to-go form layouts you can add in just a few clicks.
💡
If you run a WordPress.org website, you can use the Jetpack plugin to add this Form block functionality.
The Form block is designed to collect information from your visitors. It is not a secure method for collecting private information like account numbers and passwords because the information is transmitted via email. Nor is it a way for your visitors to upload files to your site.
- Collect payments through your site using one of our secure payment options, like the Payments block. Learn more about collecting money through your site.
- Allow visitors to upload files through a form plugin that supports file uploads or alternative methods.
Learn more about other types of forms that you can add to your WordPress.com site.
There are two levels to the Form block with different settings depending on what you have selected:
- The overall Form block. This is where you will set your form’s functionality and overall look and feel.
- Each form field in your form will have style settings you can apply independently of each other. For example, form fields like name, email, and the submit button will have style settings you can apply independently of each other.
Using List View, you can view the hierarchy of the form and select the block you need:
If you click on the content inside of a form, you can select the parent Form block from its icon in the block toolbar:
Learn more about selecting blocks.
Once you have selected the type of form, check the settings on the right to configure a few key settings:
- Email address to send notifications to (more details)
- Email subject line (more details)
- What happens when someone submits the form (more details)
You can control and customize exactly which fields are shown in your form. When you first add the Form block, fields like Name, Email, and Message will be added by default.
To add a new form field, click the + Block Inserter icon that appears below the last field, as shown here:
Click “Browse All” and scroll down to see all the form fields you can choose from:
- Name
- URL
- Text Input Field
- Multi-line Text Field
- Date Picker
- Phone Number
- Terms Consent
- Checkbox (Single Choice)
- Checkbox (Multiple Choice)
- Single Choice (Radio button)
- Dropdown Field
You can also add content not specific to forms, such as an Image block or Paragraph block for text.
You can click on any individual form field to make changes, like:
- Move the form field up or down using the arrow buttons.
- Mark a field required by clicking the * icon in the toolbar or toggling the “Field is required” button in the settings sidebar.
You may also adjust the width of the field using the “Field Width” settings on the right. If you set two consecutive fields to 50% width, they will appear on a single line.
To access the form’s settings, first select the overall Form block (instead of an individual field in the form.) You can click on the empty space between two form fields or select the parent Form block using List View:
- Click on the List View button at the top left of the editing screen (it looks like three horizontal lines). The image on the right shows this marked with a 1.
- Select the Form block (as marked with a 2 in the image on the right.)
- On the right side of your screen, view the Form block settings.
If you do not see the sidebar on the right, click the Settings icon in the top right corner to bring up the settings. This icon looks like a square with two uneven columns:
The following settings affect all fields in the form:
You can use the “On Submission” option to choose what happens when a visitor to your website submits the form.
To customize the view after form submission, take the following steps:
- Instead of clicking directly on the Form block (which will select an individual field in the form), open List View by clicking the icon that looks like three horizontal lines in the upper left corner of the editor screen.
- In the List View, click on “Form” to select the parent Form block.
- In the Form block settings, click “Submission Settings” to expand the options.
- In the “On Submission” dropdown, choose from the following options:
- Show a summary of submitted fields.
- Show a custom text message that you can write.
- Redirect to another webpage, which you can use to send people to another page on your site or any other site.
- Click the “Save” button at the top of the screen.
When someone sends a message using your form, the text “Your message has been sent” will appear. Using the “Message Heading” setting, you can customize this text.
Under the “Email Connection” section, you can modify where the forms are emailed to. By default, the messages will be sent to the same email address you set in your account settings.
Follow these steps to update where the forms are emailed:
- Open List View by clicking the icon that looks like three horizontal lines in the upper left corner of the editor screen.
- In the List View, click on “Form” to select the parent Form block.
- Under the form’s block settings, open the “Email Connection” section.
- Enter a new email address, or add multiple email addresses separated by commas.
- Click the “Save” button to save your changes.
You can use the “Email Subject Line” box to set the subject line of the emails you receive each time someone sends you a message through your form.
By default, the subject line uses the following format:
“[Site Title] Contact”
If your site’s title is “Adventure Trips“, the subject line of the contact form you’ll receive via email is:
“[Adventure Trips] Contact”
You can customize the subject line to include unique information from the form data. For example, let’s say your form includes a Name, Email, and Message field. You can include Name and Email surrounded by curly braces (i.e., {name}, {email}) in the subject line field to make it unique. The subject line will be customized with that specific information for each message you receive.
You can include any fields by typing the field name in between curly braces: { }. The field names should be spelled exactly the way they are spelled on the contact form. The field names are not case-sensitive.
For more, visit our detailed instructions on Advanced settings.
These settings affect individual fields within the contact form. To access these settings, click on an individual field inside the Form block:
- Field is required: This option makes a specific field required while completing the form.
- Placeholder Text: This option can be used to display an expected example text for text input fields.
- Field Width: Choose from 25%, 50%, 75%, and 100%. If you set two concurrent fields to 50%, they will sit next to each other in the form.
- Sync fields style: Enabled by default, this option allows you to set the following styles on one text input field on the form and apply them collectively to the rest of the text input fields. You can toggle this off to style text input fields individually. The sync fields style applies to:
- Color: sets colors for:
- Label Text: the text that appears above the form field.
- Field Text: the (optional) placeholder text, as well as the input text in a field.
- Field Background: the background of the input section of a form field.
- Border: the border around the form field.
- Input Field Styles: Set the text size, line height, and border styles for the field.
- Label Styles: Set the text size and line height for field labels.
- Color: sets colors for:
- Advanced: You can use Advanced settings to add HTML classes to target form fields and apply Additional CSS.
In the block settings sidebar, click on the Styles icon to access the design settings for the block. The Styles icon is in the shape of a circle with half of the circle filled in:
There are 3 styles to choose from:
- Default shows the field names outside the input fields with no animation.
- Animated shows the field names inside the input fields, a brief animation, and also highlights the field a visitor clicks.
- Outlined shows the filed names inside the input fields, a brief animation, and an outline around the form block settings all the time.
The Form block styles also include the following standard settings:
When you click on the block, a toolbar of options will appear above or below it:
The Form block contains the following toolbar options from left to right:
- Change block type.
- Drag the block.
- Move the block up or down.
- Change alignment, with options for wide and full width if supported by the theme.
- Ask the AI assistant to create your form.
- More options.
When you click on an individual form field within the Form block, the toolbar has the following options from left to right:
- Select the overall form.
- Change field type.
- Drag the field.
- Move the field up or down.
- Ask the AI assistant to create your form.
- Make the field required.
- More options.
You will be notified via email whenever someone sends a message through your form. You can reply to these emails directly in your email program.
You can also read all messages sent through your form by going to Feedback in the left sidebar of your site’s dashboard.
If a message is spammy, hover over it and click the Spam link to report it as spam. This flags the message, training the spam filter to recognize these types of messages as spam in the future.
If you want to delete feedback, hover over it and click Trash.
Additionally, to protect your form submissions from spam and unwanted content, you can add keywords, usernames, IP addresses, email addresses, and more to the Disallowed Comments settings. This option is available from Settings → Discussion. Messages matching the words added to Disallowed Comments will be sent directly to Trash within the Feedback section.
If your site is plugin-enabled, you can install a CAPTCHA plugin. Make sure the plugin you choose is compatible with Jetpack forms.
If you created a new form and are testing it to ensure it is working, make sure you use real information. Often, fake information looks like spam, so it can get filtered by our spam protection.
How to check if a form submission has been flagged as spam:
- Visit your dashboard.
- Go to Feedback → Form Responses.
- Click Spam at the top of the form responses dashboard.
- Look for the missing message in Spam.
If the submission is in Spam and should not be marked as spam, you can hover over the message and click Not Spam.
For more troubleshooting tips on receiving contact form submissions, check out this Troubleshooting Guide.
