Step by Step Setup for Contact Form 7

 

Contact Form 7 is one of the most popular plugins for WordPress and it is included in most premium themes. Many 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.

The plugin is popular for a reason, it is highly customizable and works with systems like Azure, that block other contact forms from notifying you through email. Not to mention it’s huge popularity 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 set up and notifying you through email with as much detailed contact information as you want.

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 being 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.

To add a phone number box, select 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 to submit.

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 what to write.

After you make your selection, select Insert Tag

contact form 7 configuration

Once you insert the tag the short code 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 you are interested?” section 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 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 new form fields, you just created do not automatically generate these labels. You will have to enter them manually, the easier way to do this is to copy and paste <label> and then type what you would like the field to say, 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 and if you do not set up the additional fields you added to the form 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

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 took that field out of the form.

Additional Headers: You can leave this part alone, it is set up so if you reply to the email it sends 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 this snippet 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.

2017-04-07T12:00:21+00:00

About the Author:

The Bauen Group is a Houston web development firm focusing on business software, customized web and mobile development services, and consulting solutions for small businesses. Our team of experienced and skilled developers specialize in creating customized web and mobile application. By incorporating smart design and extensive experience, we help our customers achieve their goals quickly and with lower costs.