Issue with google recaptcha when use data-netlify-recaptcha="true" attribute in nextjs+prismic+formik

[ravi_dev]

I’m facing an issue integrating Netlify forms into a Next.js + Formik + Prismic setup. When I include data-netlify-recaptcha="true" in the forms, Netlify forms don’t accept data and give me a 303 error. Without data-netlify-recaptcha="true", Netlify forms work fine. I used the react-google-recaptcha library to integrate Google reCAPTCHA into my Next.js app.

Attached below are screenshots of the code. Can you please help me resolve this?

[ravi_dev]

other screenshots

[ravi_dev]

[ravi_dev]

[nathanmartin]

I’ve not looked at any of your code, nor can I provide you project specific instruction, however:

@ravi_dev

When I include data-netlify-recaptcha="true" in the forms, Netlify forms don’t accept data and give me a 303 error.

Without data-netlify-recaptcha="true", Netlify forms work fine.

This is the behavior I would expect if it’s not implemented correctly.

With data-netlify-recaptcha="true"

• Netlify requires the recaptcha value to be in the submission data
  (it is mentioned as g-recaptcha-response in the documentation)
• Netlify will ignore form submissions that haven’t passed recaptcha

Without data-netlify-recaptcha="true"

• There’s no recaptcha, so your form works

I can see mention of you intentionally sending g-recaptcha-response to /__form.html in your first screenshot.

Have you checked the network tab upon submission to see what is being sent?

[ravi_dev]

when i submit form , api send response 303

I attached the payload screenshot below, kindly check

[nathanmartin]

@ravi_dev At first glance it looks correct enough to me.

The main parts are that the:

• POST is being made to the static /__form.html page
• form-name exists and is correct
• g-recaptcha-response is correct when recaptcha is on

Netlify’s staff will have a better idea of what’s happening.

[ravi_dev]

Thanks for the response.

When i submit the form i get 303 response. I also provide the SITE_RECAPTCHA_KEY and SITE_RECAPTCHA_SECRET in evironment variables of the site in netlify account ,May you tell me , is anything remaining?

[nathanmartin]

@ravi_dev It’ll be up to Netlify’s team to assist you further.

It’s not a system that I personally use, so there’s no impetus for me to spend any more time on it.

[hrishikesh]

What happens if you don’t use the recaptcha package? In any case, when using environment vairblaes for Next.js you need to use the NEXT_PUBLIC prefix: Configuring: Environment Variables | Next.js (nextjs.org)