Contact Form 7 is one of the most popular plugins for WordPress. You will find it included in most premium themes. Premium themes often 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 as straight forward for beginners.
The plugin is popular because it is highly customizable and works with Azure systems, which can block other contact forms from notifying you through email. And with over five million active installations, it is worth figuring out.
Here is your step by step guide with everything you need to know to get your contact form set up and working correctly.
Activate Contact Form 7 and Create a New Form
Contact Form 7 should come with your theme, but if it did not, be sure to download and activate it. The plugin should appear in your dashboard sidebar. Keep in mind; many themes come with preexisting contact forms, but you may realize that they do not include all the features you need.
Let us dive into an example, starting from the beginning of creating a new contact form.
Navigate to Contact on the menu on the left side of your WordPress dashboard. Select Add New, and the plugin will create a new contact form that looks like the image below.
There will be a space on the top to enter your title. Create a title that describes the purpose of the form or the page where it will be displayed.
Exploring the Form Settings
The autogenerated contact form comes with a field for your name, email, subject, and message. The * indicates that the field is mandatory. If you would like to add additional fields, like a phone number or company name, you can do so by utilizing the options across the top.
For example, if you are wondering how to add a phone number in Contact Form 7, select the tel option. A window will pop up with several options. The first three options are where you need to direct your attention. They are:
Field Type: Check the box if you would like the field to be mandatory to submit.
Name: This is for internal use, which means the end-user filling out the form will not see it. Give the field a name that clearly identifies its purpose.
Default Value: This is a place holder. It tells the person who is filling out the form of what to write.
After you fill out the options, select Insert Tag.
Once you insert the tag for the shortcode, it will appear in the form. You may have to cut and paste the line of code to where you would like it to appear.
Repeat this process for any other fields you would like to add. For example, you can include a “What service you are interested?” section with a text area option, allowing people to elaborate as much as they want.
Adding Labels to Your Contact Form
After you have set up all your form fields, you may want to add labels. You need labels on your form because no one will know what information you are asking for if you do not. The fields that automatically populated with the new form already have labels, so if you didn’t create new fields, you do not need to add labels, unless you want to put a creative spin on your form content.
A labeled field form in Contact Form 7 looks like this:
To manually enter your labels, type <label> . For example, you may it the code laid out like this:
How to Setup Contact Form 7 Email Notifications
After you have labeled all the fields in your form, your form is ready to go on the front end of your WordPress website. However, before you publish it, you will need to set up Contact Form 7, email notifications in the Mail tab. If you do not make sure it is ready to send to your email, you will not receive notifications of new submissions. And if you do not set up the additional fields you added, you will not receive that information even if it is entered.
Please see below for an outline of how to fill out the Mail section to receive notifications appropriately:
To: Enter the email address where you want your contact forms sent.
From: The mail-tag [your-name] will display the name that the person enters on the form. The email address must be valid, so we used the same email as it is sent to for simplicity.
Subject: Enter the subject of the email that gets sent to you. Make sure it is something you will instantly recognize in your inbox.
AdditionalHeaders: You can leave this part alone. It is already set up, so if you reply to the email, it automatically responds to the person who filled out the form.
Message Body: Here, you will need to add the additional mail-tags for the new fields you created. Below is an example:
Note: I had to add the phone number section and company name because they were not there by default. Additionally, I changed the text at the bottom, indicating what page the user filled out and sent the form.
Remember: SAVE YOUR WORK!
Embed Your Contact Form into Your WordPress Website
This step is the last one, and it is relatively easy. At the top of your form, you will see a shortcode highlighted in blue. Copy and paste the code onto the page where you would like it displayed and save.
Your contact form is ready to go. It is best to test your Contact Form 7 WordPress set up by filling out a test form. If it does not send an email notification and you know that you host your WordPress site on Azure, please see this article on how to integrate your form with Microsoft Azure.
Do-It-Yourself or Work with a Developer?
If you made it through the entire post and successfully set up your form, * high five! * If that was a fun challenge for you, excellent. But if you are thinking you never want to do anything like this again or you could not seem to get the form working correctly, you may want to think of moving from do-it-yourself to working with a developer.
At The Bauen Group, we have a team of website and mobile application developers who are excited to help. We focus on the unique needs of small to midsize businesses, creating websites built in a user-friendly content management systems. We want to make it as easy as possible 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 grow your market. Whether you are ready to start your project now or are thinking about taking a technology leap, we are here for you. Just drop us a note!
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.