WordPress Contact form 7 is one of the most popular plugins for creating lead generating forms. It is easy to integrate and equally easy to deploy. Contact Form 7 is even used with themes that have integrated contact forms because those forms do not offer customization and high-level options.
In this blog, I will show you how you can use Contact Form 7 plugin on your WordPress websites. I will also discuss customization of the forms and emails as well.
Given the number of options available for integrating custom contact forms in WordPress, it is important to know the value offered by Contact Form 7 and why it is a good fit for your website.
Features of Contact Form 7
Here are some of the outstanding features of the WordPress contact form plugin.
- Customization options to fit your unique needs
- Simple implementation and integration process
- Help is just a few clicks away
Install Contact Form 7 on WordPress
So let’s get started with the installation part.
Log in to the WordPress Admin Dashboard, go to Plugins → Add New and then type “Contact Form 7” in the search box. Once find, install and activate the plugin by clicking on Install → Activate.
Displaying a Form
To display a form, open Contact → Contact Forms at your WordPress dashboard. You can manage multiple forms from this location.
A contact form is already available for immediate use. Right next to the name Contact form 1, you can see the shortcode [contact-form-7 id=”18″ title=”Contact form 1″]. Copy this shortcode and paste it in your contact page.
Once done, your contact page would look like:
You can also customize this form to suit your requirements.
Installing a Contact Form 7 Template on WordPress
As some users may not have the knowledge of HTML coding custom contact forms; some may choose to purchase a CF7 template. One of the most popular one is the Contact Form 7 Employment Application Template. Simply purchase the code and copy & paste it into your plugin.
Customize WordPress Contact Form 7
Following is the step-by-step process of customization of the contact form generated by Contact Form 7.
Step 1: Naturalize Yourself with Contact form 7
Step 2: Make a New Contact Form
To make a new contact form, click Add New. The following page will appear.
The tabs on top of the text area offer some useful tags for composing/customizing the email. The text area already has a basic collection of tags. However, you can insert any element by inserting the proper tag.
Why Speed is Crucial for SEO & UX?
These expert tips will show you how to improve the speed of your WordPress Websites.
Let’s add a drop-down menu to the contact form. In the top area, select the button and you can input the relevant information. Once done, click Insert Tag to add the element to the text of the form.
Next move to the body of the email. Click the Mail tab and you can exactly format the layout of the email.
The last tab to edit is the Messages tab where you can customize the messages in several conditions.
At this point, most of the customization for the form is complete. You can use this form in the contact page by pasting the associated shortcode. If there is none, you should generate one. Once you have integrated the contact form, always test it.
In this form, once the user clicks the Send button, the “thank you” message would be displayed.
You will receive an email (refer to the below screenshot) as the result of your testing.
How to Add reCAPTCHA?
Contact Form 7 plugin has a captcha feature included. Please, follow the steps below to add reCAPTCHA to your website:
To get started with reCAPTCHA, you need to have a Google account and to register your site for API keys:
- Log in to your Google+ account and open reCapture admin panel:
- Register your website: enter your Domain name and Label. Click the Register button:
- Once you did that, you will get a site key and a secret key.
- Log in to your WordPress admin panel.
- Navigate to Contact → Integration page.
Find reCAPTCHA section and click Configure Keys button.
Enter your site key and secret key into the fields you see:
Open your contact form under the Contact → Contact Forms section in your dashboard:
Add the shortcode below to the contact form field: [recaptcha]
Click Save and refresh your site to see the changes.
Customizing and setting up a WordPress contact form using Contact Form 7 plugin is a piece of cake. I hope that this blog helps you out in setting up a custom contact form for your website. If you need clarification or have a question, Please leave a comment below.