Next.js v 14.2.4 405 Method not Allowed on Form Submission

Support
,
21

The main difference is that:
application/x-www-form-urlencoded
is not
multipart/form-data

They submit different bodies, and that’s why I’ve been very confused with your use of
new URLSearchParams(formData).toString()

See:

I wanted you to re-enable the file upload fields on the static file, both so that Netlify expects them as part of the submission, and so I could do a submission via it and show you that it works, and what the body looks like, and how it differs to what you’re currently sending.

22

the files uploads are reenabled,

body: new URLSearchParams(formData).toString()

was in the example in the docs: Next.js 13.5+ on Netlify | Netlify Docs

my form has file inputs so what i read was that headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, is the wrong header type when you have file uploads, so you add enctype="multipart/form-data" to the __forms.html file instead and remove it from the fetch. Im trying to find the right combination of what to remove/keep and its just the same end result. Ok so going with your comment, what should body: new URLSearchParams(formData).toString() be then, lets go down that rabbit hole, may as well. im using next.js v 14 so theres a subset of docs for that.

23

As expected, testing that file directly worked first try:

image
image1367×524 43.4 KB

You should see the submission in your UI.

The headers were:

image
image724×515 97.9 KB

image
image1385×409 100 KB

The body was:

image
image1860×338 144 KB

Note:
I understand that showing this “doesn’t fix the form in your Next.js website”

What it does is:

  • Prove that Netlify’s functionality works, including the file uploads
  • Proves that the issue is your implementation
  • Provides a baseline for what your own submission should look like

Checking your current form submission, the headers are:

image
image713×516 107 KB

image
image726×407 66.1 KB

The body is:

image
image1199×100 37.6 KB

Hopefully that clearly demonstrates the difference to you.

What you are sending via AJAX from your Next.js form doesn’t align with what submitting the form directly would do, it’s an entirely different Content-Type and body

24

hmm i actually dont see that form submission,

so what content type do i use or do i use one?

25

Also I forgot to mention that this documentation:

Doesn’t mention doing a file upload.

It’s why in this post:
https://answers.netlify.com/t/next-js-v-14-2-4-405-method-not-allowed-on-form-submission/123584/14

I referenced:
https://docs.netlify.com/forms/setup/#submit-file-uploads-with-ajax

Also why I quoted:

fetch("/", {
  body: new FormData(event.target),
  method: "POST",
})

As checking stack overflow on this post:
https://stackoverflow.com/questions/35192841/how-do-i-post-with-multipart-form-data-using-fetch

Indicates the recommendation is to not supply a Content-Type, which aligns with the documentation.

26

I’ve not double-checked precisely what is defined on the static form, but it is giving every indication of working:

image
image1344×1123 272 KB

I note that form has recaptcha on it, in which case you’ll need to make sure you’re submitting that too:

27

I received 2 more form submissions, theres a div in both the __forms.html file and my next form:
<div data-netlify-recaptcha="true" /> I added <input type="hidden" name="bot-field" /> as well.

my build was failing for other work i was working on, i finally sorted that out and was able to publish the changes with my form. I get a successful submission but there must be a delay in when i get a notification for the form, i dont see my own form submission in netlify.

Also in the network tab i dont see the payload anymore

28

Excellent, if one of those submissions is the one I screenshot above, and it contains the test PDF file, then everything is as I’d expect.

I’m not sure what you mean by this.
How did you test it?

29

i made a form submission on the actual website, i got my success message but i havent seen it show up in netlify form submissions list. But yes, your form submissions do have 2 test pages attached as pdfs.

30

Ok, I wasn’t aware you had changed the Next.js based form.

Testing that I see the same thing as you’re no doubt seeing:

image
image1068×175 33.7 KB

Which obviously looks like it’s working, but I suspect it’s still not correct and that you won’t ever receive those submissions.

Things to try are:

Disable the recaptcha

Check if it works when the recaptcha is disabled on the form.
This isn’t me saying “you can’t have recaptcha”, it’s just a basic process of elimination.

Logging the values

Check what is inside the form data.
If you have recaptcha enabled, and aren’t sending g-recaptcha-response, then it won’t work.

This is in the documentation:

The Netlify servers will check the submissions from that form, and accept them only if they include a valid g-recaptcha-response value.

This is also suspicious, because I noticed the same:

However I personally don’t send multipart form data frequently enough to have any strong opinion on what the browser should/shouldn’t be displaying on any given request.

But it is an indication it probably doesn’t match what the static form sends when it is submitted.

31

Ok I removed the recaptcha but kept the honey pot field and the form sent immediately and i got the email notification. im going to try add <input type="hidden" name="g-recaptcha-response" /> to the nextjs form and bringing back recaptcha to see what it does.

32

Excellent, so far we’ve solved three entirely separate issues:

  • The form submission URL
  • The form-name
  • The form Content-Type and body

It seems the last issue left is getting the recaptcha going from your Next.js based form.

I’ve already confirmed previously, (multiple times), that it worked with Netlify’s default implementation on the static form.

Since you have a more advanced use case, you may need to follow the Custom reCAPTCHA 2 docs:
https://docs.netlify.com/forms/spam-filters/#custom-recaptcha-2

33

Progress indeed! I got that 303 redirect thing as before when i added back data-netlify-recaptcha=“true”. How secure is just a honey pot? If thats enough ill probably just leave it at that. Also i never actually saw a recaptcha appear, so im that explains it.

34

It’s not really security, but more effectiveness.

They aren’t particularly effective these days, you can expect to inevitably start receiving spam.

Adding the data-netlify-recaptcha="true" to the static form causes Netlify’s post-processing to process the form in a way where it can only be submitted with a valid g-recaptcha-response value.

The static form is inserting recaptcha and doing this, which you can see if you make it visible:

image
image1354×178 20.3 KB

If it’s enabled, you need to make sure your Next.js form does the same.

35

i added <div data-netlify-recaptcha="true"></div> to my nextjs form and tried adding <input type="hidden" name="g-recaptcha-response" /> as well to it, i thought that would add it to the form data like the other hidden files? To start I dont see the recaptcha in the first place.

36

@artsycoder533 It will not.

As I mentioned above, it’s based on Netlify’s build post-processing which parses plain HTML.

It won’t parse or do anything to your Next.js files, which is why I said:

Since you have a more advanced use case, you may need to follow the Custom reCAPTCHA 2 docs:
https://docs.netlify.com/forms/spam-filters/#custom-recaptcha-2

Where your “more advanced use case” is “your site is Next.js”

It becomes your responsibility to implement recaptcha, however that is done in the context of a Next.js site, but to ultimately ensure that a valid g-recaptcha-response value is sent.

37

Gotcha, its not accepting my netlify domain name. the site isnt hosted so maybe ill worry about this later and roll with the honey pot for now. thank you for all your help!

38

Hi guys!
Thanks for your long discussion I also solved a problem with uploading files :+1:

Thank you :blue_heart:

1 Like