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

To hide the Google reCAPTCHA badge, copy and paste the following code snippet into your Divi>Theme Options>Custom CSS box.

11

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
42 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Marloes Lodder
5 months ago

Thank you for your clear instruction! Helped a lot!

Erwin
4 months ago

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

Miguel Morales
4 months ago

Thank you so much! Helped a lot!

Elaine Rogers
4 months ago

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

Jason Groves
Jason Groves
4 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
4 months ago

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

Sri
Sri
4 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
4 months ago

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

Balaka
Balaka
4 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
3 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
3 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
3 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
3 months ago

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

Onin
3 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
2 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
2 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
2 months ago

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

Juan Mendez
Juan Mendez
1 month ago

Cheers pal! Really good one.

Sheryl
Sheryl
1 month 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
1 month ago

Thanks for the clear explanation.

Rob Stephens
25 days ago

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

Gabriela Cordero
21 days ago

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

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart