In 2022, staying in touch with your audience is very important. Establishing an email list with a service like MailChimp helps you deliver content straight to your subscribers.

Electronic mail lists are great, but what if a reader or potential customer wants to arrive contact with you directly? That's where contact forms come up in! In this article, we'll cover how to configure the popular Contact Form vii plugin for your WordPress site.

How to Install Contact Form 7

Contact Class 7 has been effectually since 2009, and it's garnered over five one thousand thousand downloads in the past decade. Contact Course 7 can exist installed directly from the WordPress plugin repository. If you search for "contact grade 7", you'll exist able to find the plugin along with a variety of add-ons.

Install the Contact Form 7 plugin from the WordPress plugin repository.
Install the Contact Form vii plugin from the WordPress plugin repository.

After the plugin is installed, you'll see a card particular labeled "Contact" in the sidebar of your WordPress dashboard. This is where all of Contact Class 7's settings tin exist configured.

Customize Contact Form 7 settings.
Customize Contact Form seven settings.

The Pros and Cons of Having a Contact Form

Earlier we swoop into how to configure Contact Course 7 for your WordPress site, let'due south quickly go through a few of the pros and cons of adding a contact class to your site.

Pros of Having a Contact Form

  1. A contact form allows readers, customers, and fans to contact you lot directly. Depending on the purpose of your WordPress site, the ability for a visitor to communicate with you tin be very important. For example, non adding a contact class to an ecommerce site can be financially damaging to your business concern because interested parties won't be able to reach out to you if they take questions about your production.
  2. A contact grade adds legitimacy to your WordPress site or business. Many people see the presence of a contact form equally a trust factor of sorts. The thought of beingness able to attain out to you, the site owner, makes your content more trustworthy.

Cons of Having a Contact Class

  1. Spam can exist an upshot for public forms like comment boxes and contact forms. Luckily with Contact Form 7, you can filter out spam with reCAPTCHA. You can fifty-fifty configure a Cloudflare page dominion to protect yourself even further. We'll go into the nitty-gritty how to set up spam protection in Contact Form seven afterwards on in the commodity.
  2. Afterwards adding a contact form to your site, you'll likely need to devote time to responding to messages. This isn't necessarily a bad thing depending on how you look at information technology. Some people dread the procedure of responding to emails, while others genuinely relish it. From our feel, the relationships that manifest from having a contact form on your site typically outweigh the cost of moderation, so nosotros recommend powering through it!

An Overview of Contact Form 7 Settings

Creating a contact form with the Contact Form 7 plugin is super piece of cake. To go started, click Contact > Contact Forms in your WordPress sidebar. On this folio, you can view all of your contact forms forth with their associated metadata details.

Contact form in Contact Form 7.
Contact class in Contact Form 7.

When Contact Form vii is commencement installed, it creates an example form likewise. Before we get into how to create a custom contact form, let'south kickoff have a look at the instance form to get a better thought of how Contact Course 7 works. Click on Contact Class 1 to view the form settings.

Configure your WordPress contact form.
Configure your WordPress contact class.

The "Edit Contact Grade" page is split into four sections.

  1. Form – Customize your HTML contact form template with a multifariousness of field options similar "text", "email", "checkboxes", etc. You lot can also write custom HTML in the form customization box.
  2. Mail – Customize the email template and settings used for notification emails.
  3. Messages – Customize messages that are displayed later on specific deportment. For example, you can set a unique message to brandish later someone submits a contact class.
  4. Additional Settings – Specify snippets to enable additional features similar subscribers-only way, demo mode, and mail service skipping.

Now let's take a closer look at each department and create a custom contact form!

You know what they say- keep your friends close, and your audience closer... or something similar that. 😉 Stay connected to site visitors thanks to this popular plugin 👇 Click to Tweet

How to Create a WordPress Contact Form

To create a new contact course, click on Add New side by side to "Contact Forms".

Create a new contact form in Contact Form 7.
Create a new contact course in Contact Grade 7.

Requite the new contact form a proper name, and click "Salvage".

Save your new WordPress contact form.
Save your new WordPress contact class.

In the "Form" department, add together the necessary HTML for your contact class. You can use the various preset buttons to generate shortcodes for popular form tags. To brand things easier, check out the descriptions below for the preset form tags that come up with Contact Form 7.

  • Text – Create a grade tag for a single line of text. Text fields are useful for first names, last names, and other text-based snippets that don't require multiple lines.
  • Email – Create a form tag for an electronic mail accost.
  • URL – Create a form tag for a URL.
  • Tel – Create a form tag for a telephone number.
  • Number – Create a form tag for a number. Unlike the "text" or "text area" input fields, "number" fields just let numeric digits.
  • Appointment – Create a form tag for a date.
  • Text Area – Create a form tag for a text area. Unlike the normal "text" input field, a "text area" field allows for multiple lines of text. They're platonic for inputting the body of the message.
  • Drib-downwards Menu – Create a class tag for a drop-down carte du jour.
  • Checkboxes – Create a form tag for checkboxes.
  • Radio Buttons – Create a form tag for radio buttons.
  • Acceptance – Create a form tag for an acceptance checkbox.
  • Quiz – Create a class tag for a question-answer pair.
  • File – Create a form tag for a file upload field.
  • Submit – Create a form tag for a submit push.

Now let's go ahead and customize a contact grade. For the sake of completeness, we'll create a contact class that uses all the preset form tags in Contact Form 7.

The "Text" Form Tag

When you lot click on a preset form tag in Contact Form 7, you'll run across a popup carte du jour like the one below. In this menu, you tin can configure the form tag'south settings. At the lesser, you'll see a shortcode that tin be embedded into your contact form template.

A
A "text" form tag in Contact Form vii.

For the "text" class tag, we're using the settings beneath to create an input field for a proper noun.

  • Field Type – Required Field
  • Proper noun – text-711 (auto-generated)
  • Default Value – Your Name (used as default placeholder text)
  • Akismet – Unchecked
  • ID Aspect (CSS) – cf7-your-proper noun
  • Course Attribute (CSS) – cf7-your-name

These settings generate the shortcode beneath.

          [text* text-711 id:cf7-your-name grade:cf7-your-proper noun placeholder "Your Name"]        

For now, merely click the Insert Tag button to add the form tag to the contact class template. We'll add more than HTML tags to construction the course after on.

The "Electronic mail" Form Tag

Next, nosotros'll create an e-mail form tag which will allow our contact class to collect email addresses.

An
An "email" form tag in Contact Form vii.

For the "email" class tag, we've configured the settings below.

  • Field Blazon – Required Field
  • Name – email-632 (auto-generated)
  • Default Value – Your Email
  • Akismet – Unchecked.
  • ID Attribute (CSS) – your-email
  • Class Aspect (CSS) – your-e-mail

These settings generate the shortcode beneath.

          [email* email-632 id:email class:e-mail placeholder "Your E-mail"]        

The "URL" Form Tag

In some cases, you may desire to have an input field on your contact grade for collecting someone'due south website. While you can technically use a normal "text" grade tag for this in Contact Grade 7, we recommend using the "URL" class tag instead. The "URL" grade tag volition generate an input field that validates URLs to ensure they're formatted correctly.

A
A "URL" course tag in Contact Form 7.

For the "url" form tag, we've configured the settings below.

  • Proper noun – url-601 (auto-generated)
  • Default Value – Your Website
  • Akismet – Unchecked.
  • ID Attribute (CSS) – cf7-your-website
  • Class Attribute (CSS) – cf7-your-website

These settings generate the shortcode below.

          [url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]        

The "Tel" Form Tag

Similar to URLs, you tin can besides use a standard "text" grade tag to collect phone numbers. Nonetheless, it's ameliorate to utilise the "tel" grade tag instead to ensure the phone number is valid.

A
A "tel" form tag in Contact Course 7.

For the "tel" course tag, we've configured the settings below.

  • Proper name – tel-842 (auto-generated)
  • Default Value – Your Phone Number
  • ID Aspect (CSS) – cf7-your-phone-number
  • Class Attribute (CSS) – cf7-your-phone-number

These settings generate the shortcode below.

          [url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]        

The "Date" Class Tag

Contact Grade 7's "engagement" form tag lets y'all generate a calendar-style date picker. This "engagement" input field is useful for specifying engagement dates in a contact form.

A
A "date" course tag in Contact Form 7.

For the "appointment" form tag, we've configured the settings below.

  • Name – date-389 (auto-generated)
  • Default Value – Your Engagement Date
  • Range – Our custom engagement range.
  • ID Attribute (CSS) – cf7-appointment-date
  • Grade Attribute (CSS) – cf7-engagement-date

These settings generate the shortcode below.

          [appointment* engagement-389 min:2020-09-xv max:2020-10-24 id:cf7-appointment-date grade:cf7-appointment-appointment placeholder "Your Engagement Date"]        

The "Textarea" Course Tag

The "textarea" form tag lets you create a multi-line text box that lets visitors submit longer letters. Textareas are most useful for capturing the body of a message.

A
A "textarea" form tag in Contact Form 7.

For the "textarea" grade tag, we've configured the settings below.

  • Name – textarea-795 (automobile-generated)
  • Default Value – Your Bulletin
  • ID Attribute (CSS) – cf7-your-message
  • Class Aspect (CSS) – cf7-your-message

These settings generate the shortcode below.

          [textarea* textarea-795 id:cf7-your-message class:cf7-your-bulletin placeholder "Your Message"]        

The "Drop-Downwards Menu" Form Tag

Contact Class 7'due south "drib-down menu" form tag lets you lot create a drib-down bill of fare with multiple options. Drop-downwardly menus are useful for situations where you desire a visitor to select a specific option to submit with the form. For example, if you run a WordPress maintenance company, yous tin configure a drop-down menu that lets a visitor choose betwixt the services you offer.

A
A "drop-down menu" course tag in Contact Form 7.

For the "drop-downward menu" form tag, nosotros've configured the settings below.

  • Proper noun – menu-24 (auto-generated)
  • Options – Pick 1, Option 2, Option 3, Pick 4
  • Let Multiple Selections – Checked
  • Insert a Bare Item as the First Selection – Checked
  • ID Attribute – cf7-drop-down-menu
  • Class Attribute – cf7-drop-downward-menu

These settings generate the shortcode below.

          [checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Choice iii"]        

The "Checkbox" Form Tag

The checkbox form tag lets you create HTML checkboxes. Similar to drop-downwardly menus, checkboxes can likewise be used to select predefined options. Depending on the nature of your contact form, checkboxes may piece of work better than drib-downwards menus. For example, if y'all take a modest number of options to choose from, a checkbox reduces the number of clicks required to make a choice. On the other mitt, if your contact form has a lot of options, a drop-down menu may work better considering information technology takes up less vertical space.

A
A "checkbox" form tag in Contact Course 7.

For the "checkbox" form tag, we've configured the settings below.

  • Name – checkbox-948 (auto-generated)
  • Options – Selection ane, Selection 2, Selection 3
  • Wrap Each Item with Label Element – Checked
  • ID Attribute – cf7-checkbox
  • Grade Attribute – cf7-checkbox

These settings generate the shortcode below.

          [checkbox* checkbox-948 id:cf7-checkbox course:cf7-checkbox use_label_element "Choice 1" "Option 2" "Option iii"]        

The "Radio Buttons" Form Tag

The "radio buttons" grade tag lets you create radio buttons with multiple options. Unlike checkboxes and drib-down menus, radio buttons only allow you to select a single option.

A
A "radio buttons" class tag in Contact Form 7.

For the "radio buttons" form tag, nosotros've configured the settings below.

  • Proper noun – radio-708 (auto-generated)
  • Options – Pick 1, Option ii, Option 3
  • Wrap Each Item with Label Element – Checked
  • ID Attribute – cf7-radio
  • Course Attribute – cf7-radio

These settings generate the shortcode below.

          [radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Selection 1" "Pick 2" "Pick 3"]        

The "Acceptance" Form Tag

Contact Form vii'south "acceptance" form tag can exist used to generate a single checkbox for the purpose of accepting terms and conditions. With the credence form tag settings, you can specify a message to brandish.

An
An "acceptance" grade tag in Contact Form 7.

For the "acceptance" grade tag, we've configured the settings below.

  • Proper name – credence-545 (auto-generated)
  • Status – Check this box to accept the terms.
  • ID Aspect – cf7-acceptance
  • Course Attribute – cf7-credence

These settings generate the shortcode beneath.

          [acceptance credence-545 id:cf7-acceptance class:cf7-acceptance] Bank check this box to accept the terms. [/credence]        

The "Quiz" Form Tag

The "quiz" form tag can be used to create bones question and answer quizzes in your contact form. To create a quiz question, use the following format to split the question and respond – Question|Answer. In the screenshot below, our question is "What year was WordPress released?", and the answer (separated by a "|" character) is 2003.

A
A "quiz" course tag in Contact Form 7.

For the "quiz" form tag, we've configured the settings below.

Subscribe Now

  • Name – quiz-461 (car-generated)
  • Condition – Check this box to take the terms.
  • ID Aspect – cf7-quiz
  • Class Attribute – cf7-quiz

These settings generate the shortcode below.

          [quiz quiz-461 id:cf7-quiz form:cf7-quiz "What year was WordPress released?|2003"]        

The "File" Form Tag

Contact Form 7's "file" course tag lets y'all add file upload functionality to a contact form. This is useful for situations where you lot want a visitor to be able to upload an prototype or PDF file to submit with the form. For case, if y'all run a photography blog with photo galleries that posts guest submissions, y'all can add file upload functionality for people to upload images.

In the form tag settings, yous tin specify a diversity of settings to secure your form. We recommend always setting a file size limit to forbid malicious users from uploading huge files. Similarly, specifying "acceptable file types" helps you lock down your grade to file formats that you want and expect. With the photography web log instance in mind, you may desire to limit file size to 1 MB (1024 KB) and adequate file types to known image formats like JPG and PNG only.

A
A "file" form tag in Contact Form vii.

For the "file" grade tag, nosotros've configured the settings beneath.

  • Proper name – file-658 (motorcar-generated)
  • File Size Limit – 1024kb
  • Adequate File Types – jpg|png|gif
  • ID Attribute – cf7-file
  • Course Aspect – cf7-file

These settings generate the shortcode below.

          [file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]        

The "Submit" Form Tag

Last but non least is Contact Grade vii's "submit" form tag. Equally y'all may have guessed, this form tag lets you generate a submit push for a contact course.

A
A "submit" form tag in Contact Form 7.

For the "submit" class tag, nosotros've configured the settings below.

  • Characterization – Submit
  • ID Attribute – cf7-submit
  • Class Attribute – cf7-submit

These settings generate the shortcode beneath.

          [submit id:cf7-submit class:cf7-submit "Submit"]        

How to Construction a Contact Form with Course Tags

Now that we have all our class tags set up, it'due south time to create the contact course. At this bespeak, your contact grade settings should look like the screenshot below. Take note of all the grade tags we created higher up. With the form tags in place, you can use the [contact-grade-7] shortcode to embed the class into a WordPress post or page.

Embed a contact form with the contact-form-7 shortcode.
Embed a contact form with the contact-course-seven shortcode.

In the WordPress editor, paste the shortcode into an empty cake.

Add the Contact Form 7 shortcode to a post or page.
Add together the Contact Grade 7 shortcode to a mail or page.

If yous're using the WordPress Classic Editor, y'all can paste the shortcode anywhere in the content editor.

Use Contact Form 7 with the WordPress Classic Editor.
Utilise Contact Form 7 with the WordPress Classic Editor.

You should now be able to encounter the contact grade on the folio where you added the Contact Form seven shortcode. Here's what our contact form with the settings mentioned in a higher place looks similar. As y'all can come across, Contact Course 7 automatically converts course tags into valid HTML that renders with the default CSS styles included with your WordPress theme.

A contact form created with Contact Form 7.
A contact form created with Contact Grade 7.

Our contact form in its electric current country is a good starting point, but it's defective one key feature. Course tags like "text", "email", and "URL" back up placeholders, but other elements like "checkboxes" and "radio buttons" do not. Without proper labels, the checkbox and radio buttons won't be very useful for visitors considering they don't have whatever context. Luckily, calculation labels in Contact Form seven is very easy!

How to Add together Grade Tag Labels in Contact Form 7

In that location are 2 means to add labels to Contact Course seven grade tags. For the class tags below, you can simply wrap the form tag with a tag.

  • Text
  • E-mail
  • URL
  • Tel
  • Number
  • Date
  • Text Area
  • Acceptance
  • Quiz
  • File

Take a look at the example "text" form tag below.

          [text* text-711 id:cf7-your-name course:cf7-your-name placeholder "Your Name"]        

To add a label to this grade tag, we can replace the form tag with the snippet below. Notice the additional instance of "Your Name" right after the opening <label> tag.

          <label> Your Proper name [text* text-711 id:cf7-your-proper name class:cf7-your-proper noun placeholder "Your Proper noun"] </characterization>        

Here's what this change looks similar on our contact form. In this case, the newly created characterization serves the same purpose as the placeholder. However, if we didn't want to specify a placeholder inside the course tag, then the label would aid identify the purpose of a specific input box.

Add a label to a form tag in Contact Form 7.
Add together a label to a form tag in Contact Form 7.

For form tags that render multiple form controls like checkboxes, radio buttons, and dropdown menus, wrapping the form tag within a tag results in an fault. This happens because a <characterization> tag is only supposed to be used with a unmarried grade command. The nature of checkboxes, radio buttons, and dropdown carte du jour options involve multiple form controls, so they are incompatible with the default labeling solution.

For checkboxes, radio buttons, and dropdown menus, y'all take to add a use_label_element parameter inside the shortcode. Take a wait at the checkbox form tag example below where use_label_element is in bold.

          [checkbox* checkbox-948 id:cf7-checkbox course:cf7-checkbox            use_label_element            "Pick 1" "Option 2" "Choice iii"]        

One time the use_label_element parameter has been added, you can add a label straight higher up the class tag in the contact form editor.

Add a label to checkboxes, radio buttons, and dropdown menus in Contact Form 7.
Add together a label to checkboxes, radio buttons, and dropdown menus in Contact Course 7.

For the sake of completeness, we've added labels to all the form tags in our contact course. You probably wouldn't need to do this for a production site because some grade tags already include placeholders. Regardless, we wanted to demonstrate how labels piece of work.

Here's what our contact class looks like:

A contact form with labels.
A contact form with labels.

Configuring Mail Settings in Contact Form 7

At present that we've configured the structure of our contact class, it'south fourth dimension to take a look at the email commitment settings in Contact Class 7. While the default mail delivery settings should work merely fine for most sites, it'due south nonetheless important to understand the diverse settings in case your site or employ case requires a special configuration.

To access the mail service commitment settings, go to the contact form editor and select the "Mail" tab.

Mail delivery settings in Contact Form 7.
Mail commitment settings in Contact Form vii.

Contact Form 7's mail commitment settings let you customize the templates and parameters that are used to generate and send a notification to you after someone makes a form submission. If you use incorrect settings, it's possible that you won't be notified of form submissions. Thus, it'south of import to test the class delivery later on creating a contact form and irresolute settings.

Contact Form 7 lets you configure the following mail delivery settings.

  • To – the e-mail accost to transport a notification to.
  • From – the electronic mail address to send a notification from.
  • Discipline – the field of study of the notification email.
  • Additional Headers – specify additional email headers like "reply-to".
  • Message Trunk – the body of the notification email.
  • File Attachments – specify whatsoever attachments to include with the notification email.

Now, let's become through each setting to get a better understanding of how they can impact mail delivery in Contact Course seven.

The "To" Field

Be sure to specify a real e-mail address for the "To" setting. By default, Contact Course 7 will assign the email address associated with your WordPress user account to the "To" setting. If your WordPress email address is not valid, be sure to update it in your profile settings and change the electronic mail address in Contact Course 7 besides.

The "From" Field

The "From" setting should apply the following format –Your Proper name. For our contact form mail settings, we're using kinstalife <[e-mail protected]>.

Past default, Contact 7 will fill up in this field with [email protected] . You'll desire to make sure that this email address is a valid one because some WordPress hosts cake approachable email to invalid addresses. There are multiple ways to brand this email address valid. Y'all tin either set up up a dedicated email business relationship for [email protected] or you tin enable grab-all functionality at your electronic mail service provider. If you're unable to ready this email address, nosotros recommend changing information technology to a valid email accost to avoid deliverability issues.

The "Subject" Field

The "Subject area" setting can be used to specify a bailiwick line for notification mails. By default, Contact Form seven sets the subject as Site Name "[your-subject]" – the subject proper name in Contact Grade 7's default form template.

If you don't have a grade tag named "[your-subject]" in your course, be sure to change it to something else. For instance, if y'all just have a course tag to capture a visitor's name (e.grand. [your-name]), y'all could modify the subject line to You've Received a Message from [your-name].

The "Additional Headers" Field

Nether "Additional Headers", you can specify email headers like reply-to, CC, and BCC. By default, Contact Form vii adds the following header – Answer-To: [your-e-mail]. This header lets you reply to the email accost specified in a submitted contact course.

The default respond-to header is fine if you lot're using Contact Form 7's default e-mail form tag. If you're not, be sure to change it to match the name of your email class tag. For our contact form, the name of the e-mail class tag is "email-632", so the respond-to course tag would have to be changed to Reply-To: [email-632].

The "Bulletin Body"

Next upward is the "Message Torso", which determines the body content of the notification email. Contact Form 7'due south default template uses [your-name], [your-electronic mail], [your-subject], and [your-bulletin] form tags, and looks like this:

          From: [your-proper name]  Subject: [your-subject] Message Body: [your-message] --  This e-mail was sent from a contact form on kinstalife (http://kinstalife.com)        

Be sure to modify these form tags if you're non using them in your contact form template. Since the contact form we created collects a lot of data, we can gear up the bulletin body with additional form tags like so:

          Howdy Brian, you've received a message from [text-711] ([e-mail-632]). Website: [url-601] Phone Number: Tel-842 Date Date: date-389 Message: textarea-795        
Customize the message body for Contact Form 7 notification emails.
Customize the message body for Contact Form 7 notification emails.

Contact Form 7 Mail Settings – File Attachments

If your contact form involves uploading a file, you can include the file with the notification email. In our contact form, nosotros take a file upload form tag named "[file-658]". Thus, we can add this form tag under "File Attachments" to ensure the file volition be included with the email notification.

Include file attachments in Contact Form 7 notification emails.
Include file attachments in Contact Form 7 notification emails.

Contact Form 7 Postal service Commitment Problems

If you observe that Contact Course vii is not sending emails, at that place are a few things you can cheque before reaching out to a WordPress developer for aid.

  1. Check if your server is sending other types of emails. To test this, you can trigger another email delivery activity by making a test comment on a blog post or submitting a password reset request on your WordPress login page. If you lot receive an email after performing one of these actions, so the issue is probable related to Contact Form seven's configuration. If you do non receive emails, reach out to your host's back up team and let them know you lot're having an issue with email delivery.
  2. Make sure the "To" and "From" fields in your contact form'south mail service commitment settings are configured correctly. For Contact Course 7 to work properly, both of these fields should be populated with real email addresses.

Contact Course seven Form Submission Messages

Contact Grade 7 lets you customize a variety of form submission letters. These letters display later on a sure condition is met. For case, if a visitor forgets to fill in a required field, Contact Form vii will display a "The field is required" bulletin. For most employ cases, the default messages should work just fine. All the same, if you desire to customize the messages, yous can do so by clicking on the "Messages" tab in the contact form editor.

Customize Contact Form 7 situational messages.
Customize Contact Form 7 situational messages.

How to Secure Your Contact Form

As automatic bots have gotten smarter and more pervasive over the years, spam has go a major issue for contact forms. Since contact forms are typically open up to the public Cyberspace, it's fairly like shooting fish in a barrel for web scrapers to detect them and fire off spam letters to your email inbox. Fortunately, there are various means to ward off spammers and protect your contact course.

Secure Your Contact Form 7 with reCAPTCHA

If y'all've ever submitted a form on the Net, y'all're probably already familiar with reCAPTCHA, a technology developed by Google for identifying automated bot beliefs. Older versions of reCAPTCHA (V2) required users to pass a puzzle or challenge.

The latest version of reCAPTCHA (V3) does not crave any interaction from users. Instead, information technology transparently monitors user activeness in the groundwork to distinguish betwixt human and bot visitors. Since Contact Grade vii supports reCAPTCHA V3, we recommend using this latest version because information technology provides a better user experience for visitors.

To prepare reCAPTCHA, you'll first need to generate an API central. To practice this, log in to your Google account and become to the reCAPTCHA setup page.

Register a new site for reCAPTCHA integration.
Annals a new site for reCAPTCHA integration.

Become through the registration form to create your reCAPTCHA.

  • Characterization – Specify a label of your choosing.
  • reCAPTCHA Blazon – Contact Form vii supports reCAPTCHA v3, and then select that version.
  • Domains – If your site uses a root domain, add the non-www and world wide web version of your domain. If your site uses a subdomain, just add the subdomain.
  • Owners – The email address associated with your Google account will exist added as an owner by default. Experience free to add additional email addresses if needed.

Afterward yous've filled in all the options, click Submit. Yous'll and so be presented with your site-specific "site cardinal" and "secret key". Be sure to go along these keys somewhere safe considering you'll need to add together them to Contact Form 7.

Google reCAPTCHA site and secret keys.
Google reCAPTCHA site and secret keys.

Next, click on "Contact" in your WordPress dashboard sidebar, and click Integration. Select the reCAPTCHA option, and paste your site cardinal and secret primal into their corresponding fields. Finally, click Save Changes to finalize the reCAPTCHA integration.

Configure reCAPTCHA in Contact Form 7.
Configure reCAPTCHA in Contact Course 7.

Later on configuring reCAPTCHA in Contact Course 7, you lot'll see a reCAPTCHA logo in the lower right corner of your contact form page. This ways reCAPTCHA is active and protecting your contact form from spam submissions.

WordPress contact form protected by reCAPTCHA V3.
WordPress contact form protected by reCAPTCHA V3.

Secure Your Contact Form with Cloudflare (Optional)

If you use Cloudflare to protect your site, you can set up a special page dominion for your contact form folio to reduce spam contact course submissions.

Protect your contact form with Cloudflare.
Protect your contact form with Cloudflare.

To add together a page rule, click on the "Page Rules" tab, and employ the following settings to assistance secure your contact page.

  • If the URL Matches – *your-domain.com/your-contact-page/*
  • Browser Integrity Check – On
  • Security Level – High

Cloudflare'due south "Browser Integrity Check" feature analyzes HTTP headers. If it detects an HTTP header that'south commonly used by automated bot and spammers, it denies the request to your site. Setting the "Security Level" to high will challenge all visitors that exhibited malicious behavior within the by two weeks.

By limiting these settings to your contact page with the URL match rule, other pages on your site will be unaffected by these folio rules. We recommend this configuration because normal "read-only" pages on your site exercise non typically require a heightened security level setting.

Don't leave your audience on read. 👀 Make it direct contact with your readers and potential customers through the Contact Course vii plugin ⬇️ Click to Tweet

Summary

Contact Form 7 is the virtually popular contact form plugin and for expert reason! It can be used to create everything from basic contact forms, to question-answer quizzes, to complex forms that back up file attachments and dropdown menus.

All-time of all, it comes with built-in reCAPTCHA support to aid secure your contact form against spammers.

Do you utilize Contact Course 7 on your WordPress site? If not, what'south your preferred choice? Permit u.s. know in the comments section below!


Save time, costs and maximize site performance with:

  • Instant assistance from WordPress hosting experts, 24/vii.
  • Cloudflare Enterprise integration.
  • Global audience reach with 29 data centers worldwide.
  • Optimization with our built-in Application Performance Monitoring.

All of that and much more, in one programme with no long-term contracts, assisted migrations, and a 30-day-money-back-guarantee. Check out our plans or talk to sales to find the plan that's right for you.