Google Captcha instead of Honeypot

[DaNoobDev]

Hi,
as per title above, will this form works with Google Captcha?
It could be a better spam prevention solution instead of using Honeypot.

[byco]

I agree, that would be great. I'm getting some spam with one of my forms, which is called Contact Us. The form that isn't called Contact Us hasn't gotten any spam so far. Just a thought if you're looking for a simple way to reduce spam.

[mckennapsean]

It would definitely be possible to create an example that loops in reCAPTCHA: https://www.google.com/recaptcha/about/

There are a few versions, the "simpler" v2, then v3, and now enterprise (which some folks might prefer).

The honeypot is already a simple-enough/good-enough advanced section to have in the tutorial, I think. This could be an advanced section we could add, or a possibly FAQ with some pointers / examples if anyone does build reCAPTCHA into a form and wants to share with others!

[bledatunay]

Not as easy as it looks.

For a while now, I've been trying to implement v2 using various methods - to no avail. There are some very improper (and dangerous, actually) so-called implementations that can be found online, like totally ignoring the validation from Google and checking if the length of the grecaptcha response is equal to 0. This approach only targets the actual humans and will have no effect on bots whatsoever.

Since validation requires the request from the server, some kind of PHP implementation looks necessary, which kind of kills the purpose of using this. Even though this may be due to my inability, I have also failed to validate the response inside the .js or .gs as it has caused some problems with fetching, parsing and CORS.

I'm open to ideas.

[mckennapsean]

Shoot. Yeah, I haven't tried implementing this myself to see if it is possible. I'd be surprised if there wasn't a good way to have the client do that validation on the form you build on your site, but I haven't integrated with it myself. Definitely a good point to watch out for the not-so-proper variants to watch out for out there!

[heliusAurelius]

If anyone else is trying to get reCAPTCHA working with their form, I managed to get it working with reCAPTCHA v2 by disabling the submit button in my form, following the guidance from this thread.

You have to add the reCAPTCHA script call to your head

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Add the component to your form with a callback function

<div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxx" data-callback="callback"></div>

Assign an id to your submit button and set it to disabled by default

<button id="submit-button" class="" type="submit" disabled="disabled">Submit</button>

And add a callback script to the bottom of your body to enable the submit button once the captcha is solved

<script type="text/javascript">
function callback() {
 const submitButton = document.getElementById("submit-button");
 submitButton.disabled = false;
}
</script>

Adding the reCAPTCHA this way allowed me to use a honeypot field as well as the Recaptcha, so the reCAPTCHA will enable the submit button when it is solved, and the form-handler javascript will disable the submit button if the honeypot is used.

It's worth noting, that doing this as described will include the captcha response in the email notification and spreadsheet. Excluding the captcha response would require further tweaks.

[mckennapsean]

I think we heard in another thread how disabling the submit button may work to have recaptcha make humans use it, but bots can get around these very, very easily. We would want some kind of server implementation for these to be at all feasile.

it seems like we have continued discussion over in #417, so I am gonna close this one for now. thanks for the discussion so far!