Contact form 7 is without a doubt one of the most popular plugins for creating and managing forms in WordPress. It has helped over 5 million WordPress website owners stay in touch with their visitors.
One feature that makes Contact form 7 stand out from all other form plugins for WordPress is its remarkable simplicity. With it, you can easily set up your form fields, customize your form templates, and do a lot more.
Created by Takayuki Miyoshi, a seasoned WordPress plugin developer, Contact form 7 was meant to be beginner-friendly. However, some beginners complain about finding it difficult to build forms with the plugin. In fact, many experience trouble setting up the plugin properly.
In this article, we will be showing you how to set up contact forms in WordPress using the Contact Form 7 plugin.
Additionally, you will learn about the add-ons and plugins you can use to further enhance the functionality of Contact form 7.
We have made this guide very simple, so following through wouldn’t be a problem for you.
- Why contact form 7?
- Steps to installing CF 7 and set it up
- Extensions to improve the functionality
- Other important CF7 options
Why Contact form 7?
But Contact Form 7 is preferred by many because it is simple and it works.
In addition to simplicity and functionality, Contact Form 7 has several other features that easily makes it a good choice. Here are the top features:
If you don’t guard your website against spam messages, they can easily overwhelm you. Contact form 7 has a feature to prevent this.
Ease of customization
You sure would like your forms to pop. After all, nobody likes mediocrity. This plugin lets you customize your WordPress forms just the way you want.
It supports CAPTCHA
This is to keep automated messages generated by bots away from your site.
Lastly, you can get started for free.
Steps to Install Contact Form 7 And Set it Up on WordPress
Step 1: Installing and Activating Contact Form 7
First, install the plugin. To do so, navigate to Plugins >> Add New.
Next, search for contact form 7 using the search function. When you find the plugin, install it by clicking the Install now button.
After installation, activate the plugin right away by clicking the Activate button, which will appear after installation is complete.
With Contact form7 installed and activated, you are now ready to move to the next step, which is creating and setting up your form.
Step 2: Creating Your First Form
To create your very first form, from your WordPress dashboard navigate to Contact >> Contact forms.
There is a default contact form that goes by the name Contact form 1. If you do not have so much time to create a dazzling contact form and you want something quick, you can go with the default form.
It works, only that it might not look or work the way you want.
But to create your own custom form, navigate to Contact >> Add New.
This is where you build forms, synchronize your mail, format your message body, and customize your forms in the additional settings section.
To create a form, start by entering the title/name of the form in the title field.
If the Form tab isn’t already active, click on it. It is here you will find all fields for contact form 7. These are the fields you will need to create a functional form.
By default, Contact Form 7 will have the basic, required fields already inserted in your form. They include the name text field, email field, message box field, and submission button.
But let’s say these default fields aren’t sufficient, and you would like to add more to it. For instance, you may like to get the phone numbers of those who wish to contact you.
To add a phone number field, place your cursor where you want the field to appear and click on the tel button.
Doing this will launch a popup box where you can customize your field.
If you would like to make the new addition a required field, check the ‘Required’ box. A required field is one that must be filled for form submission to work.
In the Name field, set a name for the newly created form field. This is the name that you will use to identify the field. So feel free to use what suits you best. In this example, we used telephone-number.
The default value box is where you can set the value that the form field should have. This value appears by default in the field, but the user can clean it out and write in a new value.
If you are an advanced user and which to add styling to the field using CSS codes, set an ID attribute or Class attribute. It can be anything. Then make reference to the field in your stylesheet using the ID or Class attribute.
Once done, click the Insert tag button.
Next, like other fields, we will wrap a label tag around this field.
And with that, we have added a telephone field. To add other custom fields such as a dropdown menu, date, radio, etc., just follow the same steps.
You can also change the call-to-action message in the submit button. For instance, you can change it from “Send” to “Contact us”.
Step 3: Setting Up Your Form
Now that you have created the form, the next step is to get it to function exactly as it should. To start, click the Mail tab. This is where you set how and where messages from your contact form are sent.
In the To field, type in the email where all messages coming from the form will be sent to.
The From field is where you get details of the person that sends a message from your WordPress site, via your contact form. For instance, to put the email of the sender in that field, type in [your-email]. Mind you, this code will only work if it is what you used for email tag in the ‘Form’ tab.
To retrieve the subject of the mail, insert the subject tag – “[your-subject]” – into the Subject field.
You can leave the Additional Headers and Message Body sections just the way they are. Or you may decide to add text and other tags as needed.
With that, you are done with the mail section.
Next is the Message section
For a better user experience, you will want your form to display a message when a user completes an action. As an example, you might want to thank them when they successfully submit a form.
In addition to that, you may also want error messages to appear when they make mistakes. It’s in the Messages section that you get to set all these.
The default values will suffice. But you can always change them to what you want.
After making any changes you deem necessary, your form is ready to fly. So go on to Save it.
With your form built and set up, it’s time to proceed to the next step.
Step 4: Adding Conditional Fields
Conditional fields are fields that only appear based on a WordPress user response.
For example, let’s say you wish to know how a user found out about your website. You list out several options, including “others”.
If a user chooses “others”, a field that says “please specify” then appears. It won’t appear if a user selects another option. This is an example of a conditional field.
To add conditional logic to your forms, you will have to install and activate Conditional fields for contact form 7 plugin.
The way this plugin works, it creates a group of fields that do not appear until a set condition is true.
With the plugin installed and activated, select a form you wish to add conditional logic to, and click Edit.
Next, click the drop-down menu item to add a dropdown field. In the dialog that pops up, add a name for the text input. There should be no spaces in the name.
In the “Options” input box, enter the various options about how they found your site.
When done, click Insert Tag.
The tag should be inserted and you should add a label as seen below. Once that’s done, click Conditional Fields Group to add a conditional group.
In the dialog box, enter a name for the group (such as ‘show-when-other-selected”) and click Insert Tag.
An opening and closing pair of group tags will be added.
When we’re done, anything within those tags will only be shown when “Other” is selected as how the site was found. And this brings us to the next step.
Inserting Tags in the Group
Place your cursor in between the opening and closing group tags and click text to insert a text box. This is the text box that will be displayed when “Others” is selected.
In the dialog box that opens, enter a name for the text input, and click Insert Tag. Again, wrap this text field in a label as shown below.
Now save the form.
Adding Conditional Logic
With that done, you finally have to set the condition. Which is, when a user selects “Others”, the field within the conditional group is displayed.
To do this, switch to the “Conditional fields” tab and click add new conditional rule.
The condition works in this way: Show [Conditional Group] if [Selected Field] equals [Selected Value].
In our case, what we set is “Show [show-when-other-selected] if [find-out-about-us] equals [Others]”.
After adding your condition, click Save.
And with that, you have added a text field that only appears when the user selects others in the “find us” dropdown menu.
Step 5: Inserting Your Form
To access the form you have just created, go to Contact >> Contact Forms. Then copy the generated shortcode for your contact form.
Now, locate the page you want the form to appear and open it for editing. Next, paste the shortcode where you want the form to appear.
To see how the form would display, hit Preview Changes.
If all looks fine, go on and click Update to publish your contact form. Also remember to run tests on the form to ensure it is working and sending email alerts as required.
Extensions To Improve the Functionality Of Contact Form 7
Contact form 7 can do a whole lot more than just collect messages and sender details. However, for this to happen, you will need to install a couple of forms extensions to enhance its functionality.
Below are a few.
CAPTCHA is an innovative solution developed to keep spammers and spambots in check. Without them, your inbox would be run over by a ton of spam emails.
Developed by the same author as Contact form 7, this plugin is very simple to use, hence its name.
Invisible reCAPTCHA provides an extra layer of security against spam messages. This plugin requires some more work to set up but also provides better spam protection.
To use this plugin, you first have to add your website to your Google reCAPTCHA account.
After registering your website, a Secret and Site Key will be generated for you. All you have to do is to copy the generated keys and paste them into the plugin’s settings. And you are all set.
What if you wanted users to submit file attachments while sending a message via your contact form? Maybe you put a vacancy post, and would like applicants to send their resume along with the applications.
Unfortunately, CF7 has no file uploads feature. The only way to make this happen is via an add-on.
Drop Uploader for CF7, a premium addon, can get the job done.
One of the very cool features of this plugin is that it lets you determine where files are stored when users submit their messages. You have the option of using Dropbox or your Google Drive.
What’s more, you can customize the plugin just the way you want it.
It is sold for $17, and you can get it at Codecanyon.
Form design is an important factor to consider when building contact forms. This is because a well-designed form will have a better user experience, hence better engagement (especially when you want to collect customer information).
This is where form builders like Material Design for CF7 comes to play. So begin by installing and activating the builder plugin, after which you can start building and styling your form.
You can use it to style your input fields, radio buttons, dropdown menus, and lots more.
The best part is, it’s free and works with all WordPress themes.
Other Important CF7 Options
In this section, we will cover a few common how-tos and settings you would use often in Contact Form 7.
How to Change Contact Form 7 Email Address in WordPress
Maybe you put in the wrong email address during the initial form creation process, and so would like to change it. Thankfully, CF7 lets you do just that.
To begin with, open the form you wish to edit by navigating to Contact >> Contact forms. Hover over your targeted form, click Edit.
Next, click the Mail tab, and in the To field, type in the new email address you wish to use.
Save the changes, and you are done.
How to Link CF7 to MailChimp
Mailchimp is a popular marketing tool that can be integrated with Contact form 7. If you have a Mailchimp account and would like to integrate it with CF7, first install and activate Contact Form 7 Mailchimp Extension.
With the plugin installed and activated, head over to your Mailchimp account and copy your API key.
Then go back to WordPress admin area. Navigate to Contact >> Contact forms, and select a form. Click on ChimpMatic Lite tab, and paste your API key.
Finally, click on the blue connect button, and you are all set.
As a website owner, you need a way to listen to the requests of your clients and visitors. The easiest way to achieve this is by setting up contact forms on your site.
Contact form 7 is a plugin solution you can count on. Not only is it effective, but it’s also free. So you don’t have to worry about making an upfront financial commitment before using the plugin.
Formidable forms, for example, let’s you build complex forms that are visually appealing.
These are some of the WordPress form plugins you can trust.
For more tips and tricks in WordPress, visit our WP College.
- Typeform WordPress (How to use Typeform with WordPress)
- MailChimp for WordPress
- WordPress Popup Plugin