Its surprisingly easy to add reCAPTCHA to a contact form with emailJS. You will need the following:
- A domain (netlify works fine)
- A google account (used for reCAPTCHA)
- An email js account found here
Once you've set up your email form on email js. Go into the settings tab and check the box to use reCAPTCHA v2. Keep this tab open, as we will need it again in a moment.
Head over to reCAPTCHA and click the plus icon to make a new reCAPTCHA. Enter any domains your site may run on, without https:// or any specific page. (For https://website.com/webpage.html you only need to put in website.com) Also ensure you've selected reCAPTCHA v2, v3 will not work with emailJS. You can use any type of reCAPTCHA you like, but I personally used the "I'm not a robot" checkbox.
You'll then see two keys, the first one is your html key, it goes in the html code, more on that in a moment. The second key is the one you give to emailJS, simply copy/paste it into the field below the box you checked to activate reCAPTCHA.
Once you have your form on the page. Place the following code in the form, I prefer directly above the submit button.
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
Replace the site key with your html key given to you by google. Push your changes and things should work fine!
One small note is that you won't be able to use your form on a localhost system, since it is not one of the configured domains. I recommend commenting out the reCAPTCHA while testing, but don't forget to uncomment before you publish!
Top comments (6)
There is a key piece of code missing here which makes the setting up of reCAPTCHA with emailJS incomplete. Specifically, additional code is needed, the absence of which means the line of code containing class="g-recaptcha" cannot be actioned.
I'm a bit confused, as this is working fine for my site. Could you elaborate a bit? What exactly do I need to add?
I appreciate the constructive criticism, The last thing I want to do is put out unhelpful information!
Thanks for this o find this helpful for My next project
Hey @austinosaz
Welcome to the community of thriving developers, connect with people, gain knowledge by reading blogs and even create blogs to share your knowledge
All the best
Or you can add your localhost:port to the allowed captcha domains. Just FYI
Thanks for your article, very short and clear.
That doesn't appear to work for me :/