This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

WordPress 5.0 is out. Test all the great new features before upgrading your Live website. Read How!

How to Setup Contact Form 7 on WordPress Website (For Beginners)

Updated on  23rd June

5 Min Read
WordPress contact form 7
Reading Time: 5 minutes

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. Here are some of the outstanding benefits of the plugin:

Pros of WordPress Contact Form 7 Plugin

  1. Customization options to fit your unique needs
  2. Simple implementation and integration process
  3. Help is just a few clicks away

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.

Install contact form 7 plugin

Install WordPress Contact Form 7

Displaying a Form

To display a form, open Contact → Contact Forms at your WordPress dashboard. You can manage multiple forms from this location.

WordPress contact form

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.

contact form 1

Once done, your contact page would look like:
Contact Form Publish
Live View

Contact Us Form Preview

You can also customize this form to suit your requirements.

Customizing 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

Customizing WordPress Contact Form 7

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

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.

Contact Form Fields

Contact Form 7 Customization

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

Email configuration on contact form 7

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

Form Messages

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.

Contact Form View For Additional Fields

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 to the below screenshot) as the result of your testing.
Email

How to Add reCAPTCHA?

Contact Form 7 plugin has 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:

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

Google recaptcha

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

recaptcha integration

Find reCAPTCHA section and click Configure Keys button.

recaptcha setup

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]

recaptcha shortcode

Click Save and refresh your site to see the changes:

captcha

Conclusion:

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.

Share your opinion in the comment section. COMMENT NOW

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

Be the first to check out WordPress 5.0

Use our Staging feature before upgrading your website to WordPress 5.0.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.