A Definitive Guide to Using Contact Form 7 On WordPress

by Saud Razzak  June 23, 2016

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.

Contact Form 7 in WordPress

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.
Install Plugin

Install Contact Form 7

Displaying a Form:

To display a form, open Contact >> Contact Form at your WordPress admin panel. You can manage multiple forms from this location.

Contact Forms

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.

contact form 1

Once done, your contact page would look like:
Publish
Live view,

Contact Us Preview

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

Click Add New

Step 2 : Make a New Contact Form

To make a new contact form, click Add New. The following page will appear.
New Contact Form

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.
Forum Tag Generator

Forum HTML

Next move to the body of the email. Click the Mail tab and you could exactly format the layout of the email.

Mail

The last tab to edit is the >Messages tab where you could customize the messages in several conditions.

Messages

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.

Contact Form View

In this form, Once the user clicks the SEND button, the “thank you” message would be displayed.

Screenshot_2

You will receive an email (refer the below screenshot) as the result of your testing.
Email

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:

  1. Log into your Google+ account and open reCapture admin panel:
  2. Register your website: enter your Domain name and Label. Click Register button:

get-captcha

  1. Once you did that, you will get a site key and a secret key.
  1. Log into your WordPress admin panel.
    1. Navigate to Contact > Integration page.

integration

Find reCAPTCHA section and click Configure Keys button.

recaptcha

Enter your site key and secret key into the fields you see:

register-key

security-key

secret-key

Open your contact form under the Contact > Contact Forms section in your dashboard:

Add the shortcode below to the contact form field: [recaptcha]

pase-shortcode

Click Save and refresh your site to see changes:

captcha

Conclusion:

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.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Saud Razzak

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 m.saud@cloudways.com

Stay Connected:

You Might Also Like...