Netlify Forms Issue with Next.JS

[SoyMilkIsOk]

My app: gregarious-babka-d4c8fa.netlify.app
My git: GitHub - SoyMilkIsOk/terpmetrix-home-page

I can’t get my forms to connect/be automatically detected on my Netlify app. I was able to before I updated to Next 14+. Not sure what could be causing the issue since the code I have seems to match directly to the code that previously worked. See Hero.js or giveaway/maikoh-1.js for examples that don’t work.

Thanks in advance for the help!

[nathanmartin]

@SoyMilkIsOk You may already be aware but the form debugging support guide is 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…

[SoyMilkIsOk]

Just went through and tried every solution in that post and there is nothing that works. Not sure why updating Next.Js 13->14 would have this effect. Here is my code before (worked before updating). See my git for current code.

[SoyMilkIsOk]

This is my current non-working code.

[SoyMilkIsOk]

And here is my forms.html file in the public folder.

Edit: Adding this file did get my form recognized in the UI but the submissions are not being submitted.

[nathanmartin]

@SoyMilkIsOk Adjusting your forms.html so it:

• is visible (so I can use it)
• has a submit button (so I can use it)
• posts to known static file route /forms (so Netlify receieve it)

I get:

Which is the default Netlify success page, and I’m sure you’ll find my submission in your dashboard.

The crux of it is that you must post to a route which is a static file.

You can obviously still end up on your /success route, but you would probably want to do that by submitting your form with ajax to the static route, then redirecting upon success to your actual success route.

[nathanmartin]

For anyone encountering this thread that doesn’t understand from the explanation given above, Netlify have released some additional resources which demonstrate:

Netlify Form Submission Not Working

There’s a new example on how to use forms (and other things) with Next.js App Router - see live demo which also explains the solution. The source for the form is here. The idea is: The form definition is in a static file - this is only used for Netlify detecting the forms on deploy The form itself has an onSubmit handler in code rather than an action - the handler makes a fetch request to submit the form.