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"

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) {

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


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

        function onSubmit(token) {
          alert("thanks " + document.getElementById("field").value);
        function validate(event) {
          if (!document.getElementById("field").value) {
            alert("You must add text to the required field");
          } else {
        function onload() {
          var element = document.getElementById("submit");
          element.onclick = validate;
          Name: (required) <input id="field" name="field">
          <div id="hcaptcha" class="h-captcha"
          <button id='submit'>submit</button>