Contact Form 7- How to Install, Setup, and Use
Contact Form 7 is one of WordPress’s most popular plugins for creating and managing forms. The plugin helps over 5 million WordPress website owners collect valuable data and 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. You can easily set up the form fields and customize the templates, even if you are a newbie.
This article will explain how you can create forms with Contact Form 7.
Table of Contents
- Installing Contact Form 7 on WordPress
- How to Create a Form With Contact Form 7
- How to Create Your Form from Scratch
- How to Insert Your Form
- How to Add Conditional Fields to Your Form
- 8 Extensions To Improve the Functionality Of Contact Form 7
- Other Important CF7 Options
- How to Improve Engagement and Optimize the Performance of Your CF7 Forms
- Troubleshooting Common Contact Form 7 Issues
- Conclusion
Installing Contact Form 7 on WordPress
If you are just starting, this video explains how to install and configure Contact Form 7.
Steps to Install Contact Form 7
The first step to using Contact Form 7 is to install the plugin on your website. To do this, go to Plugins >> Add New.
Next, search for “Contact Form 7” using the search function.
When you find the plugin, click on the Install Now button to install it.
Once you’ve installed the plugin, click to Activate it.
With Contact Form 7 installed and activated, you are now ready to start creating your forms. But first, let’s look at the plugin’s major features that make it stand out.
How to Create a Form with Contact Form 7
To create your very first form with Contact Form 7, navigate to your WordPress dashboard and go to Contact >> Contact Forms.
Using the Default Form
CF7 comes with a default contact form named “Contact Form 1.” If you don’t have the time to create a new contact form and want something quick, you can go with this default form.
It contains all the basic fields you want for a contact form.
To use the form, copy the generated shortcode and paste it to the page/post you want the form to appear in.
How to Create Your Form from Scratch
To create your custom form, go to Contact >> Add New
This will take you to the “Add New Contact Form” page where you can create forms, synchronize your mail, format your message body, and more.
To create a form, start by entering the title/name of the form in the title field.
Let’s say you want to create a form for customers to inquire about a product or service. Here are the steps to follow:
Step 1. Form Tab
To get started, click on the “Form” tab (if it isn’t already selected). The tab allows you to set the fields for your form.
Configure Existing Form Fields
By default, Contact Form 7 typically comes with some basic fields like name, email, subject, message, and submission button tags/fields.
You need to decide which of these fields you want in your form. If you don’t want any of these fields, delete them. You can also modify the existing fields. You can change the name of the field and its label.
For instance, you can change the call-to-action message in the submit button from “Submit” to “Send”.
Insert New Form Tags
Let’s say these default fields are not enough, you can add new tags to the form.
For instance, if you want to collect the phone numbers of anyone who submits the form, you just need to add a tel field. To do that, 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.
First, check the “field type” box to make the field ‘Required’. A required field must be filled for the form submission to work. If users don’t fill in the required field, they won’t be able to submit the form. The “required” status of a field is indicated by an asterisk (*).
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. Feel free to use what suits you best. In this example (image above), 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 imut in a new value.
If you are an advanced user, you can set an ID attribute or class attribute.
Click the Insert tag button once done.
Next, like other fields, you will need to wrap a label tag around this new Tel field.
And with that, we have added a telephone field. Follow the same steps to add other custom fields like a dropdown menu, date, radio, etc.
Step 2: Set Up Mail
Now that you have created the form, the next step is to get it to function exactly as it should, starting with the Mail tab, which allows you to set where emails regarding your forms are sent.
Here are the various fields in the Mail tab and how you can best fill them out.
To: (recipient) – This is where you enter the email where you want messages about your contact form sent. The email is sent to the site administrator’s email by default.
From: (sender) – This field contains the details of the person who sent a message from your WordPress site. You can change the email manually or type in the tag [your-email] to automatically use your email as the sender.
Other fields: To retrieve the subject field, insert the subject tag – “[your-subject]” – into it.
You can leave the Additional Headers and Message Body sections just the way they are or add text and other tags as needed. With that, you are done with the mail section.
Step 3. Set Up Messages
For a better user experience, you will want your form to display a message when a user completes an action. For example, you may want to show confirmation to inform users that their form has been successfully submitted. Similarly, you want error messages to appear when they make mistakes.
The Messages tab allows you to set up these notifications.
The default values will suffice. But you can always change them to what you want.
But be sure to click the Save button after making any necessary changes.
Step 4: Additional Settings
The additional Settings tab allows you to add code snippets to customize your forms further. For example, you can add the snippet subscribers_only: true if you want only subscribers to be able to fill out and submit the form.
And that is it. You have successfully created your form. Next, let’s look at how to insert your form using shortcodes.
How to Insert 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. Paste the shortcode where you want the form to appear.
Hit Preview Changes to see how the form would display.
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 send email alerts as required.
How to Add Conditional Fields to Your Form
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 can list out several options like emails, online ads, referrals, and ‘others’ in your form.
If a user chooses “others”, a field would typically appear that says “please specify.” It won’t appear if a user chooses a different option. This is an example of a conditional field. Here’s how you can add conditional fields to your CF7 forms.
Step 1. Install and Set Up Conditional Fields for Contact Form 7
To add conditional logic to your forms, you will need to first install and activate the Conditional fields for Contact Form 7 plugin. This plugin allows you to create a group of fields that do not appear until a set condition is true.
Step 2. Add Drop-down Menu
Once you install and activate the plugin, a new Conditional fields tab will be added.
To add a conditional field, you first need to decide which fields you want to add.
In this example, we want to create an option that allows users to specify where they found the website.
To get started, click on the drop-down menu tag to add a dropdown field.
In the dialog that pops up, add a name for the drop-down tag. There should be no spaces in the name. Next, enter the various options you want to show into the “Options” input box as shown below.
Then click Insert Tag.
Once the tag is inserted, add a label as shown below.
Step 3. Add Conditional Field
Next, add a Conditional Field Group field. Enter a name for the group and click Insert Tag.
An opening and closing pair of group tags will be added to the editor.
Anything in between the opening and closing group tags will only be shown when “Other” for your form. And this brings us to the next step.
Step 4. Insert Tags in the Group
Place your cursor in between the opening and closing group tags and click to add the text tag. This is the text box that will be displayed when someone makes the “Others” selection.
In the dialog box that opens, enter a name for the text input, and click Insert Tag.
Again, wrap the text field in a label as shown below.
Now save the form.
Step 5. Add Conditional Logic
With that done, you can finally set the conditions so that when a user selects “Others”, the field within the conditional group will be displayed.
To do this, switch to the “Conditional fields” tab and click add new conditional rule.
Click the Show option and select the group you created earlier. Choose the field you created earlier for the if option.
So the structure will look something like this: Show [show-when-other-selected] if [find-out-about-us] equals [Others]
Once you are done, click on the Save button.
And that’s it. You’ve added conditional fields to your form. You can use the shortcodes to display your form anywhere on your site.
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 form extensions to enhance its functionality.
Below are the top Contact Form 7 plugins to add more functionality to your website.
1. Really Simple CAPTCHA
Really Simple 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.
2. Drop Uploader for CF7
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.
3. Ultimate Addons for Contact Form 7
Ultimate Addons For Contact Form 7 is a must-have plugin that supplements Contact Form 7. It has over 30 critical features like Mailchimp, Conditional Fields, Redirection, WooCommerce, Multi Step Forms, and more. This plugin will greatly improve the functioning of your website’s forms generated using Contact Form 7.
4. Drag and Drop Multiple File Upload – Contact Form 7
Drag and Drop Multiple File Uploader is a simple, straightforward WordPress plugin extension for Contact Form7, which allows the user to upload multiple files using the drag-and-drop feature or the common browse-file of your webform.
5. Multi Step for Contact Form 7
Multi Step for Contact Form 7 turns long and boring CF7 form fields into exciting multi-steps forms. Assume you have a form with 20+ fields. This can put off your viewers and make them stop the process halfway. With the Multi Step for Contact Form 7, you can transform your lengthy contact form into a multi-step form.
The plugin would allow you to break the form into several easy to fill-out pages to make the process easier for your users.
6. Contact Form 7 Database Addon – CFDB7
Do you want to save or even export your Contact Form 7 data? The CFDB7 plugin can help you achieve this. The plugin saves Contact Form 7 submissions in your WordPress database and allows you to export the data as a CSV file.
Once you install the plugin, it will automatically start capturing form submissions from Contact Form 7 and save the submission data to the database.
7. Redirection for Contact Form 7
Oftentimes you want to redirect users to a different webpage after they fill out your forms. Redirection for Contact Form 7 allows you to do that.
8. Contact Form 7 – PayPal & Stripe Add-on
Contact Form 7 – PayPal & Stripe Add-on allows you to integrate PayPal and Stripe payment to your CF& forms. The plugin allows you to add and configure the payment structure for each form. So when a user clicks on the submit button, they are redirected to either the PayPal or Stripe payment pages where they can make payments for your product or services.
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 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.
How to Improve Engagement and Optimize the Performance of Your CF7 Forms
When creating forms, it’s important to make them easy to understand and fill-out. You also want the form to be visible to more people. Here are some steps you can take to improve your form’s engagement and optimize its performance.
Steps to improve CF7 engagement:
- Evaluate the need for each field and reduce the number of fields to only include what’s necessary. Having too many fields can lower engagement.
- Use a compelling Call To Action (CTA) that conveys the benefits of completing the form. E.g: “Request a Quote” or “Get Started.”
- Position contact forms strategically on high-traffic pages and use sticky headers for persistent visibilities as users scroll.
- Offer incentives or access to premium to entice users to complete forms.
- Include social proofs like testimonials and clients logos to improve trusts.
Steps to improve CF7 Performance:
- Test different forms setup, placements and CTA to identify the one that performs best.
- Implement caching to improve the form’s response time.
- Only set validation rules when necessary and use simpler rules to ensure data accuracy.
- Minify and Load CF7’s JavaScript and CSS files to lower their impact on page load times.
- Regularly update WordPress and CF7 to maximize performance, fix bugs and improve security.
- Choose themes and plugins that don’t clash with Contact Form 7.
- Use tools like Google Pagespeed Insight or GTmetrix to identify and fix performance issues.
Troubleshooting Common Contact Form 7 Issues
Here are some common issues that arise when using Contact Form 7 and how you can solve it.
1. People are not filling out specific information you want
If you want specific information like phone number, emails or names filled out on your form, then you should make that field mandatory. To do that, simply add * to that field to require users to fill out that field before being able to submit their form.
2. My emails end up in the spam section:
Emails sent using Contact Form 7 may be rejected during the sending and receiving process and wind up in the spam folder for various reasons. Email servers all around the world have the option to just reject your message as malicious, and this often occurs because of the content of the email or the email address.
For instance, if your website is located at www.fixrunner.com, you should enter an email address such as [email protected] in the Mail tab’s From: box. If not, many mail receiving systems will reject the CF7 email as spam, or it will not send correctly on some hosting systems.
3. Email is not delivered due to hosting
Depending on your hosting provider, you may need to make changes to your WordPress installation to be able to send email. Read your hosting documentation or get in touch with them to find out about their email setup.
If your hosting provider does not allow both wp_mail() and the regular PHP mail() method, you may need to use an SMTP to send emails on your site.
4. JavaScript Conflicts in Plugins/Themes
Contact Form 7, just like most WordPress plugins, sometimes conflicts with other themes or plugins. One typical sign of a JavaScript conflict between a plugin and theme in CF7 forms is a spinning arrow that keeps spinning after the form is submitted.
This usually means that there is a JavaScript issue with another JavaScript that is loaded on that page, which is preventing Contact Form 7’s JavaScript from finishing. You will need to find out the plugin causing the problem.
Deactivate all your plugins except Contact Form 7, and reactivate them one after the other to know which one conflicts with the plugin.
5. Securing Your Forms/Preventing spam
To secure your Contact Form 7, start by adding Google reCAPTCHA to stop bots. You can do this with any of the reCAPTCHA plugins we mentioned earlier. Also consider activating email validation to ensure only valid emails are submitted. Regularly update Contact Form 7 and WordPress to patch vulnerabilities, monitor your form for suspicious activity and update accordingly.
Conclusion
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.
But if you are skeptical about using CF7 form, there are other alternatives to Contact Form 7 solutions you can try. Examples are WP forms, Gravity forms, Ninja forms, and Formidable Forms. For more tips and tricks in WordPress, visit our WP College.
