How to add reCAPTCHA or hCAPTCHA to any web application

  1. Include the reCAPTCHA js file on the form page
    <script src=”https://www.google.com/recaptcha/api.js"></script>
  2. Add a callback function for submitting the form like so
    function onSubmit(token) {
    document.getElementById(“demo-form”).submit();
    }
  3. Add this submit button html and make sure you add your site key to the data-sitekey attribute
    <button class=”g-recaptcha” data-sitekey=”reCAPTCHA_site_key” data-callback=’onSubmit’ data-action=’submit’>Submit</button>
  1. Include the hCAPTCHA js file on the form page
    <script src=”https://js.hcaptcha.com/1/api.js" async defer></script>
  2. Include this html tag (add your key into the data-sitekey attribute)
    <div class=”h-captcha” data-sitekey=”your_site_key”></div>
  1. Point your form at the reCAPTCHAme verification service
    <form action=”https://reCAPTCHAme.com/?apikey=[YOUR reCaptchaMe API KEY]” method=”POST”>
  2. Include a hidden tag with the final form destination page
    <input type=”hidden” name=”recaptchame-destination” value=”[YOUR FULL FORM PROCESSING URL]”/>

--

--

--

Product Designer, Frontend Developer and Usability Engineer at Digiata

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Observable structure simplified

Google oauth20 using passport.js

Understanding Higher order functions in Javascript

What is ‘this’?

Building an enterprise-grade Angular project structure

Using objects in JavaScript algorithms with examples

Epic Games Store UI- MaterialUI, ReactJS, TypeScript — File Upload #13

Create a Dropdown in React that Closes When the Body is Clicked

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Franz Rodenacker

Franz Rodenacker

Product Designer, Frontend Developer and Usability Engineer at Digiata

More from Medium

Build your first Chrome Extension in 5 min

HOW DID WE BUILD THE FIT MEAL WEBSITE CLONE?

Build Your Progressive Web App for eCommerce Business — Everything You Need to Know.

Markdown First RichText Editor