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
How to add a contact form – Transcript
0:08 The Form block allows you to create a contact form on your website, so your visitors can get in touch with you.
0:14 To get started, click the Block Inserter button, and then search for the Form block.
0:20 Or, type a forward slash on a new line, followed by the word “form.” Then, press Enter to add the Form block.
0:27 When you first add the Form block, you can choose from a number of pre-built forms to help you get started more quickly.
0:32 Select the form you’d like to create, or click the skip link at the bottom to create a basic contact form.
0:44 This form includes a few standard fields to start with, like the visitor’s name… email address… and a brief message.
0:59 But you can also add additional form fields, by clicking the Block Inserter icon that appears at the bottom of the form.
1:04 Then, click the button to browse all the available form fields you can choose from.
1:12 Or, click and drag the field into the location on the form where you’d like it to appear.
1:17 Once you’ve added all the fields you want in your form, you can select any individual form field to make changes.
1:23 You can move the field to a different position using the arrow buttons.
1:27 And choose whether or not you’d like to make the field required before the form can be submitted.
1:32 You can even adjust the width of a field by showing the settings on the right.
1:36 And if you set the width for two consecutive fields to 50%, they’ll appear on a single line, to save some space.
1:43 When you’re finished editing your form fields, click the button on the left of the toolbar to select the entire Form block.
1:47 Then, you can configure the settings for your form… including the email address where you’d like form submissions to be sent.
1:56 But you can enter a different email address, or even add multiple email addresses, if you like.
2:06 You can also change the subject line of the emails you receive each time someone sends a message through your form.
2:11 Next, choose what happens when a visitor submits the form. The default is to show a summary of the fields they submitted in the form. But you can also choose to show a custom text message that you can enter here. Or, you can redirect them to another webpage on your website.
2:27 With these settings in place, your form is ready for use on your site. But you’ll notice there are also a few additional options for more advanced forms.
2:43 First, you can connect your forms with Jetpack CRM, so you can save contacts from your form entries and follow-up down the road.
2:50 And, if you install the Creative Mail plugin on your site, you can build an email newsletter list, so you can send emails to your audience.
2:58 You can also change the color of any text in the form… set a background color… or change the color of any links that appear in the form.
3:07 And finally, you can customize the padding… or the margin around your form.
3:12 And now you’re ready to publish your form and start collecting feedback from your visitors.
3:18 Whenever someone sends a message through your form, you’ll receive an email notification. But you can also review form responses by selecting the Feedback menu option in your dashboard.
3:28 Here, you can manage form responses in the same way you moderate comments. You can read… edit… or delete any message.
3:37 And if a message is unwanted, or looks like spam, just click the link to mark it as spam, or move it to the trash.
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
/formon 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. You can further edit the form fields after you’ve added the Form block.
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.
A form is not a secure method for collecting private information, such as credit card numbers, bank account numbers, usernames, and passwords, because the information is transmitted via email. To collect payments, use the Payments block or a similar payment processing service that securely handles financial transactions.
💡
If you wish to add a subscription form, use the Subscribe block instead. Learn about Subscribe block.
If you’re running a WordPress.org website, you can use the Jetpack plugin to add this Form block functionality to your site..
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, you will see a few form fields such as Name and Email.
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 blocks not specific to forms, such as an image or text.
Once you have added all the fields you wish to have in your form, you can click on any form field to make further changes, including:
- Move it up or down using the arrow buttons.
- Make a field required so that it must be filled in before the form is submitted. You can make a form field required by clicking the * button in the field’s toolbar or by 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). This is marked with a 1 in the image on the right.
- 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:
You can use the On Submission option to choose what happens when a visitor to your website submits the form. The options are:
- 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.
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.
By default, the messages will be sent to the same email address you set in your account settings. If you wish to change the email address to which the form messages are sent, enter a new email address in the box labeled Email address to send to.
You can add multiple email recipients by separating them with commas.
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.
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 Block Styles also includes the following settings:
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.
You can install a CAPTCHA plugin if you have a plugin-enabled site. Make sure the plugin you choose is compatible with Jetpack forms.
If you created a new form and are testing to ensure the form 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.
