Blocks

Blocks »Form Block

The Form Block lets readers get in touch without exposing your email address. You can also use the Form Block for creating an RSVP form for an event by adding some dropdown or checkbox fields to the form.

Video Tutorial
Inserting the Form Block
Customizing Your Form
Form Block Settings
Why Do I See My Own Contact Info in the Contact Form?
Feedback Management
Instructions for Classic Editor

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 the simple payments block or a similar payment processing service that securely handles financial transactions.

If you’re using our Classic Editor, please see these instructions for adding a contact form.


Video Tutorial

The video below will walk you through the steps of adding and then editing a Form Block using our block editor:


↑ Table of Contents ↑

Inserting the Form Block

Detailed instructions on adding blocks can be found here.

In order to add a Form Block, click on the Inserter icon. Search for the Form Block and click on it to add it to the post or page.

You can also type /form and hit enter in a new paragraph block to add one quickly.

  • When you first add the Form Block, you will be prompted to specify where email notifications will be sent when the form is filled out.
  • You can enter a different email address and a subject line.
  • You can add multiple email recipients by separating them with commas.
  • If you leave them blank, the notifications will be sent to the author of the post or page using the email associated with their WordPress.com account. The subject line will be the post or page title.
Form Block - Email and Subject Line

Click Add Form, and a default form will be added, containing Name, Email, Website, and Message fields, and a Submit button. This can be used as is, as a basic contact form, or you can customize the form to suit your needs.

Form Block - Default Fields

↑ Table of Contents ↑

Customizing Your Form

  • The Form Block is a special kind of block that contains other blocks.
  • Each form field is itself a block within the main Form block. These internal form field blocks can be customized and rearranged within the Form Block.
  • To add a form field to the end of your form, hover over the Form Block and click the Add Block button that appears below the last field.

Alternatively, to add a field above an existing field, click the Add Block button at the top of an existing field.

Form Block - Add Block 2

The form fields you can choose from are:

  • Name
  • Email
  • Website
  • Text
  • Date Picker
  • Telephone
  • Checkbox
  • Checkbox Group
  • Radio
  • Select
Form Block Fields

These blocks can only be added within a Form Block. You can also add non-form blocks within your Form Block, such as an image or text.

Within each field block, you can edit the field label(s) and choose whether the field is required or not.

Form-Block-Required-Fields

To rearrange the blocks within your Form Block, hover over the block you want to move, then use the up/down arrows to move it up/down one position, or drag it to the desired location using the dragger between the two arrows.


↑ Table of Contents ↑

Form Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.
The block settings can be found in the sidebar.

Email Feedback Settings

Under Email Feedback settings, you can change the email address the form gets sent to, as well as the subject line of the email.

Form Block Settings -  Email Address and Subject Line

Button Settings

Here you can change the color of the form button. You can change both the background color and the text color.

You can change the text of the button by clicking on it and typing custom text.

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.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

↑ Table of Contents ↑

Why Do I See My Own Contact Info in the Contact 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.

  • Logged-in WordPress.com visitors to your site will see contact forms auto-populated with their own information.
  • Visitors who are not logged in will not see any information automatically filled in.
  • You can test this by logging out of WordPress.com and viewing contact forms – they will appear empty.
  • This feature does not apply to self-hosted sites using Jetpack.

↑ Table of Contents ↑

Feedback Management

The instructions from these steps are referring to the WP Admin dashboard. You can get to this dashboard by adding /wp-admin to the end of your site’s url (e.g.: example.wordpress.com/wp-admin)

You can read all feedback sent through your form in your feedback management area. Just click the Feedback tab in your left-hand menu in WP Admin.

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

Pages: 1 2 View All

Not quite what you're looking for?

Get Help