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!
Categories: Featured Tutorials

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;
}
74
Last updated Jul 10, 2020 @ 7:52 pm

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.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

101 Comments

  1. Marloes Lodder

    Thank you for your clear instruction! Helped a lot!

    Reply
  2. Erwin

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

    Reply
  3. Elaine Rogers

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

    Reply
  4. Jason Groves

    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…

    Reply
  5. Moa

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

    Reply
  6. Sri

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

    Uncaught Error: Invalid reCAPTCHA client id:

    Any reason for it?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
      • Sri

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

  7. Victor

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

    Reply
  8. Balaka

    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.

    Reply
  9. Sander

    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.

    Reply
  10. Andre

    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!

    Reply
  11. Renske Foekema

    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

    Reply
  12. Linda Rawson

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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!

      Reply
  13. Onin

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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. 🙂

      Reply
  14. Ian Watson

    Hello,

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

    ReCaptcha v3 seems a bit sucky.

    Regards,

    Ian Watson

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  15. Jennifer

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  16. Dick Ockers

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

    Reply
  17. Juan Mendez

    Cheers pal! Really good one.

    Reply
  18. Sheryl

    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!

    Reply
  19. john

    Thanks for the clear explanation.

    Reply
  20. Rob Stephens

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

    Reply
  21. Gabriela Cordero

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

    Reply
      • Jose Raul

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

  22. Paul

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

    Reply
  23. Andrew Edmond

    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?

    Reply
      • Andrew Edmond

        Thank you Nelson. I’ll give Google a shout

  24. Ramsharan Kumar

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
      • 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

      • Nelson Lee Miller (aka The Divi Teacher)

        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.

      • 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.

  25. Yoya

    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!

    Reply
  26. Dalibor Bosnjakovic

    css does not work for hiding the badge…

    Reply
  27. Dick Ockers

    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

    Reply
  28. Dick Ockers

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

    Reply
    • Lee Fear

      how did you solve it?

      Reply
      • Lee Fear

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

      • Nelson Lee Miller (aka The Divi Teacher)

        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 🙂

      • Sam

        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.

      • Nelson Lee Miller (aka The Divi Teacher)

        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. 🙂

      • Sam

        Wow! What an entitled and rude comment.

  29. Dan Burhans

    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?

    Reply
  30. Noman Ali

    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

    Reply
  31. emy

    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!

    Reply
    • photoMaldives

      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.

      Reply
    • photoMaldives

      Yay! Found the solution elsewhere.
      Be sure to turn off ‘use basic captcha’ FIRST before enabling ‘Use a spam protection service’.

      Reply
  32. Danny Crockford

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
      • Scott

        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. 🙂

      • Mr C Vermeulen

        Hi Scott, how did you fix it?

  33. Kevin Barnett

    Awesome mate! Thank you so much for this tut, your the Man! haha

    Reply
  34. Wade

    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.

    Reply
  35. Janine

    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 .

    Reply
  36. T Watson

    Hi, Does this appear in the Divi Theme or the Divi Plugin? A client has a Divi themed site and it does not appear.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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!

      Reply
  37. wallace dobson

    love your site it extremely helpful withy easy to understand teaching

    Reply
  38. abby

    Is this still accurate? I don’t think I am seeing the same options when I visit the recaptcha website

    Reply
      • abby

        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.

  39. Lisa Lubin

    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

    Reply
  40. Ray

    You DA MAN! Thank you for this awesome tutorial and feature. Much appreciated!

    Reply
  41. Archie

    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?

    Reply
    • Hemant Gaba

      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

      Reply
  42. Mariela

    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.

    Reply
  43. Rana

    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.

    Reply
  44. Robi Erwin Setiawan

    Now, there’s no option for ReCaptcha 2 on Divi. Is it possible to use Recaptcha v.2?

    Reply
  45. Damien

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Welcome Hemant To Our Team

Welcome Hemant To Our Team

I would like to introduce you to our new team member, Hemant Gaba, who has been helping out with everything behind the scenes!

Pin It on Pinterest

0

Your Cart