Blocks

Blocks »Form Block

The instructions below are for our classic editor. If you are using our new block editor, please see these instructions.

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
Feedback Management
Tips


Video Tutorial

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


↑ Table of Contents ↑

How to Add a Contact Form in your Posts or Pages

  • Go to My SitesSite and click on Pages or Posts. Select the post or page you want to add the form to, or add a new one.
  • In the toolbar, ⊕ Add button, and then select Contact Form
  • 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.

Contact Form Fields

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

  • Checkbox: allows the user to tick a box to make a choice
  • Dropdown: creates a dropdown of options
  • Email Address: requires an email address format
  • Name: text field
  • Radio Button: similar to the checkbox field type
  • Text: a single line of text
  • Text Area: several lines of text
  • Web Address: requires a URL format
contact-form-fields
  • Once you have added the fields that you want, click the Insert button to add it to your post or page.

Notification Preferences

Select the Settings option at the top to edit notification settings.

Contact-Form-Notification-Settings
  • By default, when a visitor submits your contact form, it will be emailed to the author of the post or page using the email address that they have on file for their WordPress.com account.
  • The subject line will be the title of the post if you don’t add custom text.
  • You can change both the recipient and the email subject of your emails under the Settings tab.
  • Separate recipient emails with a comma to send to multiple recipients.
  • You can also change the email address and subject using the shortcode (see below).

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


↑ Table of Contents ↑

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.


↑ Table of Contents ↑

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.

  • 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 ↑

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]

  • Each contact form shortcode must start with [contact-form] and end with [/contact-form]
  • Within the [contact-form]] codes, each individual field is wrapped in a [contact-field /] tag
  • Fields can be added or removed from the shortcode manually. For instance, if you wished to remove the website textbox, you’d simply remove that line, like this:

[[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:

  • text – Displays a regular single line text box
  • textarea – Displays a multi-line text box
  • radio – Displays radio options
  • checkbox – Displays a single checkbox
  • select – Displays a drop down with multiple options
  • email – Displays a single line text box
  • name – Displays a single line text box
  • url – Displays a single line text box

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″ if not, simply leave this out.

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:

  • to=’email address’ – The email address where the submitted form notifications should be sent.
  • subject=’email subject’ – What appears in the subject line for email notifications.

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]


↑ 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 contact 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.


↑ Table of Contents ↑

Tips

  • Add to Pages, Posts, or Widgets – Contact forms can be added to pages or posts, or if you copy the generated code, you can add your contact form to a text widget.
  • Forms are customizable – Contact forms can be customized. You can add and remove fields, choose which fields are required, change the email address, or change the subject settings. The form’s appearance can be further customized with CSS.
  • Edit an existing form – To edit an existing form, edit the post or page from WP Admin, then click the pencil icon that appears.
  • One per page – Each post, page, and text widget will only display one contact form.
  • Remember, email is not secure – Do not use contact forms for sensitive information like credit card numbers, as the information will be transmitted by email.
  • 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 Jetpack to get the 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.

Pages: 1 2 View All

Not quite what you're looking for?

Get Help