Skip to main content
Version: 1.0.0

Invisible Captcha

You can get all the bot-blocking benefits of ARCaptcha without explicitly rendering our checkbox widget. ARCaptcha client/server interactions occur in the background, and the user will only be presented with a ARCaptcha challenge if try to click on submit button.

Automatically bind the challenge to a button

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

<button
class="arcaptcha"
data-site-key="your_site_key"
data-callback="onSubmit"
>
Submit
</button>

Just as before, the arcaptcha-token will be sent to the callback function upon successful completion of the ARCaptcha challenge. If you attached the invisible ARCaptcha 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) {
cosnole.log(token); // do something with your arcaptcha-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 ARCaptcha 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 ARCaptcha workflow via a JavaScript trigger (in cases like a checkbox click, or a page load), you'll need to use the arcaptcha.execute(widgetID) function to trigger that process on a given widgetID.

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

Example

<html>
<head>
<script src="https://widget.arcaptcha.co/1/api.js" async defer></script>

<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 {
arcaptcha.execute();
}
}

function onload() {
var element = document.getElementById("submit");
element.onclick = validate;
}
</script>
</head>
<body>
<form>
Name: (required) <input id="field" name="field" />
<div
class="arcaptcha"
data-site-key="your_site_key"
data-callback="onSubmit"
data-size="invisible"
></div>
<button id="submit">submit</button>
</form>
<script>
onload();
</script>
</body>
</html>