Invisible Captcha

You can get all the bot-blocking benefits of hCaptcha without explicitly rendering our checkbox widget. hCaptcha client/server interactions occur in the background, and the user will only be presented with a hCaptcha challenge if that user has not built up enough trust.

Automatically bind the challenge to a button

The easiest way to do this is to assign an .h-captcha class to any button or input. Like before, you must add your site key in a data-sitekey attribute assigned to the <button> element. Additionally, all of the data-* attributes are applicable here.

<button class="h-captcha"
         data-sitekey="your_site_key"
         data-callback="onSubmit">
         Submit
</button>

Just as before, the response-token will be sent to the callback function upon successful completion of the hCaptcha challenge. If you attached the invisible hCaptcha to a submit button, you must specify a data-callback to handle form submission. In most cases, you will want to use the callback to manually submit the form.

<script type="text/javascript">
   function onSubmit(token) {
      document.getElementById("my-form").submit();
   };
</script>

Programmatically bind the challenge to a button or invoke the challenge

This works without change from the explicit rendering of the hCaptcha widget described here. The only difference is that if the data-size="invisible" is present, the widget will be rendered in the background and only presented when a challenge is required.

Programmatically invoke the challenge

If you would prefer to invoke the hCaptcha workflow via a JavaScript trigger (in cases like a checkbox click, or a page load), you'll need to use the hcaptcha.execute(widgetID) function to trigger that process on a given widgetID.

For more information on the hcaptcha.execute function and the widgetID argument, you can read more on the JavaScript API section of the configuration page

Example:


Start hCaptcha process in defined div container, with onclick trigger on button

  <html>
    <head>
      <script>
        function onSubmit(token) {
          alert("thanks " + document.getElementById("field").value);
        }
      
        function validate(event) {
          event.preventDefault();
          if (!document.getElementById("field").value) {
            alert("You must add text to the required field");
          } else {
            hcaptcha.execute();
          }
        }
      
        function onload() {
          var element = document.getElementById("submit");
          element.onclick = validate;
        }
      </script>
    </head>
    <body>
      <form>
          Name: (required) <input id="field" name="field">
          <div id="hcaptcha" class="h-captcha"
              data-sitekey="your_site_key"
              data-callback="onSubmit"
              data-size="invisible"></div>
          <button id='submit'>submit</button>
      </form>
    <script>onload();</script>
    </body>
  </html>