Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158
Finally, A Solution To Spam!
No More Spam In from your Divi Website
Today is a good day! Elegant Themes has added Google reCAPTCHA to Divi in both the Contact Form and the Email Optin. That’s right, I was casually reading over the tons of bug fixes in the Divi changelog for version 4.0.7 when I spotted it…reCAPTCHA support was added!
I immediately tested it, and was so excited to share the findings with the rest of you on YouTube and on the blog. So here are the easy step-by-step directions!
What is reCAPTCHA?
First of all, what is this weird thing called reCAPTCHA? The “re” part is a special type of CAPTCHA by Google. The word CAPTCHA stands for “Completely Automated Public Turing test to tell Computers and Humans Apart.” Now you know a great piece of trivia to use at parties!
According to the Google reCAPTCHA website:
“reCAPTCHA is a free service that protects your website from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive challenges to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease.”
So in the words of Nelson, it’s a really cool thing that stops fake bot people.
Review What’s New
Check The Divi Contact Form and Email Optin Modules
The first step is to simply go to your Divi Contact form Module and take a look at this awesome new feature reCAPTCHA feature.
A new Spam Protection toggle is now available in both the Divi Contact Form and the Divi Option Module. We are showing images from the Contact Form, but the process is exactly the same for the Email Optin.
Are you confused yet by Account Names, Site Keys, and Secret Keys? Don’t worry, I explain it all step-by-step below, so keep reading!
Register A New Site
We can see that an account needs to be created and some information entered, so let’s do that next. The first thing to do is to head over to the Google reCAPTCHA website and complete a registration form for our website.
Step #1: Click the blue “Admin Console” button in the top right corner.
After logging in, you will find a page that looks like this:
Let’s walk through this step-by-step and get your Divi website set up properly with Google reCAPTCHA. I’ll go over each item next.
Step #2: Enter the Label To Identify Your Site
The label is simply a way for you to identify this particular site in the future. It is helpful to label this something like the site name or the site domain name.
Step #3: Choose A reCAPTCHA Type
You need to select from version 2 or version 3.
For this tutorial, select reCAPTCHA v3 from type options.
Step #4: Add Your Domain
Here you should enter the domain name of the site you want to register.
Step #5: Accept the reCAPTCHA Terms of Service
Finish off this section by reading and agreeing to the terms of service.
Step #6: Click the blue “Submit” button
After submitting the registration form, you will go to a new page.
Adding Google reCAPTCHA To Your Divi Website
After you register a website, you will get the site key and secret key for the site. It will look something like this:
Keep this page open and go back to your Divi Contact Form or your Divi Email Optin Module.
Step #1: Enable Spam Protection
Go to the “Spam Protection” toggle and turn on “Use A Spam Protection Service.” This brings up some new options and fields.
NOTE: The “Service Provider” is set to reCAPTCHA by default and cannot be changed.
Step #2: Choose reCAPTCHA Account
Next, click the gray button to add an account. (If you have already added an account in the past, you can select it from the list.) This will bring up another set of options called Account Name, Site Key, and Secret Key.
NOTE: The “Account name” is set to Default by default but can be changed. You can use the “Label” name that you set earlier in step #2 of the previous section.
Step #3: Add Site Key and Secret Key
Now you can simply copy and paste the Site Key and Secret Key from the Google reCAPTCHA website to your Divi Contact form or Email Optin.
Step #4: Click Submit
Finish things off with a quick button press and you are on your way to a spam-free Divi Contact Form or Email Optin!
Step #5: Adjust The Minimum Score
The score is the key to this entire anti-spam thing! It’s important for you to understand the basics, and for that, I recommend the video on Google ReCAPTCHA’s about page.
I’m going to keep my set to the default 0.5 score for now, which can be adjusted after evaluating the analytics.
NOTE: Google reCAPTCHA v3 is invisible. There may be a badge that appears on your website, but there is no checkbox on the forms. See below for how to properly and legally hide the badge.
Analytics
Check Your Divi Contact Form and Email Optin Google reCAPTCHA Analytics
One of the cool features of using Google reCAPTCHA is being able to see analytics for your Divi websites. Among other things, you can see the total requests and suspicious requests You can see all this from the Google reCAPTCHA admin area.
Can I Hide The reCAPTCHA Badge?
You Can Legally Hide the reCAPTCHA Badge with CSS As Long As You Add A Disclaimer
Many people were asking me if you can hide the Google reCAPTCHA badge that shows up on the bottom right corner of your website. I looked into this, and Google has officially answered this question on their FAQ document.
Basically yes, you are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. So in other words, you need to show the following text near your Contact Form module or Email Optin module:
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 Google reCAPTCHA badge, copy and paste the following code snippet into your Divi>Theme Options>Custom CSS box.
.grecaptcha-badge {
visibility: hidden;
}
Thank you for your clear instruction! Helped a lot!
Hi Marloes,
It is always a pleasure!
After following your instruction, captcha is not visible. Do you have an idea how that is possible?
Hi Erwin,
Google reCAPTCHA v3 is invisible, so you won’t see it like in v2.
Thank you so much! Helped a lot!
Glad to hear that Miguel!
This is amazing – works a treat – thank you for such an amazing walk-through!
You are most welcome, Elaine! Thanks for stopping by!
Is this visual builder only? Doesn’t work in normal Divi using Chrome or Safari…
Click ReCaptcha and nothing else loads up to ask for account details except for the sensitivity of the ReCaptcha.
Can’t click save and exit to reload it either…
Hi Jason,
If you are not using the latest Divi experience with the Visual Builder then no, you will not have any new features including this.
Thank you very much for this information. The explanations are very clear and it works perfectly on my sites.
That’s wonderful, Moa! Thanks for letting us know!
Thank you for the guide. But i get this error at console
Uncaught Error: Invalid reCAPTCHA client id:
Any reason for it?
Hi Sri,
I have no idea, sorry! It is not related to Divi. It looks like a very common issue that is discussed a lot on Google forums if you want to check that out.
Thank you. Found the solution. It was my speed plugin that was causing the issue.
Well done! A friendly advice: the Google video link is broken.
Thank you, fixed https://www.google.com/recaptcha/about/
Thanks for the tutorial!
Just a heads up that recaptcha v3 will add 2 seconds of load time across your entire website (!).
And once enabled, the API cannot currently be removed from Divi. That means that even when it’s disabled within the module, it’s still being loaded across your website.
Elegant Themes are aware of this and hopefully a fix will be available soon.
Great post. You should mention at the end of this manual that recaptcha v3 is invisible. Like the other commenter I was also confused that nothing showed up after completing the setup.
Hi Sandy,
Thanks for the feedback. I guess I assumed everyone knew, but I’ll be sure to update the post!
Hi, thanks for the instruction! About 2 weeks recaptcha is on and it really works.
The only problem I´m facing is the slowing page speed, after activating the recaptcha whent from 97 to 50 on page speed insights. Any tips to fix that? seems like recaptcha goes on every page even on the ones that dont have a form.
Thanks again!
Seeing the same problem. Adds 1200 ms of cpu time in page speed insights. As I write this comment, its Sep 28, 2021 about 19 months since Andre’s comment.
I’m running wordpress 5.8.1 and divi’s updated theme with the update ‘Performance’ tools version 4.10.8.
ergo the new performance settings didn’t fix this.
I’m looking at another tutorial to prevent recaptcha from running on ‘all’ pages, but the reality is I run my contact form on most pages at the bottom of the site. (probably have to replace it on most pages with a button to the contact page and go old school…
I’m also trying to figure this out. It slows down the site terribly.
Hey there,
Let me address the issue in place, Recaptcha is a renowned tool used on websites to prevent spamming and it’s a really good addon but it comes with the performance bump that you guys are facing here. The performance issue happens as Recaptcha can’t be cached and it requires a lot of API calls to work properly so if your website is getting highly affected then I would suggest you, switch to some alternatives like some form plugin that allows deferring the Recaptcha codes or you can use plugins like Akismet which is lightweight and prevents spamming on the website.
Hi, Nelson,
Thanks for the clear explanation. Only the Spam protection options are missing from my contact form. With you it is between ‘ redirect’ and ‘link’, but with me there is nothing between ‘ redirect’ and ‘link’. While I do have the latest version of Divi (version 4.3.2). Do you know why and how I can get it?
Thanks
Renske Foekema
Hi Renskey,
I double-checked, and it’s definitely still there in the latest version. It sounds like you need to ask ET about that.
Is there any way to put this on the login screen?
Hi Linda,
I just double-checked and I don’t see the option for this in the Login Module. This would be a good one to point out to Elegant Themes!
How would I know that it is working after I followed all the steps?
Also do you recommend turning off the basic captcha after setting up the recaptcha?
Thanks a lot for your help.
Hi Onin,
You would know by checking your Google reCAPTCHA account, it will show stats and such. For the second question, you actually can only use one or the other. 🙂
Hello,
Is it possible to use ReCaptcha v2 with the Divi Contact Form.
ReCaptcha v3 seems a bit sucky.
Regards,
Ian Watson
Hi Ian,
It probably is possible with some 3rd party plugin or solution, but not with the built-in Divi settings. I think v3 is the way to go though, follow the lead of Google.
Hi there,
Thank you for this tutorial!
I know that the V3 is supposed to be invisible, but I read that the badge should still show on the bottom right of the page. When I load the page, I don’t have the badge on the bottom right. I’ve tried removing other elements that may conflict. Do you have any suggestions for this?
For the policy code, did you place that in the contact form custom CSS?
Despite the above, Google reCAPTCHA is collecting data, and since I’ve installed it I’ve only received two spam e-mails (rather than 20) in the last 24-ish hours.
Hi Jennifer,
Right, adding the reCAPTCHA does place the badge at the bottom right, but I have instructions on how to legally hide that in the post. But it sounds like yours is not showing, which I don’t understand. For the policy link, if you want to add a checkbox to your contact form is to open the module’s settings and add a new field to it. Then choose “Checkboxes” as the type of this field and there you go. You can add custom text to this checkbox option. And you can also add a link to the checkbox text by clicking on the hyperlink icon. This can be used to link to your privacy policy page.
Thank you sir for your help with this very understandable tutorial! deep bow of respect.
Thanks, Dick, I appreciate your feedback and your respect 🙂
Cheers pal! Really good one.
Thank you Juan, glad you like it!
Thanks for the post! Do you know of a workaround for adding spam protection to BLOOM, which is just their email capture plugin? (I’m not using the full Divi theme for this website.) Thx!
Hi Sheryl,
That’s a great question, but I don’t know of any way to add spam protection to Bloom.
Thanks for the clear explanation.
You are welcome, John!
Hey Nelson, thanks for the tutorial, just what I was looking for! I’ve joined your Facebook group also.
Sounds great, Rob! Glad to have you!
Hi how can i tell if the recaptcha is working? I did a test but I knew if it worked …
Hi Gabriela,
You can see your stats in the Google reCAPTCHA analytics.
im also trying to figure out if it is working and the analytics shows all as 0
wow…saved the day here!! thank you for sharing this!!! I and my client greatly appreciate it.
I love saving the day! Glad your client could benefit from this!
Thank you helping me add the Captcha but I am still getting 10-20 spam emails a day with the score set at 1.
Am I missing a trick Nelson?
Hi Andrew, that sure sounds weird. I’d have to question what is bringing so much spam to your site in the first place. I’m not an expert on Google reCAPTCHA, more so on Divi, which is why I wanted to show you how to integrated, but I would consult with Google for understanding how the score works and what to use: https://developers.google.com/recaptcha/docs/v3
Thank you Nelson. I’ll give Google a shout
Hi,
Thanks a lot for making this video tutorial.
Adding the site and server key in Divi Form is super easy and it works well. But, how people know when he/she is about to fill up the form? Because it is invisible. It will show an error like “You must be a human”.
The best way is to add reCaptcha badge with Checkbox just before Submit/Send button wherever they are in the website. How one can do it? Please make a video tutorial.
I have watched so many videos that say to add html file, add code, make some modification in form.php file. It’s so hectic for a new beginner. How can I do with Divi Theme.
Regards,
Ramsharan
Hi Ramsharan, I believe you are asking how to use Google reCAPTCHA v2 in Divi? I’ll think about it but it’s not high on my priority list right now.
I am having the issue “You must be a human” on my contact form in the footer that is made with Theme Builder. Any idea why? It is connected with v3
Hey Maja,
I’m not really sure, it sounds like for some reason Google thinks your activity on the site is spammy. I’m not sure other than changing the score in the module.
It’s unfortunate that v2 isn’t an option but you can still use v2 with DIVI although not with the native contact form that comes bundled with it. To do this, you’ll need to use the ‘Contact Form 7’ plugin instead and then install another 3rd party plugin – For this, I used ‘ReCaptcha v2 for Contact Form 7’ and it works fine.
Please let us know how we can add Google reCAPTCHA v2 in divi contact module… Thank you
Very nice tutorial. I think maybe what is missing is someway to verify it’s working. In my case the recaptcha logo does not appear and on admin console I have not enough traffic to see if its working. Is there anyway to verify it is properly installed and working? Thank you!
Hi Voya,
You would need to log into your Google reCAPTCHA account and look at the analytics there.
css does not work for hiding the badge…
Try adding !important. This snippet is from Google, so it should work.
Hi,
Where do I add the !important?
Thanks
Please try this code and let me know if that helps. 🙂
.grecaptcha-badge {
visibility: hidden !important;
}
I did soemthing wrong I guess!
I have a warning at the top my form:
You must be a human to submit this form.
Some how I do really NOT know what I am doing wrong.
Please help me out.
And thank you.
Dick
Dear sir… please forgive me, mailed you before about a problem I had. But I solved it. Thank you for your tutorial.
how did you solve it?
wow, 3 hours to approve a comment! anyway, got it sorted, re added the keys and that sorted it
Are you kidding me? You are complaining that it took me 3 hours to approve your comment? I work all day to provide free content, and you think 3 hours is too long for me to get back? You are 6 time zones ahead of me, so consider that. Also, I usually have 100 comments per week usually asking for free help (Blog,Facebook group, YouTube, emails) Each takes an average of 5 minutes to reply to. Do the math. My tutorials take 5-8 hours each to create. Do the math. Be grateful 🙂
I hate that you even had to type out a reply to Lee Fear above. You do amazing work. God bless you for your generosity.
Thanks Sam, I appreciate your support and blessing. On occasion I leave comments here rather than delete them so that people can get a glimpse of what I deal with sometimes. 🙂
Wow! What an entitled and rude comment.
I installed Google reCaptcha V3 on one of my contact forms, now the reCaptcha script seems to be called on every page of my site. Do I need to follow your set up instructions on all of my contact forms or will setting up one contact form suffice?
Hi Dan, you would need to set it up on each module, unless you have it saved as a Global module.
I have integrate with recapcha and also show badge on right side but it are not showing in contact form like i am not robot recpactha what i have to do so it may hsow in contact form
Hi Norman,
That is correct, Google reCAPTCHA v3 is invisible. You are thinking of v2.
thanks for the great tutorial! i was able to set up recaptcha but when i test the form myslef i am unable to submit the form… i get the following message: You must be a human to submit this form.
I am a human! I think… lol
I tried with the filtering level at 0.5, 0.4 and 0.3 and there was no difference. Thanks again for creating these amazing tutorials!
Yes, I’m getting this too. Googling the error brought me here, but sadly no solution as yet. Several people in the comments are reporting the same thing.
Yay! Found the solution elsewhere.
Be sure to turn off ‘use basic captcha’ FIRST before enabling ‘Use a spam protection service’.
I had the same problem. Your solution fixed the problem. Thank you so much for posting!!!!!
Be sure to turn off ‘use basic captcha’ FIRST before enabling ‘Use a spam protection service’.
Do you have any idea if there is a way to get this activated on forms across all pages at once or do you need to find all pages with a form and update individually?
Thanks
Hmm, good question, I suppose individual modules would need it set up on each, but if you have the contact form set up as a Global item then it would be fine.
Hey Danny, no matter what I do, I get the ‘you must be a human to submit this form’. I’ve removed it, turned off basic, added it back, and on and on. Nothing works, just ‘you must be a human’ every time.
It fixed itself after 20 minutes. 🙂
Hi Scott, how did you fix it?
Awesome mate! Thank you so much for this tut, your the Man! haha
Thanks Kevin! 😉
Hi Nelson. I thought this might be of interest to you. I followed your (helpful and concise) instructions and found that the recaptcha badge still appeared on the contact page. After a bit of experimenting and some discussion on the Divi Theme Users Facebook group I discovered that if I added !important to visibility: hidden;. Therefore {visibility: hidden !important;} it worked and the badge was removed from the contact page. I hope this proves useful.
Very good Wade, I should update that. It is important 😉
I was trying to get it to show at the bottom corner but it actually gets hidden by the Divi section. Or it causes a gap between the bottom section and the bottom bar. I’m stumped. I guess I could just leave it covered and add that statement .
Hi, Does this appear in the Divi Theme or the Divi Plugin? A client has a Divi themed site and it does not appear.
Hi there,
It applies in the “Divi Builder” which is exactly identical in the Divi Theme or Divi Builder plugin. Make sure the site is running a fairly recent version of Divi!
love your site it extremely helpful withy easy to understand teaching
Thank you Wallace, so glad you like it and can benefit from the content! 🙂
Is this still accurate? I don’t think I am seeing the same options when I visit the recaptcha website
Is the tutorial not working?
After logging into the admin console, I am not able to locate anything like what is pictured or described. I am wondering if there was an update, because I’ve used this tutorial successfully several times before.
I’m not sure Abby, it still looks the same for me.
Thank you for this post–mainly for the “NOTE” about it being invisible!! I thought it wasn’t working.
But HOW does it work if it’s invisible?! :O
The mysteries of life 🙂
You DA MAN! Thank you for this awesome tutorial and feature. Much appreciated!
You’re welcome Ray, I’m so glad you like it!
Hi, followed your instructions to the letter, but whenever I save and exit the builder, I always get a red square pop up with the following error message: ‘ERROR for site owner: Invalid domain for site key’ have tried inputting my domain name with and without the www, but it makes no difference. I can’t get the recaptcha to stick. Can you advise please?
The problem might be happening because the site key is no longer valid now. Please try to register a new key to fix this issue.
Note: Please make sure that in the WordPress Dashboard > Settings > General the website address and the site address contain the same URL
Sadly, the interface has changed completely, and now they force you to input a payment method, even if it says “free”. Don’t know how to handle this for clients, to be honest. Thank you for the tutorial though, very well explained.
I added recaptcha V3 a week ago. had no issues with divi. I just checked on google and this comes up ” We detected that your site is not verifying reCAPTCHA tokens. Please see our developper site for more information.” Is there anything I should be doing? I followed all the steps from your tutorial( very helpful btw). when I went to the developper site i was extremely confused.
Me too … ?!?
Same here
Now, there’s no option for ReCaptcha 2 on Divi. Is it possible to use Recaptcha v.2?
Not that I know of no, nothing built in anyway.
Hello, I am trying a message because I also have the problem of the message “you must be human to submit this form”. I can’t find any solution and the Divi teams either, it’s very annoying. Do you have an alternative solution to advise to prevent spam please?
I don’t have experience with any other method, sorry. For the issue you would need to consult Google information, as this is not related to Divi at all.
Same is happening to me unfortunately! 🙁
Not working with Divi at all.
What about captcha for comment section?
At this time Divi does not have that built-in.
You need to update the link to google as your link goes to the enterprise version and I think it is difficult to find v3 from there; but maybe my eye were just tired.
google.com/recaptcha/admin/create
Sure I’ll make the link more direct, thanks for letting me know!
Hi, does this work also on the comment module?
I don’t think they have reCAPTCHA in the Divi comment module.
Thanks Nelson. Amazing that this is so simple. I hope it actually works. Started getting a lot of spam using the standard Divi form captcha 5+3= so I installed ReCaptcha V3…we’ll see. I have confidence in it. Also I have the badge lower right and it’s not bad leaving it displayed but thanks for the tip how th hide it. Glad I found your site. Stay Well! God Bless The Planet!
Hey Mark,
We are glad to hear that our post helped you with your tasks.
Hey, the link on this page with text “the video on Google’s website” is broken. It goes to a 404 page on this same website.
Thank you, fixed! https://www.google.com/recaptcha/about/
Hello! Thanks for the helpful tutorial. I am using Divi and I just tried to hide the Recaptcha badge per your css indicated above. However, the badge is still showing.
Can you please offer insight into why the badge is still displaying on my website?
Thank you!!
We would need to see the site to inspect the code.
Hi, had the same problem so used
.grecaptcha-badge {
opacity:0;
}
which worked on our site.
Thanks
Same for me on two sites I’ve used this on. Had to use opacity:0; to hide the badge.
Thank you , Neil and David , with opacity zero, it works well on my site
I have applied all the settings, as mentioned in this article but unable to see the captcha on the front page. How I can enable it on the front end? kindly guide me.
This would be for the frontend, so not sure. You could ask Elegant Themes support.
thank you so much for your clear explanation it is detate and easy to follow.
Awesome, I’m so happy to hear that, you are welcome!
Is there any option to disable Recaptcha v3? Eg like if we want to make divi fully GDPR compliance.
Thanks
The feature is optional and disabled by default in Divi, you could keep it off.
Great, but is there solution for the comments form?
Hi there!
You need to look for a third-party plugin to do so.
You need to look for a third-party plugin to do so.
Actual 2023
.grecaptcha-badge {
visibility: hidden !important;
}
Hi Berto!
I did not understand your query. Can you share some more details?
Hi Hemant Gaba,
If you want to hide the current actual 2023 The ReCAPTCHA Badge, you have to use the css code I sent.
!important must be added to hidden.
Thank you very much, Explanations are very clear, works great on my site. Great article.
You’re welcome, glad you like it!
Hi this is a great guide – I have it up and working however I get an error on the google recapture console saying
We detected that your site is not verifying reCAPTCHA tokens. Please see our developer site for more information.
no idea why as everything went through and was verified. Do you have any suggestions?
Hi Nick,
Sorry, I’m not familiar with that issue.