reCaptcha integration in forms - configuration

Support
, ,
#1

Description:
I have a contact form that use the recaptcha integration via data-netlify-recaptcha= "true". The form works fine if I fill the form, check “I’m not a robot” and click send. Also the thank-you.html page will show up.

The issue I want to solve:
If I fill the form, and DO NOT check the “I’m not a robot” checker, and click send. The page will reload in the same url, with no warning or message at all. The form doesn’t pass and it is not showing in the form tab in netlity. I try to read some info in https://developers.google.com/recaptcha/docs/v3 but no clear solutions.

Any ideas how to set up this “I’m not a robot” as a required? or/and How to config a warning message to prevent people that the form wasn’t send?

Thanks in advance any leads in this topic.

#2

One thing you can do is use a custom recaptcha instead. This gives you a lot more flexibility in terms of being able to customize the field or making it required. Let me know if that works for you.

1 Like
#3

The custom captcha would work nice, but is there any way to do this with Netlify’s own Recaptcha that we know of? Currently trying to get this working on my site https://tonycre8.co.uk . If I enter the form without Recaptcha validation, my JavaScript will still show that “the message went through” despite the fact that it didn’t. Would there be any way to use JavaScript to target the Recaptcha element in order to validate it’s response? Or would it be better perhaps if you were to make a separate pop up window that displays the recaptcha after you enter the form information?

#4

There is no really any configuration options with the netlify-injected recaptcha. What you could do is to some input validation where you disable the submit button by default and once the recaptcha field is populated, you can enable the button.

For a separate recaptcha popup, if you use the custom recaptcha, you can enable their invisible recaptcha which just pops up the recaptcha when needed.

#5

Hi!

I try to implement captcha spam protection for my contact form. Currently “Netlify-provided reCAPTCHA” doesn’t make sense because the user can just ignore it and submit the form. Result: the important letter is lost.
I propose to allow to add the custom attribute to the button. And when the site is published, include the necessary code to disable the button until captcha is passed.

Something like this:

<form name="contact" method="POST" data-netlify="true" data-netlify-recaptcha="true">
  ...
  <div data-netlify-recaptcha="true"></div>
  <button data-netlify-recaptcha="true" type="submit">Send</button>

Then generate the code on your side for the button like you do for the captcha div.
It will be very handy feature.

Best Regards,
Maksym

1 Like