Contact Form 7 Implements reCAPTCHA v3

WordPress is a very popular platform that millions of web sites utilise as their content management system of choice. The ease of use and wide array of plugins that are available to expand its functionality make this platform very attractive for users.

Take Me To The Fix

One of the plugins that is very often utilised by users whom want to easily create contact forms on their site is Contact Form 7 (CF7). The plugin quickly allows users to create fields and implement their constructed forms in to posts and pages via a generated shortcode.

One of the great features of Contact Form 7 is the easy implementation of Google reCAPTCHA, a spam prevention API that many users will be familiar with seeing across the web. Google reCAPTCHA reduces spam by requiring end users to click areas of generated images that match the written request. Once correctly selected reCAPTCHA will allow the form that it has been implemented with to be submitted.

This process helps distinguish between bots and human users and should aid in reducing the amount of spam submissions from bots via forms.

Google reCAPTCHA v3

At the end of October 2018, Google announced the launch of reCAPTCHA v3 that brings an evolved functionality compared to previous revisions. The first generation, reCAPTCHA v1 generated a an image containing distorted text that users would need to successfully input in to a field. The second major revision, reCAPTCHA v2 evolved the same fundamental process of a generated word, however an accompany group of images were presented for the end users to select those that featured the word.

Google reCAPTCHA v3 has completely evolved the process that users have experienced with past versions. reCAPTCHA v3 performs risk analysis to identify spam signals and machine learning to combat bots. It also provides an unobtrusive experience “without user friction”, removing user input from the reCAPTCHA process. Full details of the changes and how the changes work is available on the Google Webmaster Central blog: https://webmasters.googleblog.com/2018/10/introducing-reCAPTCHA-v3-new-way-to.html.

Contact Form 7 Implementation

Towards the end of December 2018, Contact Form 7 received its v5.1 updated that saw the migration for Google reCAPTCHA v2 to v3. As WordPress does not automatically update plugins, your WordPress installation you may not have updated to this version.

Full details of the features introduced in this build can be viewed via the WordPress plugins repository here: https://en-gb.wordpress.org/plugins/contact-form-7/#developers.

Contact Form 7 Google reCAPTCHA Issue Since Update to v5.1

There are many users that have updated the Contact Form 7 plugin to v5.1 and had an issue with Google reCAPTCHA breaking. Instead of the reCAPTCHA box being rendered on a form, the shortcode was instead being shown and subsequently spam form submissions were being received.

This issue is due to Contact Form 7 v5.1 migrating to Google reCAPTCHA v3. When updating the plugin, any API keys for reCAPTCHA v2 were removed from the respective fields within the plugins configuration. The reason for this is that they would now be redundant and no longer work with the updated v3 of the API.

How to Fix Broken reCapthca Due to Contact Form 7 Update

How can you rectify this issue? The solution is extremely simple and involves generating reCAPTCHA v3 API keys and inputting them within the plugins configuration as detailed within the steps below.

Generate New v3 API Keys

Our first steps to follow are to generate Google reCAPTCHA v3 API keys.

1. Navigate to the Google reCAPTCHA site and login: https://www.google.com/reCAPTCHA/admin
2. Scroll to the “register a new site” form located below the list of current API keys.
3. Select the “reCAPTCHA v3” radio button.
4. Enter a label within the “Label” text field.
5. Enter any variations of your domain name that the API keys will be used.
6. Check the checkbox to agree to the terms of use.
7. Click the “Register” button.

Your keys will now be generated and displayed.

Input the v3 API Keys in the Contact Form 7 Integrations Configuration

Our secondary steps are to configure the Contact Form 7 plugin to utilise the new API keys that were generated for your site.

1. Login to WordPress.
2. Navigate to: Contact > Integration.
3. Click the “Setup Integration” button located under the “reCAPTCHA” heading.
4. Copy your “Site Key” and “Secret Key” values that were generated within your Google account.
5. Paste the generated values in the respective “Site Key” and “Secret Key” text fields.
6. Click the “Save Changes” button.

Now that your Google reCAPTCHA v3 values have been added to the Contact Form 7 integrations configuration, your forms will now be protected once again from those pesky spam bots.

On the front end you will notice that a sitewide tab will be present in the bottom right hand corner of the screen that expands on hover, labelled “protected by reCAPTCHA”. The new revision of reCAPTCHA with the plugin implements a script across site that monitors usage to help distinguish between bot and human users. You will also notice that no user input is required with reCAPTCHA on your forms.

Note: If your site utilises a caching plugin, you may need to flush / clear the caches for the changes to take effect.

What About reCAPTCHA Shortcodes?

The shortcode within your forms for displaying a Google reCAPTCHA code has now been made redundant. Subsequently if the plugin detects the shortcodes, it will not display them on the front end, which is great if you are yet to remove them from your forms.