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

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?

other screenshots

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

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?

when i submit form , api send response 303

I attached the payload screenshot below, kindly check

@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.

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?

@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.

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 (