Contact form 7 is one of the most popular plugins for WordPress. It is easy to integrate and equally easy to deploy. Contact Form 7 is even used with themes that have integrated contact forms because the integrated forms do not offer customization and high-level options.
In this blog, I will show you how you can integrate Contact Form 7 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. Here are some of the outstanding benefits of the plugin:
- Customization options to fit your unique needs
- Simple implementation and integration process
- Help is just a few clicks away
So let’s get started with the installation part.
Login to the Admin Dashboard. Go to Plugins>>Add New and search for Contact Form 7 in the right panel.Install and activate the plugin.
Displaying a Form:
To display a form, open Contact >> Contact Form at your WordPress admin panel. 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 could 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 could easily customize this “vanilla” form to suit your requirements. Next up is the customization of the contact form.
Customizing 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 offers some useful tags for composing/customizing the email. The text area already has a basic collection of tags. However, you could insert any element by inserting the proper tag.
Let’s add a drop-down menu to the contact form. In the top area, select the button and you could 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 could exactly format the layout of the email.
The last tab to edit is the >Messages tab where you could customize the messages in several conditions.
At this point, most of the customization for the form is complete. You could 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 the below screenshot) as the result of your testing.
How To Add Captcha
Contact Form 7 plugin has captcha feature included. Please, follow the steps below to add captcha to your website:
To get started with reCAPTCHA, you need to have a Google account and to register your site for API keys:
- Log into your Google+ account and open reCapture admin panel:
- Register your website: enter your Domain name and Label. Click Register button:
- Once you did that, you will get a site key and a secret key.
- Log into 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 changes:
Customizing and setting up a contact form using Contact Form 7 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.
Saud is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform. Saud is responsible for creating buzz, spread knowledge, and educate the people about WordPress in the Community around the globe. In his free time, he likes to play cricket and learn new things on the Internet. You can email him at email@example.com
Start Growing with Cloudways Today.
Our Clients Love us because we never compromise on these