DEV Community

loading...
Cover image for Setting up reCAPTCHA with emailJS

Setting up reCAPTCHA with emailJS

Seth A Burleson
A fullstack C# developer chronicling my journey of learning code.
Updated on ・2 min read

Its surprisingly easy to add reCAPTCHA to a contact form with emailJS. You will need the following:

  1. A domain (netlify works fine)
  2. A google account (used for reCAPTCHA)
  3. 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.
This is where your secret key goes

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!

Discussion (4)

Collapse
pastorsi profile image
Simon Measures

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.

Collapse
sbrevolution5 profile image
Seth A Burleson Author

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!

Collapse
xr0master profile image
Sergey Khomushin • Edited

Or you can add your localhost:port to the allowed captcha domains. Just FYI
Thanks for your article, very short and clear.

Collapse
sbrevolution5 profile image
Seth A Burleson Author

That doesn't appear to work for me :/