@tomdilello If you post to the /contact-form route (which is a known static HTML page), and not the /success route (which is handled by next.js), it should work.
Cool I do see the submissions in the UI now. However I can’t have our users fill out this form. I need them to be able to fill out the form on the contact page listed above. The code for the above contact form looks like this.
@tomdilello I wasn’t suggesting that you have your users fill out that form, I was using it as a readily available minimum reproduction to prove that posting to a known static file route causes Netlify to receive the submission.
How you perform the actual form implementation is up to you, I’m just advising that you cannot submit the data to the /success page.
Since you’re working with Next I presume you’re familiar with JavaScript.
You could leverage some JavaScript to submit the form.
Retrieve the form values
Make a fetch call to submit them to any know static route on your site, (for example /contact-form)
Show a success message or do a redirect upon success
I don’t work with Next, so cannot advise on “Next specific ways of doing things”, but you could google around.
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.
@tomdilello The Netlify provided solution is as I’d outlined.
The reason that it’s still not working for you, (with the 405 Method Not Allowed error), is because while you’ve implemented their ajax code for the form submission, you’ve not moved your “static form” or adjusted the URL that it performs the POST to.
Their code assumes the form file is at /__contact-form.html, but that is not a file that exists on your site:
Sorry to resurrect this thread but I just noticed that file uploads are not working as expected. My code is the same as above. Is there something special I have to do?
@tomdilello It may not be the only thing that’s wrong, but I’d imagine that if you largely copied & pasted the code that Netlify provided, that the Content-Type header sent by the fetch is incorrect for your use case.
Many of the answers in this Stack Overflow suggest not adding a Content-Type header at all, so that it’s added automatically as multipart/form-data:
multipart/form-data being what you have specified against your static html form as per Netlify’s documentation here:
@luke not really. All of the examples on that page submit to /.
I was replying specifically to the post on 17 Apr about the “new example on how to use forms … with Next.js” but I see the reply function didn’t include any of the post (sorry, didn’t know, my first post).
We had a working Next.js implementation which broke when we upgraded a major version of Next.js and I spent a lot of time first in the documentation, and then combing forums before I found that example. The key of course was submitting to “known static path” (/__forms.html or wherever you place your form in the public folder) but with Next.js creating a SSG version of / I thought the application was already doing that.
So, even one line explaining that SSG doesn’t necessarily mean it’s treated as a static path would be very helpful, or even better, a link to that resource.
Apologies for the frustrated tone of my comment yesterday, I was, well, frustrated