Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Setting up reCAPTCHA with emailJS
Seth A Burleson
Seth A Burleson

Posted on • Edited on

     

Setting up reCAPTCHA with emailJS

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 accountfound 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 toreCAPTCHA and click the plus icon to make a new reCAPTCHA. Enter any domains your site may run on, without https:// or any specific page. (Forhttps://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 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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
pastorsi profile image
Simon Measures
My first website launched in 1997. For many years I've built and maintained a limited portfolio mostly built around xml files with xsltproc transforms. I moved to Nuxt and now I'm exploring Eleventy.
  • Location
    Monmouth, UK
  • Work
    Christian minster with online presence
  • Joined

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 cannot be actioned.

CollapseExpand
 
sbrevolution5 profile image
Seth A Burleson
A fullstack C# developer chronicling my journey of learning code.
  • Location
    Greensboro NC
  • Joined

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!

CollapseExpand
 
austinosaz profile image
Omozemoje Augustine Oisasoje
My name is Austine and am a graphics designer and web developer,
  • Education
    Graduate
  • Work
    Developer
  • Joined

Thanks for this o find this helpful for My next project

CollapseExpand
 
coderatul profile image
Atul Kushwaha
learning android developnment with kotlin

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

CollapseExpand
 
xr0master profile image
Sergey Khomushin
This senior is a software engineer and CTO.
  • Joined
• Edited on• Edited

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

CollapseExpand
 
sbrevolution5 profile image
Seth A Burleson
A fullstack C# developer chronicling my journey of learning code.
  • Location
    Greensboro NC
  • Joined

That doesn't appear to work for me :/

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

A fullstack C# developer chronicling my journey of learning code.
  • Location
    Greensboro NC
  • Joined

More fromSeth A Burleson

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp