Contact Form 7 is one of the most popular plugins for WordPress and it is included in many premium themes because it is highly customizable. The majority of these themes use page builder plugins and have prebuilt layouts that you can easily edit to make a professional looking website without having a lot of web design experience. However, Contact Form 7 is not quite as straight forward for beginners.

Contact Form 7 can manage multiple, complex contact forms and it works with systems like Azure, that block other contact forms from notifying you through email. Not to mention, it’s hugely popular, with over 3 million active installs. So basically, it is worth figuring out.  Here is what you need to know to get your contact forms setup and notifying you through email with as much detailed contact information as you want.

This post includes steps needed to:

  • Activate the plugin and create a new form
  • Setup the form
  • Add labels
  • Configure your email notification
  • Add the form to your website

Activate the plugin and create a new form

If it didn’t already come with your theme, download Contact Form 7 and activate it, like you would any other plugin. It will then show up in your dashboard side bar. Many themes come with preexisting contact forms but you may find they do not include all the information you are looking for so for this example, I will start from the beginning with a new contact form.

contact form 7 logo

Navigate to Add New and the plugin will create a new contact form that looks like this:

contact form 7

There will be on place on the top to enter your title. Use a title that describes the purpose of the form or the page it will be displayed on.

Form settings

The contact form that is autogenerated comes with a field for your name, email, subject, and message. The * sign indicates that the field is mandatory. If you would like to add additional fields, like phone number or company name, you do that using the options at the top.

contact form 7 options

To add a phone number field, click the tel option. A window will pop up that gives you several options, the first three being what you really need to pay attention to:

Field Type: Check the box if you would like the field to be mandatory.

Name: This is for internal use (the end user filling out the form won’t see it) name it something that identifies its purpose.

Default Value: This is will be the place holder to que the person filling out the form.

After you make your selection, select Insert Tag

contact form 7 configuration

Once you insert the tag, the mail-tag for it will appear in the form. You may have to cut and paste it to where you would like it to appear in the lineup.  

You can repeat this process for other information you would like to collect. For instance, I included a “What service are you interested in?” field and for this I used the text area option because I wanted to give people the option to elaborate as much as they wanted.

Adding labels

After you have set up all the form fields you are interested in, you may want to add labels. I use labels in my example form instead of using placeholder text, but you definitely need one or the other, because otherwise no one will know what information you are asking for. The fields that were already existing have labels.

A labeled form field looks like this:

<label> Your Email (required)

    [email* your-email] </label>

For the form fields you just created, the label will not be automatically generated. You will have to enter them manually. The easiest way to do this is to copy and paste <label> and then type what you would like the field to say, press enter, then copy and paste the appropriate mail-tag, and then copy and paste </label> after.

Here is another example:

<label> What products or services are you interested in?

    [textarea your-message] </label>

Configuring your mail notification

After you have labeled all your fields, your form will be ready to go on the front end. However, you will need to navigate to the Mail tab to set up how you will receive the email notifications. If you do not set it up to send to your email, it won’t. Additionally, if you do not set up the new fields you added (in the example, "phone number" and "products and services they are interested in")  you won’t get that information, even if the person filling out the form enters it.

Here is an example of a back end that is set up properly:

contact form 7 setup

Mail Form Descriptions (What this stuff actually means)

To: This is the email address you want your contact forms to be sent to.

From: The mail-tag [your-name] will display the name that the person enters on the form. The email address must be a valid email address so we used the same email as it is being sent to for simplicity.

Subject: Write what you want the subject of the email being sent to you to be. In the default, it uses the mail-tag for subject, but I took that field out of the form, so I took it out of the email subject line too.

Additional Headers: You can leave this part alone, it is setup so if you reply to the email notification in your inbox, it will reply to the person who filled out the form.

In the Message Body section, you will need to add the additional mail-tags for the fields you entered.

contact form 7 message body

Note, I had to add the phone number section and company name because they were not there by default. I also edited where the email was sent from to indicate the landing page.

If you are following along and want to copy this format, copy and paste the snippet below into the message body section:

From: [your-name] <[your-email]>

Company Name:

[your-Company]

Phone Number:

[your-Number]

Message Body:

[your-message]

--

This e-mail was sent from a contact form on (description of page or website).

Don’t forget to save!

Here is an example of what the notification email will look like with this configuration:

contact form 7 email

Inserting the contact form into your website

You are almost done and the last step is easy. Notice at the top of your form in blue there is a shortcode.

contact form 7 inserting the contact form

 

Simply copy and paste that shortcode into the page you would like it displayed and save the page. Here is an example of what it will look like:

contact form 7 wordpress

We have a parallax scrolling effect behind it, that is why there is an image.

And there you have it; your contact form is configured and ready to go. It is always a good idea to test it out to make sure you didn’t skip a step.

Have any other WordPress questions? Ask below or contact us here!

Why Partner With The Bauen Group?

The Bauen Group is a full-service tech and digital marketing company with services including mobile app and website development based in Houston, Texas. We focus on the unique needs of small to midsize businesses. The websites are built in a user friendly content management systems making it easy for your team to make updates or maintain a company blog. Our team focuses on your brand's personality to create a professional, modern, easy to navigate, conversion-focused website or mobile app that is structured to build brand loyalty and growing your market.