Code by Day | Explore By Weekend
How To Set Up Google reCAPTCHA In Divi Tutorial by Pee-Aye Creative

How To Set Up Google reCAPTCHA v3 In The Divi Contact Form and Email Optin Module

Elegant Themes silently added Google reCAPTCHA to the Divi Contact Form and Divi Optin Module, and I'm going to show you how to set it up!

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!

anti-spam Divi contact form
spam protection service in the Divi contact form
setting up the spam protection service in Divi contact form
spam protection in Divi
register your Divi website for Google reCAPTCHA

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:

Google reCAPTCHA site key and secret key

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. 

anti-spam Divi contact form
spam protection service in the Divi contact form

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.

add Google reCAPTCHA account in Divi contact form or email option

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.

add Google reCAPTCHA account in Divi contact form or email option
add Google reCAPTCHA account in Divi contact form or email option

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.

Google reCAPTCHA v3 analytics
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;
}
34

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
66 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Marloes Lodder
8 months ago

Thank you for your clear instruction! Helped a lot!

Erwin
7 months ago

After following your instruction, captcha is not visible. Do you have an idea how that is possible?

Miguel Morales
7 months ago

Thank you so much! Helped a lot!

Elaine Rogers
7 months ago

This is amazing – works a treat – thank you for such an amazing walk-through!

Jason Groves
Jason Groves
7 months ago

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…

Moa
Moa
6 months ago

Thank you very much for this information. The explanations are very clear and it works perfectly on my sites.

Sri
Sri
6 months ago

Thank you for the guide. But i get this error at console

Uncaught Error: Invalid reCAPTCHA client id:

Any reason for it?

Sri
Sri

Thank you. Found the solution. It was my speed plugin that was causing the issue.

Victor
6 months ago

Well done! A friendly advice: the Google video link is broken.

Balaka
Balaka
6 months ago

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.

Sander
6 months ago

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.

Andre
Andre
6 months ago

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!

Renske Foekema
5 months ago

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

Linda Rawson
5 months ago

Is there any way to put this on the login screen?

Onin
5 months ago

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.

Ian Watson
Ian Watson
5 months ago

Hello,

Is it possible to use ReCaptcha v2 with the Divi Contact Form.

ReCaptcha v3 seems a bit sucky.

Regards,

Ian Watson

Jennifer
Jennifer
5 months ago

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… Read more »

Dick Ockers
5 months ago

Thank you sir for your help with this very understandable tutorial! deep bow of respect.

Juan Mendez
Juan Mendez
4 months ago

Cheers pal! Really good one.

Sheryl
Sheryl
3 months ago

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!

john
john
3 months ago

Thanks for the clear explanation.

Rob Stephens
3 months ago

Hey Nelson, thanks for the tutorial, just what I was looking for! I’ve joined your Facebook group also.

Gabriela Cordero
3 months ago

Hi how can i tell if the recaptcha is working? I did a test but I knew if it worked …

Jose Raul
Jose Raul

im also trying to figure out if it is working and the analytics shows all as 0

Paul
Paul
2 months ago

wow…saved the day here!! thank you for sharing this!!! I and my client greatly appreciate it.

Andrew Edmond
1 month ago

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?

Andrew Edmond

Thank you Nelson. I’ll give Google a shout

Ramsharan Kumar
Ramsharan Kumar
1 month ago

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… Read more »

Maja
Maja

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

rich

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.

Yoya
1 month ago

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!

Dalibor Bosnjakovic
Dalibor Bosnjakovic
1 month ago

css does not work for hiding the badge…

Dick Ockers
1 month ago

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

Dick Ockers
1 month ago

Dear sir… please forgive me, mailed you before about a problem I had. But I solved it. Thank you for your tutorial.

Lee Fear
Lee Fear
Reply to  Dick Ockers
1 month ago

how did you solve it?

Lee Fear
Lee Fear
Reply to  Lee Fear
1 month ago

wow, 3 hours to approve a comment! anyway, got it sorted, re added the keys and that sorted it

Dan Burhans
9 days ago

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?

Last edited 9 days ago by Dan Burhans
Noman Ali
2 days ago

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

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart