Back to Support Content and Media Blocks Form Block

Form Block

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!

If you want your visitors to subscribe to your site or sign up for a newsletter, you’ll want to use a Subscribe block or follow our instructions for creating a newsletter.

Video Tutorial

Add the Form Block

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, visit our detailed instructions on adding blocks.

From the block inserter, the Form block is the one titled only "Form".

💡

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. You can edit the form fields after you’ve added the Form block.

Once you select Form, you will see a few predesigned form options, including Contact Form, RSVP Form and more.

💡

If you wish to add a subscription form, use the Subscribe block instead. Learn about Subscribe block here.

Once you have selected the type of form, check the settings on the right to configure a few key settings:

If you are happy with the form, click Publish or Update to make the changes live (the Form block will not work while the page is an unpublished draft.) Alternatively, read on to learn how to further customize your form before publishing.

Customize Your Form

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 start with.

To add a new form field, click the + Block Inserter icon that appears below the last field, as shown here:

The + Block Inserter icon is marked with an orange arrow.

Click Browse All and scroll down to see all the form fields you can choose from:

  • Name
  • Email
  • Website
  • Text
  • Date Picker
  • Message
  • Phone Number
  • Checkbox
  • Checkbox Group
  • Consent
  • Radio
  • Select

You can add blocks not specific to forms, such as an image or text.

Field Settings

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:

How to make a field required in the Form block using Field Settings or the * button in the toolbar.
Field Settings in the Form block

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.

Form Block Settings

You will find additional block settings in the right sidebar when you click on the block. If you do not see the sidebar, you may need to 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 settings icon in the Editor with a black background and the tooltip "Settings" below it.
Click the Settings icon to open the block settings
Change the Email Address Messages Are Sent To

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 that the form messages are sent to, follow these steps:

  1. Click on the List View button at the top left of the screen (it looks like three horizontal lines). This is marked with a 1 in the image on the right.
  2. Select the Form (as marked with a 2 in the image on the right.)
  3. On the right side of your screen, the Form Settings will show a box labeled Email address to send to. Type your email address here.
    • You can add multiple email recipients by separating them with commas.
  4. You can press Update when you’re done to save your changes.
The List View icon is marked with a 1, and the Form block is marked with a 2.
Email Subject Line

You can use this setting to set the subject line of the emails you receive each time someone sends you a message through your form.

On Submission

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.
Message Heading

When someone sends a message using your form, the text “Message Sent” will appear. Using the Message Heading section, you can customize this text.

See All Messages

You will be notified via email whenever someone sends a message through your form.

You can also read all messages sent through your form in your account by going to Feedback in the left sidebar of your site dashboard.

Feedback is managed much like comments. If feedback is spammy, hover over it and click Spam. If you want to delete feedback, hover over it and click Trash. Or, if legitimate feedback is marked as spam, you can click Not Spam.

In the WP-admin sidebar, Feedback is below Comments.

Unwanted Messages and Spam

Akismet is our built-in spam filter. This feature is automatically active on your site. If spam gets through our filter, you can flag feedback from the Form block as spam.

  1. Go to FeedbackForm Responses in your WordPress.com dashboard.
  2. Locate the form response and hover over the sender’s name.
  3. Click Spam to report the form response as spam.

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 section. This section is available from Settings → Discussion.

Feedback 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. Or, if you choose to use a contact form plugin instead of our Form block, the CAPTCHA functionality is compatible with the form you are using.

Tips & Troubleshooting

I am not receiving form submissions!

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 Akismet spam protection.

How to check if a form submission has been flagged as spam:

  1. Go to Feedback → Form Responses.
  2. Click Spam at the top of the form responses dashboard.
  3. 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.

Advanced

The advanced settings allow you to an HTML anchor and additional CSS classes for the current block.

You can also learn more about adding additional CSS classes to blocks here.

Classic Editor Instructions

Note: The instructions from this guide are referring to the Classic Editor. If you are using the WordPress block editor, please see this guide.

This is not a secure method for collecting private information, such as credit card numbers, bank account numbers, usernames, passwords, etc. To collect payments, please use PayPal or a similar payment processing service that securely handles financial transactions.

Video Tutorial
How to Add the Contact Form
Editing the Contact Form
Seeing Your Own Contact Information Pre-Filled in the Form
Adding a Contact Form With Shortcodes

Video Tutorial

Watch the video below for a quick overview of how it works, and read below for more examples and settings.

How to Add a Contact Form in your Posts or Pages
  1. Go to Pages or Posts in the left sidebar of your site dashboard.
  2. Select the post or page you want to add the form to, or add a new one.
  3. Above the toolbar, click Add Contact Form.
Add Contact Form has its own button above the editor, to the right of Add Media.

The contact form comes with four predefined fields: Name, Email, Website and Comment.

You’re free to edit, delete or add more fields to your form. Note that you can decide to make your field required or not.

Select the Edit button at the top to edit the form settings.

The Edit button at the top of the form allows editing of the form fields and how the submissions come through.

Notification Preferences

Screenshot of the contact form information field, with fields for the email subject line and the recipient email address.

Contact Form Fields

Each field requires a label and a field type. You can choose among the following field types:

Under Contact form fields, it displays the fields already added, and an Add Field button on the bottom left. An Update Form button is on the bottom right, to save changes.

Once you are finished adding fields and setting notification preferences, select the Insert button to add it to the post or page.

Editing the Contact Form

After you’ve added a contact form, you can add or edit fields and access the settings tab by clicking on the form, then selecting the pencil icon. Make the changes you want, then select Update.

Seeing Your Own Contact Information Pre-Filled In The Form

If you visit your live site to view your contact form, you may see your contact information is pre-filled in. Only you see this information because you are viewing your site while being logged into your WordPress.com account.

Adding a Contact Form with Shortcodes

You can add a basic contact form using a WordPress specific code called a shortcode. You can read more about shortcodes here.

To add a contact form using a shortcode, copy and paste the text below to any post, page, or text widget:

[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Website" type="url" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]

[[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]

Available Shortcode Field Attributes

The available field attributes are as follows:

label: Gives the field a descriptive label.

type: Determines what kind of field you add. Available options include:

options: Select and radio fields have a fourth option called “options”. This is a comma separated list of all the options available within the drop-down or radio field. An example would be:

[contact-field label="Do you have a blog?" type="radio" options="Yes,No" /]

You can also change notification preferences for an embedded contact form by adding the following parameters to the opening contact-form tag:

For example:

[contact-form to='email@yourgroovydomain.com' subject='Form Submitted']

This code would send an email notification with the subject line “Form Submitted” to the email address email@yourgroovydomain.com.

Changing Submit Button Text

submit_button_text: Allows you to change the contact form button text from “Submit” to anything you like. In the example below, the button would display “Contact me!” inside the button:

[contact-form submit_button_text='Contact me!'][contact-field label='Name' type='name'/][/contact-form]

placeholder: Sets placeholder or descriptive text inside an input field until it is filled. This text disappears when you start typing in the field. Not available for radio, select, and checkbox fields.

required: If you’d like the field to be required, add required="true" or required ="1" to the shortcode. If not, leave this out.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!