Netlify Form submissions now failing with 405: 'Method not allowed'

Support
1

Hi there,
Hoping someone can help with the following issue we have seen introduced to our Netlify form usage.

From having our 1 contact form working, the past week has seen it fail on submissions with a 405: ‘Method not allowed’ response on the result of a POST request over fetch.
Please see for yourself on https://www.rowsehoney.co.uk/contact

The deploy log seems to show that it still detects the form.

We use next.js and can confirm the form attribute of data-netlify=“contact” remains in place, and the POST via a fetch remains unchanged from when it was working.

Our fetch request can be simplified to the following:

fetch('/', {
 method: 'POST', 
 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
 body: 'form-name=contact&name=Andy&number=1&email=andy%40example.com&message=test&gdpr=1', 
})
.then(responseFromServer => console.log('responseFromServer',responseFromServer))
.catch(networkError => console.error('networkError',networkError))

Please let me know if there are any other details I can provide to help with this.

2

Hi @AlfieB,

I believe this is because your home page is rendered using ISR.

Would you try to deploy a static HTML page in your site and post to that URL?

3

Adding a simple clone of just the form and fields in html and adding that file to the public folder that gets statically served, followed by referencing this url in the fetch did the trick.
I now understand why ISR won’t work without a solution like this as there is no file in the public directory on deploy to map an action url to, as such files only get created and served via the next.js express service, rather than statically built.
Thanks @hrishikesh

4

Hey @AlfieB, I am facing the same issue here, and I am unsure how you solved it.

“followed by referencing this URL in the fetch did the trick.” – Could you gently clarify what you mean by referring to the URL in the fetch?

Thanks in advance.

-L

5

Hey @LLawiet,

@AlfieB means that, they created a static HTML file and in their fetch() call, they made a request to that file.

6

I am also having this issue and am looking for a solution.

I’m a bit at a loss as to how to implement that HTML file in the public folder.

I did something like this:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Static Form</title>
  </head>
  <body>
    <form name="contact" data-netlify="true" netlify-honeypot="bot-field" hidden>
      <input type="text" id="name_field" name="name_field" />
      <input type="text" id="email" name="email" />
      <input type="text" id="company_name" name="company_name" />
      <select name="company_type" id="company_type" />
      <input type="checkbox" id="accept_legal" name="message" />
    </form>
  </body>
</html>

Is that what you guys mean? Then calling fetch to the name of the file like so:

fetch("/filename.html", {...rest})
7

Yes @ecam900, that is what is meant (though you don’t need the .html for the path.)

1 Like
8

This worked well! Thank you so much.

@coelmay - I did need the .html in the path, because if not nextjs thinks it’s a page and it didn’t work. Thank you for confirming so quickly, though! Saved me.

9

Hi @hrishikesh, thank you for clarifying that but I am still unsure on how the form would be posted.

Let me give you some more context. In my case, the page is running with NextJS and ISR. The form is submitted with an Ajax request inside of Formik:

<Formik
        initialValues={{
          name: "",
          email: "",
          subject: "",
          message: "",
        }}
        onSubmit={(values, actions) => {
          fetch("/", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: encode({ "form-name": "contact-form", ...values }),
          })
            .then(() => {
              setSend(true);
              setTimeout(() => {
                setSend(false);
                actions.resetForm();
              }, 5000);
            })
            .catch((error) => console.log(error))
            .finally(() => actions.setSubmitting(false));
        }}
      >

I don’t understand how fetching the static HTML form (with a “GET” request) would actually POST the form to “/” where is captured by Netlify.

Thank you so much for your help.

10

Hey @LLawiet,

I am not sure what gave you the idea that we’re asking you to send a GET request. You indeed have to send a POST request, except the target URL to which you send a request should be a static file without any redirects or server-side rendering in place.

So, if you’re using ISR on your home page, this would not work if you do something like:

fetch("/", {})

You need to create a static file and post to that. It could also be your favicon like:

fetch("/favicon.ico", {})

and it would still work. The only requirement is that the file should be static, and non-redirected.

2 Likes
11

Hey @hrishikesh,

Thank you so much for taking the time to answer. The form is now working with ISR :slight_smile:

What made me confused is when @AlfieB was talking about the form.html so in my head, I was thinking: how is a post request made on index.js is going to reach a form on another page? :exploding_head:

I was able to understand that the file doesn’t matter when you said to post to favicon.ico

Still, making a POST request to a favicon icon sounds mind-blowing to me!

Cheers,
L