I have implemented Google’s invisible reCaptcha on a website, but it doesn’t seem to work correctly. I am trying to trigger it with DevTools and Googlebot/2.1 but my form will always submit successfully. Before Christmas the form was online with a slighty different code already – since I couldn’t trigger reCaptcha I waited until now, just to see that we got about 50 spam mails from one bot. Now I’ve adjusted the code but don’t have any idea how to test it, since it won’t give me any errors.
Here’s my code:
//HTML5 validation before submitting
const form = document.getElementById('contact-form');
(function() {
form.addEventListener("submit", function(event) {
if (!grecaptcha.getResponse()) {
event.preventDefault();
grecaptcha.execute();
}
});
onCompleted = function() {
form.submit();
}
})();
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form method="post" action="scripts/mail.php" id="contact-form">
<input type="text" name="input" placeholder="Some input fields">
<div id='recaptcha' class="g-recaptcha" data-sitekey="[my_site_key]" data-callback="onCompleted" data-size="invisible"></div>
<button type="submit" form="contact-form">Send</button>
</form>
</body>
</html>
Does anyone have an idea what my problem might be?
I think (or hope) it’s working fine now. CBroe pointed missing server side validation out. I haven’t seen this page/topic (https://developers.google.com/recaptcha/docs/verify) in Google’s docs and in any thread I read.
I followed this tutorial from "Implementing the backend": https://www.pinnacleinternet.com/installing-invisible-recaptcha/ and my force fail is working now!