How to enable your submit button based on reCAPTCHA results

Bjorn Krols

Bjorn Krols

Published on
31 May 2021

This brief post explains how to keep your submit button disabled until the users passes the reCAPTCHA test.

You can add a callback, executed when the user submits a successful response, to you reCAPTCHA integration via the data-callback attribute.

To enable the submit button when the user passes the test, here's what your HTML should look like:

<html>
  <head>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="https://submit-form.com/you-form-id" method="POST">
      <div
        class="g-recaptcha"
        data-sitekey="your-site-key"
        data-callback="callback"
      ></div>
      <br />
      <button id="submit-button" type="submit" disabled>Submit</button>
    </form>
    <script type="text/javascript">
      function callback() {
        const submitButton = document.getElementById("submit-button");
        submitButton.removeAttribute("disabled");
      }
    </script>
  </body>
</html>

Subscribe to our newsletter

The latest news, articles, and resources, sent to your inbox weekly.

More like this