Hidden Mode

Using the hidden mode you can integrate CaptchaFox without explicitly showing the widget inside your form.

When the user clicks on the submit button you have to execute the challenge flow using the .execute API. This will retrieve a challenge and display it as a popup to the user.

Our OneClick feature can significantly reduce the percentage of users seeing an active challenge. Users are evaluated in real time based on various signals to determine whether a challenge should be displayed.
If you are interested in this feature plus SAML 2.0 SSO, Enterprise SLA's and more please contact us.

💡

In order to comply with the online privacy laws please add the following text and links to the page when using hidden mode:

This site is protected by CaptchaFox and its
<a href="https://captchafox.com/privacy">Privacy Policy</a> and
<a href="https://captchafox.com/terms">Terms of Service</a> apply.

Please note that this is not legal advice.

Update the container element

<div class="captchafox" data-sitekey="YOUR_SITEKEY" data-mode="hidden"></div>

Execute the challenge flow

Read the JavaScript API section for more information on the captchafox.execute function.

Example:

<html>
  <head>
    <title>CaptchaFox Demo</title>
  </head>
  <body>
    <form onsubmit="submitForm(event)">
      <input type="text" name="email" placeholder="Email" />
      <input type="password" name="password" placeholder="Password" />
      <div class="captchafox" data-sitekey="YOUR_SITEKEY" data-mode="hidden"></div>
      <button type="submit">Submit</button>
    </form>
    <script>
      async function submitForm(event) {
        event.preventDefault();
        try {
          const token = await captchafox.execute();
          alert('Response:' + token);
        } catch (error) {
          console.error(error);
        }
      }
    </script>
  </body>
</html>

Migrate from reCAPTCHA to CaptchaFox Theming