Form submission failing when using reCaptcha v2

Hi,

So I have this form: https://upbeat-wilson-ca4160.netlify.com/contact/ . The site is build with Gatsby and if I remove captcha from it, it works just fine, and I can see form submissions in my panel. With the captcha though, not so much.

POST call returns status 303, which I understand is and issue with captcha token. However, in the body of the request “g-recaptcha-response” with captcha token is being sent. Both the environment vars are there (SITE_RECAPTCHA_KEY and SITE_RECAPTCHA_SECRET_KEY).

fetch('/?no-cache=1', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: encode({
                'form-name': 'contact',
                'g-recaptcha-response': captcha
                ...data
            })
        })

Just in case it had something to do with cashing I disabled the offline plugin.

And I’ve added the required params to the form, as per documentation:

        onSubmit={handleSubmit(onSubmit)}
        className={contactStyles.form}
        name="contact"
        method="post"
        data-netlify-recaptcha="true"
        netlify
        netlify-honeypot="bot-field"
        data-netlify="true"
        data-netlify-honeypot="bot-field"
        action="/"

I have the hidden fields:

        <input type="hidden" name="bot-field" />
        <input type="hidden" name="form-name" value="contact" />

And this is my reCaptcha

       <ReCAPTCHA
  			name="g-recaptcha-response"
  			ref={captchaRef}
  			sitekey={RECAPTCHA_KEY}
  			onChange={(val) => {
  				setCaptcha(val);
  			}}
  		/>

I’m not sure what I’m doing wrong here, and how to debug further.

Any insights please?

Unfortunately, I’m not able to check out the form- looks like maybe you’ve deleted the site and/or account? If you want to give it another shot, we’d be happy to try and troubleshoot! Others who find this post about the 303 error with reCaptcha 2 may find this related response helpful:

Sorry, I’ve changed the domain. Here’s the updated link to the site:

I’ve since reinstated the offline plugin. I didn’t see it making a difference

Thanks for sharing your new site. In digging into this, I’m wondering if this snippet from Google’s reCaptcha docs might be helpful:
https://developers.google.com/recaptcha/docs/display#automatically_render_the_recaptcha_widget

I see that you have something like this in your <head> tag:
<script src="https://www.google.com/recaptcha/api.js" async defer></script> so that’s good to go :white_check_mark:

In the body of your form, could you try adding this:
<div class="g-recaptcha" data-sitekey="your_site_key"></div> <br/>

And delete 'g-recaptcha-response': captcha from your POST body in your JS? Alternatively, you could try changing 'g-recaptcha-response': captcha in the POST to 'g-recaptcha': your_site_key.

Let me know how that goes- fingers crossed!

That worked!

Thank you very much :smiley:

Awesome, glad to hear!