Blocks

Blocks » 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!

Table of Contents

Video Tutorial

↑ Table of Contents ↑

Add the Form Block

To add the Form block, click on 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 suits your needs, or use the skip link at the bottom to start with a basic form.

Once you select Form, it shows 5 options with some pre-set fields, or a Skip button on the bottom to create your own.

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.

↑ Table of Contents ↑

Block Toolbar

When you click on the Form block, a toolbar of options will appear:

The Form block toolbar

The Form block has the following options in its toolbar:

  • Change block type.
  • Drag the block.
  • Move the block up or down.
  • Edit the form settings.

↑ Table of Contents ↑

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 also add other blocks not specific to forms, such as an image or text.

↑ Table of Contents ↑

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:

  • Move it up or down using the arrow buttons.
  • Make a field required — meaning it must be filled in before the form is submitted. You can make a form field required by clicking the * button or toggling the Field is required button in the right sidebar.
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.

↑ Table of Contents ↑

Form Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Click on the ⚙️ 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 that you have set in your account settings. If you wish to change the email address 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.

↑ Table of Contents ↑

See All Messages

You will be notified via email every time 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.

↑ Table of Contents ↑

Unwanted Messages and Spam

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.

↑ Table of Contents ↑

Tips

  • This method is not secure: A form is not a secure method for collecting private information, such as credit card numbers, bank account numbers, usernames, passwords, etc. 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.
  • Built-in spam filter: We filter submissions through Akismet to fight spam, then add them to your feedback management area which is accessible to Editors and Administrators on your site. We also email a copy to you.
  • Available on WordPress.org: If you’re running your own copy of WordPress.org, you can use the Jetpack plugin to get this same functionality.
  • Reply back: If you would like to reply back to a contact form submission, you will need to use your own personal email to do so. You can reply back with a custom email address by creating an account with an email provider listed here.

↑ Table of Contents ↑

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. Learn more.

Under "Additional CSS Class" you can add a specific class to target with CSS.

Pages: 1 2 View All

Not quite what you're looking for?

Get Help