No submission coming from nextjs forms

[milosturek]

Hello,
I’d like to ask for a help with forms issue. I have two different forms on my site (https://safarikovi-v2.netlify.app/) and I’m not receiving any submissions from it. I went through the forums and the forms debugging guide, but no luck. So far here is what I have tried:

• I removed the redirect from action (previously had action=‘/success/’ and the end slash was forcing the redirect
• I checked the markup, I can see the form there, data-netlify tag is gone
• I manually added a hidden input: because I didn’t see it rendered on the page
• I’m using data-netlify=“true”
• all my input fields have unique name attribute
• form itself has a name attribute
• Netlify console correctly detected both of my forms (with names voucher and course), I can see both forms in my UI, just no submissions are there
• when I submit the form, I see the POST request to the success page. POST request has all required fields in body, including the form-name field

I’m in SSR mode: (X-Nf-Render-Mode: ssr)

Any idea what I might be missing?

Thank you.

[clarnx]

Hi @milosturek , thanks for the post.
Kindly check the blog post below if you have not done so already.

Add a Netlify-powered contact form to your Next.js site

If the above does not help, If possible can you share a code snippet of your form or a repository to your site for me to help with the debugging.

Thanks.

[milosturek]

Hi @clarnx,
thanks a lot for your reaction. I have read the article and also several posts here on the forums about debugging the forms issue, but so far no luck.

Here is my form: gist:8aefd5e923a1f45175e72fb67f2c6a83 · GitHub

It gets detected by netlify:

and I can even see the POST data in the request (here are some screenshots from chrome console)

It seems like everything works correctly, only the submissions never arrive. I have checked the spam submissions too, nothing there.

Thanks again!

[Melvin]

Hi @milosturek,

Thanks for the follow-up.

Have you seen the Support Guide here:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

The section linked explains what to look for when the form submits properly, but nothing shows on the UI. If you could give that a read and see if the solutions provided solve the issue.

[clarnx]

Hi @milosturek in addition to the resource shared by @Melvin , also change your form inputs to an uncontrolled input.
What I mean is that remove all the onChange props on the inputs to turn it to an uncontrolled input to see if it works.

@milosturek

I have read the article

The article does not use onChange props. However if you want to use onChange props and set the state for each input field then you have to submit the form using the JavaScript / Ajax method to submit the form.

If you still want to use the JavaScript method to submit the form then kindly check the link below.

Forms setup

[milosturek]

Hi @clarnx and @Melvin,
thank you both for your help. The solution was indeed to implement submitting in TypeScript, as mentioned in one of the guides. I could not remove onChange handlers because I need it for validation.

Best regards

Milos