How to add reCAPTCHA or hCAPTCHA to any web application

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

--

--

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