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

Email lists are swell, merely what if a reader or potential client wants to get in contact with you directly? That's where contact forms come in! In this article, nosotros'll cover how to configure the popular Contact Form 7 plugin for your WordPress site.

How to Install Contact Form 7

Contact Form seven has been around since 2009, and it's garnered over 5 million downloads in the past decade. Contact Form vii can be installed directly from the WordPress plugin repository. If you search for "contact form seven", you'll be able to find the plugin along with a diversity of add-ons.

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

After the plugin is installed, yous'll run across a carte particular labeled "Contact" in the sidebar of your WordPress dashboard. This is where all of Contact Form 7's settings can exist configured.

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

The Pros and Cons of Having a Contact Class

Before nosotros dive into how to configure Contact Course 7 for your WordPress site, let'due south apace go through a few of the pros and cons of calculation a contact form to your site.

Pros of Having a Contact Grade

  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 lot can exist very important. For instance, non calculation a contact form to an ecommerce site can be financially damaging to your concern because interested parties won't be able to reach out to you if they accept questions about your production.
  2. A contact form adds legitimacy to your WordPress site or business organization. Many people see the presence of a contact form as a trust factor of sorts. The thought of being able to reach out to y'all, the site owner, makes your content more trustworthy.

Cons of Having a Contact Course

  1. Spam tin can be an event for public forms like comment boxes and contact forms. Luckily with Contact Course 7, y'all can filter out spam with reCAPTCHA. You can fifty-fifty configure a Cloudflare folio dominion to protect yourself even further. We'll get into the nitty-gritty how to set up spam protection in Contact Class seven after on in the article.
  2. After adding a contact form to your site, you'll probable need to devote time to responding to messages. This isn't necessarily a bad affair depending on how you lot await at information technology. Some people dread the process of responding to emails, while others genuinely enjoy 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 Grade 7 Settings

Creating a contact form with the Contact Form 7 plugin is super easy. To get started, click Contact > Contact Forms in your WordPress sidebar. On this page, you can view all of your contact forms along with their associated metadata details.

Contact form in Contact Form 7.
Contact course in Contact Form 7.

When Contact Course vii is first installed, it creates an case class likewise. Before we get into how to create a custom contact form, permit's first take a look at the example grade to get a amend idea of how Contact Form 7 works. Click on Contact Course 1 to view the form settings.

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

The "Edit Contact Course" page is split up into four sections.

  1. Course – Customize your HTML contact form template with a variety of field options similar "text", "email", "checkboxes", etc. You lot can as well write custom HTML in the form customization box.
  2. Mail – Customize the e-mail template and settings used for notification emails.
  3. Letters – Customize messages that are displayed later specific deportment. For case, you lot can prepare a unique message to display after someone submits a contact form.
  4. Additional Settings – Specify snippets to enable boosted features like subscribers-but fashion, demo way, and mail skipping.

At present permit's accept 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 like that. 😉 Stay connected to site visitors cheers to this pop plugin 👇 Click to Tweet

How to Create a WordPress Contact Form

To create a new contact form, click on Add New adjacent to "Contact Forms".

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

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

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

In the "Form" section, add the necessary HTML for your contact class. Y'all can apply the various preset buttons to generate shortcodes for popular form tags. To make things easier, bank check out the descriptions below for the preset form tags that come with Contact Form 7.

  • Text – Create a form tag for a unmarried line of text. Text fields are useful for first names, terminal names, and other text-based snippets that don't crave multiple lines.
  • Email – Create a form tag for an electronic mail address.
  • URL – Create a form tag for a URL.
  • Tel – Create a grade tag for a phone number.
  • Number – Create a form tag for a number. Unlike the "text" or "text area" input fields, "number" fields only allow numeric digits.
  • Date – 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 expanse" field allows for multiple lines of text. They're platonic for inputting the body of the message.
  • Drop-down Menu – Create a form tag for a drib-down card.
  • 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 form 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 button.

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

The "Text" Form Tag

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

A
A "text" grade tag in Contact Form 7.

For the "text" form tag, we're using the settings below to create an input field for a name.

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

These settings generate the shortcode below.

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

For now, simply click the Insert Tag push to add the class tag to the contact form template. We'll add more HTML tags to construction the form later on.

The "E-mail" Form Tag

Side by side, we'll create an email course tag which will let our contact grade to collect e-mail addresses.

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

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

  • Field Type – Required Field
  • Proper name – email-632 (auto-generated)
  • Default Value – Your Email
  • Akismet – Unchecked.
  • ID Attribute (CSS) – your-electronic mail
  • Form Attribute (CSS) – your-email

These settings generate the shortcode below.

          [e-mail* e-mail-632 id:email form:electronic mail placeholder "Your Email"]        

The "URL" Form Tag

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

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

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

  • Proper noun – url-601 (motorcar-generated)
  • Default Value – Your Website
  • Akismet – Unchecked.
  • ID Attribute (CSS) – cf7-your-website
  • Course 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, y'all can also use a standard "text" grade tag to collect phone numbers. However, information technology'southward better to use the "tel" class tag instead to ensure the phone number is valid.

A
A "tel" grade tag in Contact Form 7.

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

  • Name – tel-842 (motorcar-generated)
  • Default Value – Your Phone Number
  • ID Attribute (CSS) – cf7-your-phone-number
  • Class Attribute (CSS) – cf7-your-telephone-number

These settings generate the shortcode beneath.

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

The "Date" Form Tag

Contact Form 7'south "date" form tag lets you generate a agenda-style date picker. This "engagement" input field is useful for specifying appointment dates in a contact grade.

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

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

  • Proper name – date-389 (automobile-generated)
  • Default Value – Your Engagement Date
  • Range – Our custom date range.
  • ID Attribute (CSS) – cf7-appointment-appointment
  • Class Attribute (CSS) – cf7-appointment-date

These settings generate the shortcode beneath.

          [appointment* engagement-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-date-date 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 about useful for capturing the trunk of a message.

A
A "textarea" form tag in Contact Course vii.

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

  • Proper name – textarea-795 (auto-generated)
  • Default Value – Your Bulletin
  • ID Attribute (CSS) – cf7-your-bulletin
  • Class Aspect (CSS) – cf7-your-message

These settings generate the shortcode below.

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

The "Drop-Downwardly Menu" Form Tag

Contact Form 7's "drib-downwardly card" class tag lets you create a drib-downward carte with multiple options. Drop-down menus are useful for situations where yous desire a visitor to select a specific option to submit with the grade. For example, if you lot run a WordPress maintenance visitor, y'all tin can configure a drib-downwards menu that lets a visitor choose between the services you lot offer.

A
A "drop-downwardly menu" form tag in Contact Form 7.

For the "drop-down menu" class tag, we've configured the settings beneath.

  • Name – menu-24 (auto-generated)
  • Options – Option i, Option ii, Option 3, Choice 4
  • Allow Multiple Selections – Checked
  • Insert a Blank Detail as the Kickoff Option – Checked
  • ID Attribute – cf7-drop-downwardly-card
  • Class Aspect – cf7-driblet-down-menu

These settings generate the shortcode below.

          [checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Choice ane" "Option 2" "Option 3"]        

The "Checkbox" Grade Tag

The checkbox form tag lets you create HTML checkboxes. Similar to drop-down menus, checkboxes tin likewise exist used to select predefined options. Depending on the nature of your contact course, checkboxes may work better than drib-down menus. For example, if yous have a modest number of options to choose from, a checkbox reduces the number of clicks required to make a selection. On the other hand, if your contact form has a lot of options, a drop-downwards card may piece of work better considering it takes upward less vertical space.

A
A "checkbox" grade tag in Contact Form seven.

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

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

These settings generate the shortcode beneath.

          [checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Selection 1" "Option 2" "Option 3"]        

The "Radio Buttons" Course Tag

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

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

For the "radio buttons" form tag, we've configured the settings beneath.

  • Proper noun – radio-708 (car-generated)
  • Options – Option 1, Option 2, Option 3
  • Wrap Each Particular with Label Element – Checked
  • ID Aspect – cf7-radio
  • Class Attribute – cf7-radio

These settings generate the shortcode below.

          [radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Pick two" "Option three"]        

The "Acceptance" Grade Tag

Contact Course 7's "acceptance" form tag can be used to generate a single checkbox for the purpose of accepting terms and conditions. With the credence class tag settings, you can specify a message to display.

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

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

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

These settings generate the shortcode beneath.

          [acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Cheque this box to take the terms. [/credence]        

The "Quiz" Course Tag

The "quiz" class tag can be used to create basic question and answer quizzes in your contact course. To create a quiz question, use the post-obit format to divide 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.

Subscribe Now

A
A "quiz" class tag in Contact Form vii.

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

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

These settings generate the shortcode below.

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

The "File" Form Tag

Contact Course 7's "file" grade tag lets yous add file upload functionality to a contact grade. This is useful for situations where you want a company to be able to upload an image or PDF file to submit with the grade. For instance, if y'all run a photography weblog with photograph galleries that posts guest submissions, you lot can add file upload functionality for people to upload images.

In the form tag settings, you can specify a variety of settings to secure your form. We recommend e'er setting a file size limit to foreclose malicious users from uploading huge files. Similarly, specifying "acceptable file types" helps you lock downward your form to file formats that yous want and expect. With the photography weblog instance in mind, yous may desire to limit file size to 1 MB (1024 KB) and acceptable file types to known prototype formats like JPG and PNG merely.

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

For the "file" form tag, we've configured the settings beneath.

  • Proper name – file-658 (auto-generated)
  • File Size Limit – 1024kb
  • Acceptable File Types – jpg|png|gif
  • ID Attribute – cf7-file
  • Class Attribute – cf7-file

These settings generate the shortcode beneath.

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

The "Submit" Class Tag

Terminal simply non least is Contact Form 7'south "submit" form tag. Every bit you may have guessed, this form tag lets you generate a submit button for a contact form.

A
A "submit" course tag in Contact Class vii.

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

  • Label – Submit
  • ID Attribute – cf7-submit
  • Grade Attribute – cf7-submit

These settings generate the shortcode below.

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

How to Structure a Contact Grade with Course Tags

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

Embed a contact form with the contact-form-7 shortcode.
Embed a contact grade with the contact-form-vii shortcode.

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

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

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

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

Yous should now be able to run across the contact form on the page where y'all added the Contact Class vii shortcode. Here's what our contact form with the settings mentioned above looks like. As you can meet, Contact Form 7 automatically converts form 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 grade created with Contact Form seven.

Our contact grade in its current country is a good starting point, but it's lacking ane key feature. Form tags like "text", "email", and "URL" back up placeholders, but other elements similar "checkboxes" and "radio buttons" exercise not. Without proper labels, the checkbox and radio buttons won't be very useful for visitors because they don't take any context. Luckily, adding labels in Contact Grade 7 is very piece of cake!

How to Add Form Tag Labels in Contact Form vii

There are two ways to add labels to Contact Class 7 form tags. For the class tags beneath, yous can simply wrap the form tag with a tag.

  • Text
  • Email
  • URL
  • Tel
  • Number
  • Date
  • Text Area
  • Acceptance
  • Quiz
  • File

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

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

To add a label to this form tag, we can replace the form tag with the snippet beneath. Notice the boosted instance of "Your Proper noun" right later on the opening <label> tag.

          <label> Your Name [text* text-711 id:cf7-your-name form:cf7-your-name placeholder "Your Name"] </characterization>        

Hither's what this modify looks similar on our contact class. In this case, the newly created characterization serves the same purpose as the placeholder. Even so, if we didn't want to specify a placeholder inside the form tag, and so the characterization would help identify the purpose of a specific input box.

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

For form tags that return multiple form controls like checkboxes, radio buttons, and dropdown menus, wrapping the form tag inside a tag results in an mistake. This happens because a <label> tag is but supposed to be used with a single form control. The nature of checkboxes, radio buttons, and dropdown menu options involve multiple form controls, so they are incompatible with the default labeling solution.

For checkboxes, radio buttons, and dropdown menus, you have to add a use_label_element parameter within 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 class:cf7-checkbox            use_label_element            "Choice ane" "Option 2" "Option three"]        

Once the use_label_element parameter has been added, yous can add together a label straight above the form tag in the contact form editor.

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

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

Here's what our contact form looks like:

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

Configuring Mail Settings in Contact Form 7

At present that we've configured the structure of our contact grade, it'south time to take a wait at the email delivery settings in Contact Form 7. While the default mail service delivery settings should work just fine for most sites, it's however important to understand the various settings in case your site or apply case requires a special configuration.

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

Mail delivery settings in Contact Form 7.
Mail service delivery settings in Contact Form seven.

Contact Course 7'due south mail service delivery settings permit you customize the templates and parameters that are used to generate and send a notification to you lot after someone makes a form submission. If you apply wrong settings, it's possible that you won't be notified of form submissions. Thus, it's important to test the form delivery later on creating a contact form and irresolute settings.

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

  • To – the email address to send a notification to.
  • From – the email address to send a notification from.
  • Bailiwick – the bailiwick of the notification email.
  • Additional Headers – specify additional email headers like "reply-to".
  • Message Torso – the body of the notification email.
  • File Attachments – specify any attachments to include with the notification email.

At present, allow'due south go through each setting to get a better understanding of how they can bear upon mail service delivery in Contact Form 7.

The "To" Field

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

The "From" Field

The "From" setting should use the following format –Your Name. For our contact form mail settings, we're using kinstalife <[electronic mail protected]>.

By default, Contact 7 will fill in this field with [electronic mail protected] . You'll desire to make sure that this email address is a valid one considering some WordPress hosts block approachable email to invalid addresses. There are multiple means to make this email accost valid. You tin can either set up a dedicated e-mail account for [email protected] or you can enable catch-all functionality at your email service provider. If you lot're unable to gear up this email address, nosotros recommend changing information technology to a valid email address to avoid deliverability issues.

The "Subject" Field

The "Subject area" setting can be used to specify a subject line for notification mails. By default, Contact Class vii sets the subject equally Site Proper noun "[your-subject]" – the subject name in Contact Form 7's default class template.

If you don't have a class tag named "[your-subject area]" in your course, exist sure to change information technology to something else. For example, if you just have a grade tag to capture a visitor's proper noun (e.g. [your-proper name]), you could alter the subject line to You've Received a Message from [your-proper noun].

The "Additional Headers" Field

Under "Boosted Headers", y'all can specify e-mail headers like respond-to, CC, and BCC. By default, Contact Course 7 adds the post-obit header – Answer-To: [your-electronic mail]. This header lets you answer to the email address specified in a submitted contact grade.

The default respond-to header is fine if yous're using Contact Form 7'south default email form tag. If y'all're not, be certain to change it to match the name of your email grade tag. For our contact form, the name of the email form tag is "email-632", so the reply-to course tag would take to be changed to Respond-To: [e-mail-632].

The "Bulletin Body"

Next up is the "Message Body", which determines the trunk content of the notification email. Contact Form 7's default template uses [your-name], [your-e-mail], [your-discipline], and [your-message] form tags, and looks similar this:

          From: [your-name]  Field of study: [your-bailiwick] Message Body: [your-message] --  This email was sent from a contact class on kinstalife (http://kinstalife.com)        

Be sure to change these class tags if yous're not using them in your contact form template. Since the contact form we created collects a lot of information, we can fix the message body with additional form tags like so:

          Hi Brian, you lot've received a bulletin from [text-711] ([electronic mail-632]). Website: [url-601] Phone Number: Tel-842 Appointment Engagement: engagement-389 Message: textarea-795        
Customize the message body for Contact Form 7 notification emails.
Customize the bulletin body for Contact Form 7 notification emails.

Contact Form seven Mail Settings – File Attachments

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

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

Contact Course 7 Mail Commitment Issues

If you find that Contact Grade 7 is not sending emails, in that location are a few things you can bank check before reaching out to a WordPress developer for assistance.

  1. Check if your server is sending other types of emails. To test this, y'all tin trigger another e-mail commitment action by making a test annotate on a blog post or submitting a password reset asking on your WordPress login page. If you receive an email after performing i of these actions, then the issue is probable related to Contact Grade seven's configuration. If you practise not receive emails, achieve out to your host'southward support team and let them know you're having an result with electronic mail delivery.
  2. Make sure the "To" and "From" fields in your contact form'due south mail delivery settings are configured correctly. For Contact Form 7 to work properly, both of these fields should be populated with existent email addresses.

Contact Form 7 Form Submission Messages

Contact Course vii lets you customize a variety of grade submission messages. These messages brandish after a certain condition is met. For example, if a company forgets to fill up in a required field, Contact Form vii will brandish a "The field is required" message. For well-nigh use cases, the default messages should work just fine. However, if you want to customize the letters, y'all tin can do so past clicking on the "Letters" tab in the contact form editor.

Customize Contact Form 7 situational messages.
Customize Contact Form seven situational letters.

How to Secure Your Contact Form

As automated 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 Internet, it'south adequately easy for spider web scrapers to detect them and burn off spam messages to your e-mail inbox. Fortunately, there are various ways to ward off spammers and protect your contact form.

Secure Your Contact Form 7 with reCAPTCHA

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

The latest version of reCAPTCHA (V3) does not crave any interaction from users. Instead, it transparently monitors user activity in the background to distinguish between human being and bot visitors. Since Contact Form 7 supports reCAPTCHA V3, we recommend using this latest version because it provides a better user feel for visitors.

To ready reCAPTCHA, you'll showtime demand to generate an API key. To do this, log in to your Google account and become to the reCAPTCHA setup page.

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

Become through the registration grade to create your reCAPTCHA.

  • Label – Specify a label of your choosing.
  • reCAPTCHA Type – Contact Form 7 supports reCAPTCHA v3, so select that version.
  • Domains – If your site uses a root domain, add the non-world wide web and www version of your domain. If your site uses a subdomain, just add the subdomain.
  • Owners – The e-mail accost associated with your Google business relationship will be added as an owner by default. Feel free to add additional e-mail addresses if needed.

After you've filled in all the options, click Submit. You'll so be presented with your site-specific "site primal" and "undercover key". Be sure to keep these keys somewhere safe considering y'all'll demand to add 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 key and clandestine key into their corresponding fields. Finally, click Save Changes to finalize the reCAPTCHA integration.

Configure reCAPTCHA in Contact Form 7.
Configure reCAPTCHA in Contact Class 7.

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

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

Secure Your Contact Form with Cloudflare (Optional)

If y'all use Cloudflare to protect your site, you tin set upwardly a special page rule for your contact class page to reduce spam contact class submissions.

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

To add a page rule, click on the "Folio Rules" tab, and utilise the following settings to help secure your contact folio.

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

Cloudflare's "Browser Integrity Check" feature analyzes HTTP headers. If it detects an HTTP header that's usually used by automatic bot and spammers, it denies the asking to your site. Setting the "Security Level" to high volition challenge all visitors that exhibited malicious beliefs within the past two weeks.

By limiting these settings to your contact page with the URL match rule, other pages on your site volition be unaffected by these page rules. We recommend this configuration considering normal "read-only" pages on your site do not typically crave a heightened security level setting.

Don't leave your audition on read. 👀 Become in direct contact with your readers and potential customers through the Contact Form vii plugin ⬇️ Click to Tweet

Summary

Contact Form 7 is the most popular contact grade plugin and for good reason! Information technology can be used to create everything from bones contact forms, to question-respond quizzes, to complex forms that back up file attachments and dropdown menus.

Best of all, information technology comes with congenital-in reCAPTCHA support to help secure your contact class confronting spammers.

Do yous employ Contact Form 7 on your WordPress site? If non, what's your preferred choice? Let us know in the comments section beneath!


Save time, costs and maximize site performance with:

  • Instant help from WordPress hosting experts, 24/7.
  • Cloudflare Enterprise integration.
  • Global audition attain with 34 information centers worldwide.
  • Optimization with our built-in Application Performance Monitoring.

All of that and much more, in one program with no long-term contracts, assisted migrations, and a xxx-24-hour interval-money-dorsum-guarantee. Bank check out our plans or talk to sales to discover the plan that'due south right for you.