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.

Calculate Your Savings on Cloudways and Compare With Kinsta, WP Engine and Flywheel. Calculate Now→

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

Updated on December 8, 2021

5 Min Read
wordpress contact form 7

Contact Form 7 is even used with the best WordPress themes with integrated contact forms, as those forms do not offer customization or high-level options. 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, which easily makes it one of the best plugins for WordPress.

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.

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.

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

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.

Why Speed is Crucial for SEO & UX?

These expert tips will show you how to improve the speed of your WordPress Websites.

Thank You

Your Ebook is on its Way to Your Inbox.

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

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

Share This Article

Customer Review at

“Beautifully optimized hosting for WordPress and Magento”

Arda Burak [Agency Owner]

Mansoor Ahmed Khan

Passionate about technology, entrepreneurship, and marketing, Mansoor Ahmed Khan is in computing since he knows how to type on a keyboard. His daily life is rocked by his family, projects, and his screen. Probably in this order, he likes to be convinced at least. You can reach out to him at [email protected]

×

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

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Unleash The Cloud.
Not Budgets.

For 4 Months +
Up To 30 Free Migrations

Cyber Week

SAVINGS
Time Left In Offer
  • 0

    Days

  • 0

    Hours

  • 0

    Minutes

  • 0

    Seconds

40% OFF

On All Plans

GET THE DEAL NOW