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

Concepts of Functional Programming in Javascript

Set Up a Decentralized Database with React and GunDB

Angular & To-Do-App

Creating a Homing Projectile

Deploying an ExpressJS (Node) web application to Heroku.

Creating CLI Executable global npm module

Piping and Functors in Javascript

https://youtu.be/rynwLmrJMuA

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

How To Create A Meeting On

JOURNEY OF BUILDING ADIDAS CLONE WEBSITE

Setting up email receiving on AWS using SES

Part III: How to Create Inspiring Museum Audio Guides with Kelsey Raschke.