Hi Guys I’m trying to put google reCaptcha v2 on my gatsby site https://frustratedcoder.netlify.app/contact
I already followed this links and tutorials
https://github.com/imorente/gatsby-netlify-form-example
https://github.com/sw-yx/gatsby-netlify-form-example-v2
https://answers.netlify.com/t/form-submission-failing-when-using-recaptcha-v2/9903
Actually the google recaptcha appears and I also getting the value from it, the Problem is that when I tried any of the codes on the example, it can just bypass the captcha and can just submit the form without checking the captcha box. Just to be clear even without the captcha value from the box the form can be submitted. What i’m doing wrong?
Here’s my code
constructor(props) {
super(props)
const { data } = props
this.recaptchaRef = React.createRef()
this.state = {
data,
}
}
handleSubmit = async e => {
e.preventDefault()
const form = e.target
const recaptchaValue = await this.recaptchaRef.current.getValue()
if(recaptchaValue === null || recaptchaValue === "")
console.log("no val")
console.log("RECAP VALUE")
console.log(recaptchaValue)
await fetch("/?no-cache=1", {
method: "POST",
headers: { Accept: "application/json","Content-Type": "application/x-www-form-urlencoded" },
body: encode({
"form-name": form.getAttribute("name"),
'g-recaptcha': RECAPTCHA_KEY,
"g-recaptcha-response": recaptchaValue,
...this.state,
}),
})
.then((val)=>console.log(val))
.then(() => navigate(form.getAttribute("action")))
.catch(error => alert(error))
}
Form
<form
className="contact-form"
action="/"
name="contact"
method="POST"
data-netlify="true"
data-netlify-honeypot="bot-field"
data-netlify-recaptcha="true"
onSubmit={e => this.handleSubmit(e)}
>
<input hidden name="bot-field" />
<input type="hidden" name="form-name" value="contact" />
<p>
<label>
Name
<input
type="text"
name="name"
required
/>
</label>
</p>
<p>
<label>
Email
<input
type="email"
name="email"
required
/>
</label>
</p>
<p>
<label>
Subject
<input
type="text"
name="subject"
required
/>
</label>
</p>
<p>
<label>
Message
<textarea
name="message"
required
></textarea>
</label>
</p>
<ReCAPTCHA
name="g-recaptcha-response"
ref={this.recaptchaRef}
sitekey={RECAPTCHA_KEY}
/>
<p className="text-align-right">
<button className="button" type="submit">
Send Message{" "}
<span className="icon -right">
<RiSendPlane2Line />
</span>
</button>
</p>
</form>
And the domains I registered