CAPTCHA is an acronym for Completely Automated Public Turing Test to Tell Computers and Humans Apart. Contact Form 7 is the most popular contact form for WordPress. Unfortunately, the contact form is not only used by people. I would even say it is most often used by bots to simply spam. There are several ways to avoid spam emails in WordPress. In the following article, we will have a look at how Google reCAPTCHA can be integrated into Contact Form 7 to reduce the number of spam emails.

Step 1: Prerequisites to block spambots at Contact Form 7

1. Contact Form 7 installed, set up and embedded in a WordPress Page
2. Google Account

Step 2: Register a new site at Google reCAPTCHA

First, you need to register your site at Google reCAPTCHA to get the site key and secret key you will later add in Contact Form in WordPress. Go to WordPress → Contact → Integration to find the link to Google reCAPTCHA. You can also head directly to Google reCAPTCHA and open the Google reCAPTCHA Admin Console.

At the Admin Console, you can register a new site. After successful registration of the site at Google, you will receive a site key and a secret key that you have to enter in WordPress later. Let’s have a look at the very few options first:

1. Label
2. reCAPTCHA type
3. Domains

Label and Domains

The Label helps to find the site later on in the Google reCAPTCHA Admin Console. I recommend to simply use the domain name. In Domains simply add the domain of the site you want to protect of spamming bots. You do not need to add sub-domains as Google takes care of it by itself.

reCAPTCHA type

Choose if you prefer reCAPTCHA v3 or v2. In this article, we will focus on reCAPTCHA v3 as it is less intrusive on your site and delivers a better user experience. Understand that the reCAPTCHA types work very differently. reCAPTCHA v3 does not necessarily make v2 obsolete. In some cases, v2 would actually work better than v3.

reCAPTCHA_v3	Analyses the behavior of the visitor to recognize if it is a person or a bot. The result will be a score that is calculated by considering many different factors. Google says: reCAPTCHA v3 allows you to verify if an interaction is legitimate without any user interaction. It is a pure JavaScript API returning a score, giving you the ability to take action in the context of your site: for instance requiring additional factors of authentication, sending a post to moderation, or throttling bots that may be scraping content.
reCAPTCHA_v2 (I am not a robot)	Requires the visitor to manually confirm “I’m not a robot” via a checkbox ” and possibly challenge the user with some kind of puzzle as known as captcha. Google says: The “I’m not a robot” Checkbox requires the user to click a checkbox indicating the user is not a robot. This will either pass the user immediately (with No CAPTCHA) or challenge them to validate whether or not they are human. This is the simplest option to integrate with and only requires two lines of HTML to render the checkbox.
reCAPTCHA_v2 (Invisible reCAPTCHA badge)	No additional action required by the visitor. Recognizes if a visitor clicks a button. Google says: The invisible reCAPTCHA badge does not require the user to click on a checkbox, instead it is invoked directly when the user clicks on an existing button on your site or can be invoked via a JavaScript API call. The integration requires a JavaScript callback when reCAPTCHA verification is complete. By default only the most suspicious traffic will be prompted to solve a captcha. To alter this behavior edit your site security preference under advanced settings.

Step 3: Add site key and secret key to Contact Form 7

After registering your site at Google you’ll receive the SITE KEY and SECRET KEY. Head back to WordPress → Contact → Integration and add those keys to your WordPress site.

Step 4: Check the result on your frontend

If you look at your website you should see the captcha badge on the bottom of your page. You could say, Google is watching you (but it’s doing it anyway). From now on bots should not be able to send spam messages via the contact form. However, this does not protect from people manually entering spam messages. Furthermore, the developers of such bots always try to find new ways to get through, which means there is no guarantee against spam messages of course.

Step 5: Optional design and placement customizations

Change the position, size and style of the reCAPTCHA badge

I enabled a Go to top button on my WordPress site and by default, the reCAPTCHA badge uses the same fixed position on the bottom of the page. This can be easily changed by adding custom CSS to your page to reposition the captcha badge.

Change the position of the reCAPTCHA badge

/*reposition recaptcha badge to avoid conflict with go-to-top-button*/
.grecaptcha-badge {
    bottom: 100px !important;
}

Change the size of the reCAPTCHA badge

/*resize recaptcha badge*/
.grecaptcha-badge { 
   transform:scale(0.9);
   -webkit-transform:scale(0.9);
}

Change size and control responsiveness of reCAPTCHA badge

@media screen and (max-width: 991px){
.grecaptcha-badge { 
   transform:scale(0.85); 
   -webkit-transform:scale(0.85);
}}

Change background color of reCAPTCHA badge

It is also possible to re-style the badge to your likings, e.g. if you have a dark theme and color scheme you might want to adapt the background color of the badge.

.rc-anchor-light { 
   background: #000 !important; 
   color: #000 !important;
}

Show reCAPTCHA badge only at one single page

After enabling the reCAPTCHA v3 on my site I noticed that the badge is shown on every single page. It’s not something I personally find useful. It is quite easy though to show it only on one single page, e.g. the contact page with the contact form. Simply add the following custom CSS statement. You can find your page or post ID simply by looking at the URL in edit mode.

/* only show captcha badge on contact page, id 94 */
body:not(.page-id-94) .grecaptcha-badge {
    display: none;
}

Google says: You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

Hide reCAPTCHA badge everywhere except selected pages

If you would like to hide the captcha badge on every page except selected pages add the following CSS statements to your custom CSS section.

/* hide captcha badge on all pages */
.grecaptcha-badge {
   display: none;
}

/* only show captcha badge on these pages */
.page-id-94 .grecaptcha-badge,
.page-id-95 .grecaptcha-badge,
.page-id-96 .grecaptcha-badge {
    display: inherit;
}

Should there be a problem with display:none it is worth it to try visibility:hidden instead.

Google reCAPTCHA has little impact on your site performance

I was recently experimenting a lot with the performance and speed tests of sites. There is a bit of a difference when reCHAPTA v3 is activated as the site must load about 200KB more. For most of us, this will probably not be an issue.

• 

• 

Final thoughts on reCAPTCHA v3

Overall, there are several options to protect yourself from spam messages. An overview can be found in [NEWARTICLE]. The Google reCAPTCHA works well, is fast to install but comes with its drawbacks as well. My personal suggestion is to simply try one way to be protected from spambots and keep it for a week. I if works well you are good to go. If still too much spam gets through you know that there are additional ways to protect yourself.