Hi!
I have a website that is a Gatsby Site. I’ve integrated Google Recaptcha into the forms, and am also using Yup. I was able to make the form work on a different site, but haven’t been able to get the same component working on this new domain. There’s slight differences to the form fields themselves, but the structure is all the same.
The problem: All submissions come through as spam and have empty fields.
Things I’ve tried:
- Every field has a name
- Yup Validation works
- Offline isn’t being used
Tech stack
- Gatsby
- Netlify
- Yup
- Rebass
- Google Recaptcha
You can see the values being passed in the Post in the console.
const onSubmit = (values, e) => {
const recaptchaValue = recaptchaRef.current.getValue();
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode({
'form-name': 'contact',
'g-recaptcha-response': recaptchaValue,
...values
})
})
.then(() => {
setIsSubmitting(false);
console.log(values);
navigate(
document.getElementById('js-netlify-form').getAttribute('action')
);
})
.catch(error => {
alert('Error: Please Try Again!');
setIsSubmitting(false);
});
};
Here’s the opening
<Box
as=“form”
className=“form”
name=“contact”
onSubmit={handleSubmit(onSubmit)}
onReset={reset}
action=“/thanks”
data-netlify=“true”
data-netlify-recaptcha=“true”
sx={{
maxWidth: ‘350px’
}}
id=“js-netlify-form”
>
This is the recaptcha + submit button
{buttonText || ‘Submit’}
Any ideas? 