Beginner’s Guide Updated for 2022

Looking for how to set up Contact Form 7? Don’t fret, we’ll show you the exact steps you need to take to install and configure the plugin.

Contact Form 7 is the oldest and most popular contact form plugin out there. You’d think that setting it up should be easy but that’s not always the case. Don’t worry, though, in this step-by-step guide, we will walk you through the entire process and show you how to create a form using the plugin from scratch.

Let’s get started.

📚 Table of contents:

The first step is to install the plugin. You can download it from the official repository on WordPress.org or search for it straight in your WordPress dashboard.

To do so, in your WordPress dashboard, select Plugins → Add Plugin from the menu.

Add New Plugin

Then type Contact Form 7 into the search function. Once the Contact Form 7 plugin is displayed, click Install → Activate.

Activate Plugin

Once it’s activated, you can find the plugin’s functionality in the new Contact area of your WordPress dashboard.

Contact Form 7 menu

ℹ️ Note; read this if you’d like to learn more on how to install a WordPress plugin.

The plugin will create a basic contact form for you automatically. You can access it by going to Contact → Contact Forms → Contact Form 7. The form is functional right out the gate.

Your first contact form when you set up Contact Form 7
Form automatically created by the plugin

If you want to create a form from scratch, we’ll show you in the section below. Afterward, we will demonstrate how to configure email settings, how to keep the form secure, and how to publish the form on your website.

To use this form on your site, just take the shortcode that you can see in the image above and copy-paste it into any post or page on your site. The most common placement of such form would be on your contact page. Here’s what that can look like:

Contact Page

As soon as you publish the page, your visitors will be able to use it to contact you directly. Every message sent via the form will be delivered to the email address associated with the primary administrator user account on your site.

Contact form on a page

That being said, Contact Form 7 also allows you to customize that standard form or create completely new forms with custom fields. Here’s how to do that:

To begin, go to Contact → Contact Forms, click on Add New and enter the name of your new form.

You will notice that the plugin has automatically created some basic form fields like name, email, subject, and message.

Contact Form 7 default template
Contact Form 7 default template

In most cases, you’ll probably want to keep these fields and maybe add a few more depending on your needs. We’ll show you how to add a telephone number field, for example.

To add a new field, pick from the tags available at the top of the form editor panel. I’m talking about these:

Form tags
Form tags

To add a telephone number field, click on the tel tag. A popup will appear immediately.

Telephone tag
Telephone tag

In the popup, there are a number of options. You can leave the Name, Default value, ID attribute, and Class attribute intact. Select the Required field option and then click on Insert Tag.

Next, it’s time to add a label to your new field. Here’s what it should look like (highlighted in the image):

Insert labels
Contact Form 7 labels

Here’s what’s going on there:

  • The <label> and </label> tell the plugin where the new field begins and ends.
  • tel* indicates that we’re dealing with a telephone number field.
  • tel-717 is the unique id of the field. Warning; in your case, that number will be different – unique to your specific form and field.
  • Phone no. is just my own piece of text that I want to put next to the form field itself. This one is just an example. You can make yours whatever you like.

Save the form.

At this stage, you can take the form’s shortcode and copy-paste it into any post or page on your site. This is what my form looks like on a demo site:

A contact form built once you set up Contact Form 7
Form built with the plugin

You can create more fields with the help of other form tags. I suggest reading the official docs to learn more about the tags available and how to use them.

Now that your form is ready, it’s time to customize what happens after anyone tries to contact you using it. This is an important step because if the emails are not properly configured then you won’t be notified when someone fills out the form.

You can find the email settings in the Mail tab located right beside the form editor:

The Mail tab
Email setting tab

Here’s a quick rundown of all the options available on the email setting page:

To

When someone fills out the form, the plugin will want to notify you by sending you an email. So in this option, you will need to enter your email address. By default, Contact Form 7 uses the site admin’s email, but you can change it if you don’t want to use that one.

From

This field allows you to customize the from field of the email. A good practice is to put your site’s name here. The sender’s email address is also placed there.

Subject

This is where you can customize the subject of the email message you’ll get. If you’re not sure why you’d want to adjust that, we recommend leaving this setting to its default value.

email delivery settings when you set up Contact Form 7
Email settings

Additional headers

With this option, you can add Cc or Bcc recipients of the email. Take a look at this guide to learn how to do just that.

Message body

This is where you can customize the message body of the email.

Most of the time, you won’t need to mess with this unless you want to include something really specific in the body of the email.

For instance, if you decide to hook up the form to your company’s CRM then it might be useful to add some more tags here so that the CRM has easier time categorizing the email. If this doesn’t ring a bell, just leave this part as it is.

File attachments

In case you’ve added a file upload field to the form, be sure to include the file tag here.

Mail (2)

This is where you can set up an automated response email to the person who contacted you through the form. This can be a useful feature if you’re using the form for marketing purposes or want to confirm to the person that you’ve received their email.

👉 Feel free to experiment with this feature, but we’re not going to cover it here since it’s a bit more advanced.

We’ve mentioned this a couple times above, but to make this guide more consistent, here’s a more detailed tutorial on how to publish your form and make sure that all your visitors can see it.

Select Contact → Contact Forms. Then copy the shortcode next to the form that you want to add to your site.

Contact forms 1 and 2

Next, open the page or post where you would like to insert the contact form. Paste the shortcode in the text area of the post editor where you would like the contact form displayed.

Example contact page

Preview the page, and if you are happy with the results, click Publish. Once your contact form has gone live, test it to check it is working. Your contact form response should be sent directly to the email address you specified in the Mail settings. If your inbox remains empty, check your spam/junk mail before you start troubleshooting.

With that, we have come to the end of how to set up Contact Form 7!

By now, you should have Contact Form 7 up and running. This plugin comes with a full package of features needed to let your visitors to send you messages and have them arrive straight in your inbox. However, there’s a lot more you can do with the plugin.

For example, Contact Form 7 integrates with the popular email marketing services, like Sendinblue, Mailchimp, and others. This means that you can collect emails through Contact Form 7 and have them exported to your email marketing tool of choice. Moreover, there are plenty of third-party plugins that you can use to extend the functionality of the plugin even more.

What do you think of Contact Form 7? Was it easy to install and use for you? Let us know in the comments section below.

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Original text by Megan Jones, Sufia Banu, and Karol K.

Leave a Reply