fbpx

Requirements

  • WordPress 4.8 or higher

Installation

  • Log in to your site’s Dashboard (e.g. http://domain.com/wp-admin)
  • In the left panel, click “Plugins”, then click “Add New”.
  • Search for “Contact Form 7” — the latest version will appear at the top of the list of results.
  • Click the “Install Now” button.
  • Wait for the installation to finish, then click the “Activate” button.

Displaying a Form
Just after installing the Contact Form 7 plugin, you’ll see a default form named “Contact form 1”, and a code like this:

[contact-form-7 404 "Not Found"]

Copy this code. Then, open the edit menu of the page (‘Pages’ > ‘Edit’) into which you wish to place the contact form. A popular practice is creating a page named “Contact” for the contact form page. Paste the code you copied into the contents of the page.

Now your contact form setup is complete. Visitors to your site can now find the form and start submitting messages to you.

Next, let’s see how you can customize your form and mail content.

Customizing a Form
You may feel that the default form is too simple for you and you want to add more fields to it. You can edit the form template in the admin screen and add other fields.

To add fields to a form, make tags for them and insert them into the ‘Form’ field. You’ll find unfamiliar codes in the ‘Form’ field, for example, . These codes are called “tags” in the vocabulary for Contact Form 7.

A tag has a rather complex syntax, but don’t worry! You don’t have to learn it. You can use the “Generate Tag” tool to generate as many tags as you want.

The second word in the tag is its name. For example, the name of is ‘your-name.’ This name is important as it is used later in your mail template.

Customizing Mail
You can edit mail templates in the ‘Mail’ field set as you did with the form template. You can use tags there as well, but note that tags for mail are different from those tags for forms.

Tags you can use in a mail template contain only one word in brackets and look like [your-name]. You should be aware that this ‘your-name’ is the same as the name of the form tag which is noted in the previous example. The two tags correspond with the same name.

In mail, [your-name] will be replaced by the user’s input value, which is submitted through the corresponding form field, which, in this case, is .

Notes:

  • Make sure that there’s no shortcode left on the email. ex. [your_name]
  • If not provided, ask for the client’s email address to use for notification emails.

Troubleshooting 

  • Conflict with Jetpack’s Contact form feature
  • Mail not working, try to use SMTP plugin

Addon Plugins