Can you use netlify-recaptcha?

[ev-church-website]

Your example works great! However I'm wondering how to integrate

as described here. https://www.netlify.com/docs/form-handling/

Currently I'm getting a full page response when I try to submit the form request which includes a recaptcha. As a workaround I wanted to put one on the page up front.

[ryanwiemer]

@imorente , I too would like to use the explicit recaptcha option. I couldn't seem to get it to work. Any additional guidance or documentation on this specifically for a Gatsby website?

[thekevinbrown]

From the docs:

This will not work with React-based sites, including Gatsby. This is because React will not execute script tags injected into the DOM.

It looks like Netlify will need to do more work on this in order to allow us to use it from React.

[coreygo]

Hopefully this is something that Netlify can provide a workaround for. Checking to see if https://github.com/appleboy/react-recaptcha will work temporarily, not sure. The Netlify Honeypot option, while helpful, definitely lets too much spam through… I just created a new site for a client, 48 hours later 120+ messages, all spam.

[ryanwiemer]

@coreygo

I have reached out to Netlify a couple of times about this topic. I was chatting with their support as recently as yesterday but there is no solution as of yet. They just mentioned they will look into more spam solutions but I wouldn't hold your breath.

They did however mention that if you go over the 100 submission monthly limit due to spam to reach out to them directly so that you don't get charged.

As for something like https://github.com/appleboy/react-recaptcha I don' know if that would be possible with Netlify alone. Unless I am mistaken you would need to validate the captcha response with the server somehow which I don't think you could do that.

If you find a solution that works please share with the group. 😄

[acarl]

I ended up using Formspree as a workaround for now, but I really would have liked to integrate with Netlify instead. Formspree works great with Gatsby and has recaptcha.

[ryanwiemer]

@acarl thanks for sharing! I agree though that I would prefer to use Netlify if possible. Particularly since it is a paid feature now I feel like my expectations are a bit higher for their form functionality. Good to know though that Formspree works with Gatsby.

[coreygo]

@ryanwiemer Good to know and I definitely agree, especially if they plan to charge $19/mo. That's pricey compared to Webflow or WordPress hosting etc.

I pinged Netlify support for my client, hopefully they'll do a one time credit since only 2 of the 120+ submissions are legit.

I could swear I set the honeypot field up correctly on the client's two forms and also made some fields required but he's still getting invalid form submissions with missing fields. Might try Formspree.

[imorente]

Netlify announced in their newsletter yesterday the possibility to add a custom reCAPTCHA. I tried it out using react-google-recaptcha in this example and it seems to work 🎉

I updated the README with the steps I followed in case anyone else wants to try it out.