405 Method Not Allowed on Netlify Form. Went through the entire forum and haven't found a solution

Site: https://fabulous-griffin-dc0d9c.netlify.app/

Hi there,

I’ve set up a form on this site exactly the same way I’ve set it up on past sites, and I’m hitting a wall trying to figure out this 405 error. I’ve been through every other post in the forums regarding the same problem without any luck. Here’s my form code:

<form
              className={styles.form}
              name="contact-form"
              method="POST"
              data-netlify="true"
              netlify-honeypot="bot-field"
              action="/success"
            >
              <p className={styles.hidden}>
                <label>
                  Disregard if you are human:
                  <input name="bot-field" />
                </label>
              </p>
              <input type="hidden" name="form-name" value="contact-form" />
              <div className={styles.inputLine}>
                <div className={styles.input}>
                  <label for="name">Name</label>
                  <input type="text" id="name" name="name" />
                </div>
                <div className={styles.input}>
                  <label for="email">Email</label>
                  <input type="email" id="email" name="email" />
                </div>
              </div>
              <div className={styles.inputLine}>
                <div className={styles.input}>
                  <label for="phone">Phone</label>
                  <input type="tel" id="phone" name="phone" />
                </div>
                <div className={styles.input}>
                  <label for="facility">Facility</label>
                  <input type="text" id="facility" name="facility" />
                </div>
              </div>
              <div className={styles.inputLine}>
                <div className={styles.input}>
                  <label for="address">Address</label>
                  <input type="text" id="address" name="address" />
                </div>
                <div className={styles.input}>
                  <label for="city">City</label>
                  <input type="text" id="city" name="city" />
                </div>
              </div>
              <div className={styles.stateZip}>
                <div className={styles.input}>
                  <label for="state">State</label>
                  <input type="text" id="state" name="state" />
                </div>
                <div className={styles.input}>
                  <label for="zip">Zip</label>
                  <input type="number" id="zip" name="zip" />
                </div>
              </div>
              <div className={styles.input}>
                <label for="message">Message</label>
                <textarea id="message" name="message"></textarea>
              </div>
              <button className={styles.button} type="submit">
                SEND
              </button>
            </form>

Here’s the response and payload:

Request URL: https://fabulous-griffin-dc0d9c.netlify.app/success
Request Method: POST
Status Code: 405 
Remote Address: 50.18.215.94:443
Referrer Policy: strict-origin-when-cross-origin
age: 0
allow: GET, HEAD
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-type: text/html; charset=utf-8
date: Wed, 12 Apr 2023 22:14:40 GMT
etag: "m8yhwzd0873bg"
server: Netlify
strict-transport-security: max-age=31536000; includeSubDomains; preload
vary: Accept-Encoding
x-nf-render-mode: ssr
x-nf-request-id: 01GXVRJ0TNSPVGXRSYKQ719HFQ
x-powered-by: Next.js
:authority: fabulous-griffin-dc0d9c.netlify.app
:method: POST
:path: /
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
cache-control: max-age=0
content-length: 95
content-type: application/x-www-form-urlencoded
origin: https://fabulous-griffin-dc0d9c.netlify.app
referer: https://fabulous-griffin-dc0d9c.netlify.app/
sec-ch-ua: "Chromium";v="112", "Google Chrome";v="112", "Not:A-Brand";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
sec-fetch-dest: document
sec-fetch-mode: navigate
sec-fetch-site: same-origin
sec-fetch-user: ?1
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Payload:

form-name: contact-form
name: Zac
email: z*******@gmail.com
message: Testing the form!

Any help would be appreciated!

Thanks.

Hi @ZacRogersWorks, thanks for the post.

First of all kindly change the all the label property from for to htmlFor.
Secondly make sure you have a file in your pages/ directory, called success.js since the value for the action property is /success

The content of the success page should be a react component that returns JSX.
For example

export default function Success() {
  return <div>Form successfully submitted!</div>
}

You might also be getting the error you stated because it is possible the form is rendered on a page that is using ISR ( Incremental Static Regeneration).
Correct me if I am wrong.

Once you make the changes and redeploy, let me know the outcome.

Thanks.

Hey @clarnx , thank you for the reply.

The success page is working properly - you can go to /success on the deployment without issue. And this is 100% static, no ISR.

I updated the labels to htmlFor (thank you for pointing that out). But still experiencing the same 405 error. I’m baffled by this. Any other ideas on what it could be?

1 Like

@clarnx so in the response, it’s showing that only GET and HEAD are allowed. What can I do to allow POST?

1 Like

Hi @ZacRogersWorks,
Thanks for the feedback.
Kindly remove the method attribute on the form and try again to see if it works.

If the above does not help, if possible can you please share a repository of your site for me to help with the debugging.

Thanks.

Tried removing the method attribute, no error now, but no submission received.

Here’s the branch I’m testing on: GitHub - ZacRogersWorks/hss at form-test

Hi @ZacRogersWorks, Kindly set the method property back with the value POST and then use Next.js router instead of NavigationPreloadManager after the form has been submitted in your submit handler.

Also is there a reason why you are using NavigationPreloadManager?

Let me know the outcome.

Thanks.

@clarnx The handleSubmit function that the NavigationPreloadManager is within isn’t being used, just leftover from a solution I was trying out while troubleshooting this.

I just tried again - submitting via js using Next Router and now I can at least get to /success, but I’m still getting a 405 in my console.

Sorry for my jumble of JSX in the single file in the repo, this is a project I was supposed to finish in 24 hours for a client.

I just built another site trying to use Netlify forms and I’m getting the same issue even though I’ve set it up identically to sites in the past that did and still does work.

1 Like

Hi @ZacRogersWorks, thanks for the feedback. At this point I can’t tell for sure what might be causing your form to fail since all Netlify services are currently operational with no incidents.

I suggest you follow the guide below step by step as a test project to rule out if the problem is from your code or from Netlify’s end.
Creating a small test project using the guide below will help you with the debugging to know the source of the problem from a bottom up approach.

Thanks.

Hello

I’m having a similar issue.

The project below just added a form to the one created with create-next-app, but “405 Method Not Allowed” is displayed.
https://darling-sunflower-6a22f8.netlify.app/

I’m using next.js version 13.3, isn’t it a version-related error?

If you are using Next 13.3 with app directory, note that Next 13.3 with app directory format is still in beta. If possible use the pages directory format instead of the app directory format to see if it works.

Thanks.

Can confirm that downgrading to Next 13.1 resolved this issue for me.

2 Likes

thanks for sharing this with the community!

1 Like