Blocks

Blocks » Form Block

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.

Table of Contents

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.


↑ Table of Contents ↑

How to Add a Contact Form in your Posts or Pages

  • Go to My Site(s) → Pages or Posts. Select the post or page you want to add the form to, or add a new one.
  • 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

  • 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 from the options at the top of the form editing area.
  • 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).

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
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 have added the fields that you want, click the Update Form button to save the changes and add it to your post or page.

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

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]

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.


Pages: 1 2 View All

Not quite what you're looking for?

Get Help