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>
