Divi now supports Google re CAPTCHA v3 natively from Divi version 4.07.
What is Google reCAPTCHA?
reCAPTCHA is a free service from Google that protects websites from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive challenges to keep automated software robots from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease, acts invisibly.
How to enable reCAPTCHA with Divi step by step
To enable spam protection, a few additional steps are required before reCAPTCHA starts working:
Step 1
Login to https://www.google.com/recaptcha with your Google account
Step 2
Create a new site by clicking the plus sign in the top-right menu corner.
Step 3
Register your site so you will get site key and secret key.
Step 4
Retrieve your site key and secret key so you can copy & paste it to Divi Contact Form module.
Step 5
Copy & paste it to the Divi Contact Form module. Go to Divi Contact Form module, in the Content tab locate Spam protection. Instead of Use basic Captcha choose Use A Spam Protection Service. Click on the ADD button.
Step 6
Copy here the site key and secret key from the Step 4 & hit Submit button.
Congratulations, you are done!
reCAPTCHA minimum score interpretation
The Minimum score interpretation is taken from Google Developer Docs
reCAPTCHA v3 returns a score (1.0 is very likely a good interaction, 0.0 is very likely a bot). Based on the score, you can take variable action in the context of your site. Every site is different, but below are some examples of how sites use the score. As in the examples below, take action behind the scenes instead of blocking traffic to better protect your site.
| Use case | Recommendation |
|---|---|
| homepage | See a cohesive view of your traffic on the admin console while filtering scrapers. |
| login | With low scores, require 2-factor-authentication or email verification to prevent credential stuffing attacks. |
| social | Limit unanswered friend requests from abusive users and send risky comments to moderation. |
| e-commerce | Put your real sales ahead of bots and identify risky transactions. |
reCAPTCHA learns by seeing real traffic on your site. For this reason, scores in a staging environment or soon after implementing may differ from production. As reCAPTCHA v3 doesn’t ever interrupt the user flow, you can first run reCAPTCHA without taking action and then decide on thresholds by looking at your traffic in the admin console. By default, you can use a threshold of 0.5.
Hiding the reCAPTCHA badge
After enabling spam protection with reCAPTCHA, Google displays a little badge in the right bottom corner of the protected website and pops up when you roll over it. According to the official FAQ, you are allowed to hide this badge.
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.
To hide the badge, use this CSS code:
.grecaptcha-badge { visibility: hidden !important; }
Do not use display: none; as it will disable the spam checking.
37 Responses
This is a more accessible way to hide the badge icon in the footer:
.grecaptcha-badge {
position: absolute;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
The original CSS proposed (.grecaptcha-badge { visibility: hidden !important; }) is simple, but using visibility: hidden; can sometimes hide from assistive technology, and Google doesn’t like things that are not accessible. It also doesn’t remove the space that the badge takes up.
I have this message “You must be a human to submit this form”… but i’ve cofigured all good. What happens. Thanks for the post
It’s all set up correctly, but now the form doesn’t do anything when you click submit. It just shows the little lines as if it’s submitting, and nothing happens. No confirmation, no signup in mailchimp, nothing.
Same here as Landon
Hi, after I click add there are no fields to fill in to link account. It just has the slider for the captcha threshold. I’ve tried on three different browsers, with a mac and a pc. Not sure what the issue is.
Understood. Thank you!
You may not be able to answer this, but I am now having trouble with my Caldera Forms. Is there any way that adding reCAPTCHA v3 to my site could impact the email processors related to the forms?
Very unlikely, as reCAPTCHA is directly related to Divi code base in this case, but there is only one way to test it. Disable reCAPTCHA in Divi form and test if problem prevails. But Caldera Form are off-topic in this forum.
Awesome, thanks! Got everything working … really appreciate your tutorial and your replies! Have a great day!
I followed your tutorial and it worked as advertised. Thank you!! I have been getting a ton of unwanted SPAM, so very grateful. I don’t know where to insert the text “in the user flow”
This site is protected by reCAPTCHA and the Google
Privacy Policy and
Terms of Service apply.
Please advise.
Hi Laura, just add this disclaimer text under the Divi Form module as Text module and make the text small, so it looks like small print. Style it as a one-liner with text size for example 8px.
Can I just add it to my footer? Or does it have to be where they are opting in?
From reCAPTCHA FAQ: “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 …”
So if they don’t suggest specific placement, footer is just fine.
Lastly, where does the CSS code go? .grecaptcha-badge { visibility: hidden !important; }
Does it need to be on each page that has the reCAPTCHA badge? What part of the page? If there is already CSS code there, do I just add this after a comma or something? (Sorry not a coder, that’s why I use Divi 🙂
In WordPress admin area, go to Divi settings, on the bottom you will find Custom CSS section, add the code right there.
Excellent tutorial. Thank you.
Thanks for posting this. I had no idea that Divi had a section for Google Recaptcha. My client was getting spam emails every day. Hopefully, this will put a stop to it.
Google reCAPTCHA not working at all. Get error message ‘You must be a human to submit this form’ and no data being shown in Google reCAPTCHA account.
Hi TJ, we have successfuly implemented reCAPTCHA with more than 50 clients by now and I just finished setting up a site with reCAPTCHA without any issues. Make sure you select v3.
Hi
I am also getting the same error message as TJ though I selected v3 and followed the instructions as detailed
Hi TK,
are you shure that ‘Use a spam protection service’ is on and ‘use basic captcha’ is off?
I’ve had the same problem as you did.
But when I turn off ‘use a spam protection service’, then I saw ‘use basic captcha’ turned on as well. So thats off and ‘use a spam protection service’ with al its settings is turned on. Now it works good.
Thank you so much for this. For me unabling Bsic Recaptcha worked. I didn’t know I have both on. Thanks
This happened to me too until I saw this reply. Thanks!
You must be a human to submit this form – I get this and definitely do not have ‘basic captcha’ selected as well.
Hi Jenny, if you want to skip interaction with reCAPTCHA, you need to install V3. This means both in Divi and in google.com/recaptcha/admin/ you need to have reCAPTCHA type:v3 set.
Hi, I can’t see nothing in contact form, there are no recaptcha logo and nothing for to do although I entered keys. Is this right?
Hi Gabriela, sorry for a late reply, reCAPTCHA v3 allows you to verify if an interaction is legitimate without any user interaction, so it is invisible to an ordinary user.
I feel like this is the answer to my problems but… there is no “Spam Protection” menu items in my settings in the Contact Form! I can find a toggle for “show captcha” under the menu item “Elements” but it’s the x+y captcha and I am looking to add “I am not a robot” to the contact form. Any thoughts?
Hi Megan, you need to update Divi to version at least 4.07 for Spam Protection to show up.
Hi there,
I’m up to 4.5.6 now and cannot see any Spam Protection option, only Elements, which gives me the math CAPTCHA option only.
What might be going on here?
Josh
Thanks.
Very helpful and detailed instructions!
Happy New Year from Melbourne, Australia
I believe I’ve successfully set this up, thanks for the tut! I can’t see a check box or anything on the form indicating recaptcha (no robot box), but the logo is on the right side of the page. Is the recaptcha invisible on the form? Thank you!
Hi Shari, yes reCAPTCHA v3 is invisible, quoting from Google Docs:
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.
Hi Tom, you have probably entered Account Name with invalid characters. I am not sure where do you get this error, is it in Divi module or Google re CAPTCHA setup on Google servers?
Hello, i’m using account name: Default. I get the error from a javascript file recaptcha__nl.js. The weird thing is, i’m using a WPML multilanguage plugin and on the same page in a different language I don’t get this error.
This is probably bug to file with Elegant Themes or WPML, I just tried to add a contact form with reCAPTCHA on WMPL enabled site and it worked without any problems.
Great tutorial, but I get the following error when i do this: Invalid action name: only A-Z, a-z and _ are allowed. Do not include user-specific information. Can you help me with this?