Google has launched a new version of its reCAPTCHA code that helps you fight spam on your contact forms.
If you are using Contact Form 7, and followed my tutorial on how to integrate Google reCAPTCHA with it, you will need to do a minor update.
In this tutorial, I’ll show you how to revalidate your reCAPTCHA API key for v3.
UPDATE: Most of us are not having issues with Contact Form 7 (CF7) working with the reCAPTCHA v2. And the reCAPTCHA v3 adds its logo to all pages of your site in the bottom right corner, which most of us don’t like.
I believe this is due to CF7 loading its js/css files on every page, even if they don’t have a form. And that’s a page load speed issue I’m checking into now, as there are several ways to fix that.
In the meantime, if you have already switched to v3, there is a plugin to return to v2. See the comments by Alex below and his plugin for it.
Contact Form 7 Error Message
If you do have an issue with your reCaptcha API keys, you’ll see a notification in Contact Form 7.
Go to Contact > Integration in your left admin sidebar.
You will see the following error message at the top of that admin page.
Setup New Integration
Below that error message you’ll see a reCAPTCHA integration box.
Click the Setup Integration button.
You’ll see the reCAPTCHA integration box with fields for the two keys you will need to connect the API.
Create New Keys
Leave that site window open and then open a new tab or window.
Go to Google reCAPTCHA
In the top right, click the My reCAPTCHA button.
If you are not already logged into the same Google account you used for reCAPTCHA the first time, you will need to switch to it to see the API keys you had already created.
At the top you will see your current API keys.
Scroll below that to register a new site. This is required to get the new v3 API keys.
Label – I would put the website name here, for easy reference, and especially if you have more than one site.
Choose the type of reCAPTCHA – click the button for reCAPTCHA v3.
Domains – you will see a new field to enter your domain. You can enter more than one domain at a time, each on a new line. DO NOT include the http(s) or www part, just your raw domain, like blogaid.net
TOS and Register – check the box to accept the Terms of Service.
Leave the box checked to Send alerts to owners.
Then click the blue Register button.
Get Your Keys
At the top of the page you are redirected to, you’ll see the two new keys you need.
Copy the Site key.
Return to the window/tab of your site with the CF7 Integration page still open, and paste it into the appropriate field.
Then do the same for your Secret Key.
Then click the Save Changes button.
The error notice from Contact Form 7 should have disappeared.
More Helpful Tutorials
Be sure to visit the Helpful Posts page for even more tutorials and informative posts.
And subscribe to the BlogAid YouTube Channel for helpful video tutorials.
Working with my clone. Followed all of above, but my recaptcha boxes have disappeared from my forms? The short codes have not changed, my pages have not changed. I only changed the site key and secret key?
The reCaptcha boxes do disappear when you upgrade because reCaptcha v3 works invisibly in the background. It’s all a bit disconcerting, as you have found, because there is no visible evidence on the front end that it is working. However, the CF7 interface will tell you whether your keys are valid or not. And your inbox soon will tell you on the live site if the trap is not working!
This change has caused me way more hassle than the Gutenberg rollout. I’ve had to manually recreate and paste API key pairs into about 80 websites. Good job we had the Christmas holidays in which to do it.
Geez! 80 sites!!! That’s killer for sure.
I’m not at all crazy about the reCAPTCHA logo on every page now either. That may be due to CF7 loading it’s css and js on every page, even those without a form.
That’s a page speed load issue I had planned to check into anyway, and now this really motivates me. There is a way to make CF7 stuff only load on form pages. And maybe that will take this reCaptcha thing with it.
To be honest, I think CF7 is falling behind in support on a lot of WP and speed changes and it’s time to consider something else. However, what I’ve checked into so far either doesn’t offer the configuration options I want or it chews up the database with all the form info. I don’t need it to be kept in the db, just send me the email.
Finding another suitable set of contact forms is on my test list for 2019.
So? Do I want to upgrade or HAVE to upgrade my reCAPTCHA to v3 when I install WP 5.0? I do not understand your comments above as to how it is working. I have not upgraded to WP 5.0 yet and am still using reCAPTCHA v2 on a couple of forms. Planning to do the WP 5.0 today. Just don’t want to screw everything up. Thanks.
reCAPTCHA is made by Google and they updated to v3 a month or so ago. When you update to the latest CF7 plugin version, it will want you to also update to reCAPTCHA v3. All of it is independent of what WP version you are using.
Yes the reCaptcha logo at bottom right is annoying. I’ve used Gravityforms more than CF7 for the past couple of years due to its additional functionality such as conditional sections and submission to custom post types. Gravity is still using RC v2 at present. I find clients prefer the visual assurance of seeing a checkbox spam trap. However GF is not lightweight in terms of data either.
You can load CF7 scripts and CSS only on necessary pages provided you use a separate page template for contact pages. There’s an explanation of it on the CF7 support site https://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/
Obviously this has implications if you use CF7 forms on any pages other than contact too.
I don’t have a suggestion for an alternative lightweight form and will be interested to see what you find when you go looking.
There are several ways of disabling CF7 stuff on anything other than the contact page. I’ll be digging into at least 3 of them, as my webmasters may want multiple options.
I’ll be sure to post my form findings later this year. It’s not a small project to do.
The Contactform7 issue is unrelated to WordPress v5.0, it just happened to occur at the same time, so I put through both sets of updates at the same time, and found the CF7 caused me far more grief than WP5.0.
If you want to keep on using CF7 you’ll need to keep its software up to date regardless of whether you are using WP 4.9.9 or WP5.0.X . And as far as I can see, if you update CF7, it forces you to move to ReCaptcha v3, and that means you need to create new API keys if you want antispam protection. If you don’t create the keys after update, the form still works, but the spammers have a field day.
For what it’s worth, over the past week I have updated 118 sites to WP 5.0.2 and every single one is running fine, but I have disabled Gutenberg on about a third of them either using either ‘Classic Editor’ plugin or ‘Disable Gutenberg’ plugin either because I suspected there would be plugin compatability issues (not a proven fear, just me being cautious on a couple of aged plugins), or because I thought the client would get confused by Gute.
Also in a couple of cases where I didn’t disable Gute, I had to go back and disable it subsequently because the client couldn’t cope with it after having tried to use it. But equally, I have some clients who are loving it. Personally I’d rather either use the classic, or a my preferred ‘proper’ pagebuilder which is Beaverbuilder.
If you find any problems with Gute active, my experience has been that disabling it works 100%.
Finally, MaAnna’s tip to use TinyMCE Advanced sounds like excellent advice to me, and on a couple of sites where I already had it installed, all is well after installing WP5.0.2. I think you can safely go ahead and update with this as a fallback option.
Thank you everyone for the helpful comments!! Very appreciated.
I finally got upgraded to WP 5.0.2 and all is well. Put in the new keys for Contact Form 7 and now have the little reCAPTCHA boxes at the bottom of all pages. Just curious how this takes the place of the old checkbox with photos to select? I will await further insights into other form makers. Thanks all.
Just Google the reCAPTCHA v3 to read up on how it invisibly replaces the checkbox. I’m not crazy about it’s logo on every page for sure. It’s definitely motivating me to either fix the issue with CF7 loading on every page or replace it.
There’s no sign that Google is going to drop support for reCaptcha version 2 any time soon. You can just as easily stick with the old [recaptcha] tag you’re used to and API too while keeping Contact Form 7 up to date. I helped put together a plugin called “Contact Form 7 – reCaptcha v2” which does just that.
The plugin literally takes the previously written code for reCaptcha v2 from Contact Form 7 v5.0.5 and using some hooks overrides the newly implemented version of reCaptcha v3 in Contact Form 7 5.1.1. The wpcf7-recaptcha plugin has a single settings page with a single option to either use reCaptcha v2 or to use the default reCaptcha v3.
Of course you’ll still need the API keys for v2 or v3 respectively but it makes the upgrade from WPCF7 5.0.5 to WPCF7 5.1.1 very smooth. The plugin is free to download from the WordPress plugin repository of which I would love to link here but I’m not sure of this blogs rules on posting links. You can look up “Contact Form 7 – reCaptcha v2” on the WordPress plugin page to find it though and try it out if you’re not a fan of reCaptcah version 3.
Wow, thanks so much Alex!!!!! And thank you for respecting the rules on links. I found a couple of plugins in the repository. If you will comment with a link to yours, I’ll be sure to approve it. And I’ll be highlighting this in Tips Tuesday next week too. We all hate the new reCAPTCHA logo on all pages!!!!! I hope to finish researching all the ways to turn off CF7’s stuff on every page, and maybe that logo thing will go with it. But this is a great way to step back until then, or in spite of that!!
Not a problem, the plugin is “Contact Form 7 – reCaptcha v2” which I’ve linked below:
https://wordpress.org/plugins/wpcf7-recaptcha/
Should you have any issues with it let us know on the support forums. So far it sounds like it’s been an easy transition for people.
Thank you again, Alex!!
You can hide the recaptcha logo using CSS – just increase the amount of negative margin on its absolute position. However I suspect this breaches Google’s terms of use or something.
Agreed Rob, and if the issue is due to CF7’s stuff, that’s the thing to fix.
Hi I have added the reCAPTCHA v3 keys but every time I try to send a test message the form gives an error There was an error trying to send your message. Please try again later. The Google analytics page shows 0 total requests.
When I remove the keys the contact form works fine. Is there any way to resolve this?
I had the same issue when trying to set up v3 keys on a test site to see if it worked with lazy load on caching plugins.
I believe we had to turn off lazy load when using v2.
But, I’ve had so many folks lately saying they can’t contact me that I’m wondering if v3 suddenly has developed an issue or the form plugin has.
I’m thinking about dropping back to v2 for now until I find another form I want to use.
Hi, I’m currently run Contact form 7 5.1.3 version on WP 4.9.10 and I’m using the Google recaptcha V3 on my forms. Now, there is something very interesting thing going on, the keys are removed from the integration at random moments. Have you experienced this before?
I have not seen that particular issue, or heard from any of my clients that it has happened on their site.
You might want to contact the plugin dev about it via the plugin forum.
I see, thanks for your quick response, I created a new thread on the forums hopefully there will be some answers soon. Just for reference: https://wordpress.org/support/topic/recaptcha-integration-is-forgetting-the-keys/