I am just trying to load a Netlify form, all we have done is change to name of the form and added two selects however the for doesnt now register in Netlify and redirect loads a 405 not allowed.
I cant see what would have changed. The form is at the bottom and in the become a member section.
The better the post - the faster the answer.
Hi, @snips11. I took a look at the URL you shared and that page is rendered by Next.js incremental static regeneration (ISR) function. I can tell by the response headers:
$ curl --compressed -svo /dev/null https://www.vibe-nation.com/ 2>&1 | egrep '^< '
< HTTP/2 200
< age: 77521
< cache-control: public, max-age=0, must-revalidate
< content-encoding: gzip
< content-type: text/html; charset=utf-8
< date: Sun, 04 Dec 2022 10:29:24 GMT
< etag: "2f2ff-eMzSyof1nfwc5bR4tkV28KpCmL0-df"
< server: Netlify
< strict-transport-security: max-age=31536000
< vary: Accept-Encoding
< x-nextjs-cache: REVALIDATED
< x-nf-render-mode: odb ttl=60
< x-nf-request-id: 01GKGMVNADV2XJCE1MCCJ7KBTF
< x-powered-by: Next.js
<
Is it this line which let’s me know this is an ISR function:
< x-nf-render-mode: odb ttl=60
The way that the functions handler is created is by parsing the HTML in the post-processing on the build. As this page is handled by a function, there is no HTML file to process. The solution for this is to manually create an HTML file which contains that form and then include that HTML file in the deployed site.
As long as the form the function makes exactly matches the HTML form, the form in the function will work.
Also, if you make changes to the form the function creates, please remember to also update the HTML-only version of that form at the same time.
If there are other questions about this, please let us know.
Thanks Luke, will give that a go. Strange that this used to work and was still an ISR but added an input and it stopped
Hi @snips11 
, welcome back to the forums! 
Give a go and let us know how you get on? We appreciate the feedback and stopping by. Happy building and good luck. 
Sorry to re-open an old issue, but I tried this solution and can’t get it to work.
I made a super simple form in my TSX component:
<form
name="contact"
method="POST"
data-netlify="true"
action="/"
>
<input type="hidden" name="contact" value="contact" />
<p>
<label>
Your Name: <input type="text" name="name" />
</label>
</p>
<p>
<label>
Your Email: <input type="email" name="email" />
</label>
</p>
<p>
<label>
Message: <textarea name="message"></textarea>
</label>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
I made a file called netlify-form.html in my public directory that looks like this:
<form name="contact" method="POST" data-netlify="true" action="/">
<input type="hidden" name="contact" value="contact" />
<p>
<label>
Your Name: <input type="text" name="name" />
</label>
</p>
<p>
<label>
Your Email: <input type="email" name="email" />
</label>
</p>
<p>
<label>
Message: <textarea name="message"></textarea>
</label>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
It detects the form in the Forms section of the dashboard, but I still get Method Not Allowed upon submit (and no submission to the form in the dashboard).
Am I missing something?
@Michael_Mannucci It may make no difference in your situation, but you could try making the POST request to the page of the static form, so /netlify-form
Thanks for the suggestion.
I did the following on the TSX form
<form
name="contact"
method="POST"
data-netlify="true"
action="/netlify-form"
>
<input type="hidden" name="contact" value="contact" />
<p>
<label>
Your Name: <input type="text" name="name" />
</label>
</p>
<p>
<label>
Your Email: <input type="email" name="email" />
</label>
</p>
<p>
<label>
Message: <textarea name="message"></textarea>
</label>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
I no longer get Method not allowed, but a 404, and still nothing submitted to the form in the dashboard.
@Michael_Mannucci Can you link to the site?
Anyone trying too assist you is flying blind without being able to test it themselves.
Here you go sir, at the bottom of the page. Swapped the complicated form for the one I’m using in this example.
@Michael_Mannucci Based on a quick test the issue appears likely to be much more Next related than Netlify Forms related, and thus I can’t help you.
I’ve confirmed the page does exist:
However when posting via your form (or running a cURL post) I get:
And the response is an entirely different Next based 404 page:
Thanks for looking into it. I am hoping someone from the Netlify support team can shed some light.
FYI I turned off ISR for now to get it working, but I will need ISR. So I am hoping someone can help me with this.
You simply need to POST to a static path like /favicon.ico.
I can confirm that works… but correct me if I am wrong, this means I cannot have a custom thank you page? I tried making a thank-you.html page and posting to that, and the form worked, but it still loaded the default Netlify thank you page.
And more importantly, some pages still submit the form and go to /thank-you.html, but this is what is displayed:
‰PNG IHDR szzô pHYs šœariTXtXML:com.adobe.xmp :BGªIDATX…Å—;hAÇ—ÄøDЬĀ1>P2:h#>*µÐFÐ6Í"ølÄS¥±I e DˆÃ JP"E…!B”˜hó<‹Ý=×uönïÎ=ÿÕÝÌÿ›ÿ¾ýöÛ™ h+kf`‰k¾Ì3À¤fÚE¨‹ ¼\©Püh+?=@—f$¯‰áoÿ—â>6ç·ÚÊ“Å lIÁ@€@·¶ò@&:«\|OÑ@€Q Ù•ÍUaX ¬þŸ]šªh ç20–0x/p˜¯ÀÀOW ° ¿)a²@V[ù¸ 4–(¾Lü•%Ì ð°Hð@ˆÿ8L”hà©f.®œÞ$1à›È{€7݉kÓˆ”0£À.à2ðXˆPž9bðêâCñ[J˜>p4"´•5ÀJÿïœf²w Ð l¡ôG”0³‰ ” må*à1°;4¼\:•0ù7'®*‚f xîa®‡Å!… h+e€N Ã1Ý WÂäë¤ me+Ð,õ‡æ{J˜©þ6 eh-°ì`‡fb$ÚÊSÀE`“cz¯ñ„ùµÀ9àjÜš!¬na!’me½¿ƒcØ©„yŠiîíE„£Ø „Ê¡¶2ƒ·³Bâ‹À`(æ ðº qð_Ópº:€£E‚†•0SÚÊ&à&p¸ á à?¿r‡ñ …n‡p‹¡] ó<ÈÀ¾„ fð¾•bx¿eQ9Ï°ô÷„À@[• t?i 㸯„y’7à7‘–*‰¿'RC5xm6•¯b/€ýJ˜¯QËR Ç»’ %̧èd éì~ èÃ;[ö(a~ăF´ ¨/Sl¯AÍã]ŧ%L.Ið/#?¸Z”8IEND®B‚
For example, this page’s form at the bottom results in the above gobbledygook (but the form still works): https://gobetterwaytest.netlify.app/services/lawn-mowing
You can, but then you need to make sure the thank you page is a statically generated page. It must exist as a static file in your site’s output folder. If not, it won’t work.
@hrishikesh Was that not the case with the file I was inspecting in this post:
I’d presumed it was because @Michael_Mannucci had said:
I just tried:
curl --data-raw "form-name=contact&contact=contact&name=test&email=tesrt%40gtest.com&message=test" -H "content-type: application/x-www-form-urlencoded" "https://gobetterwaytest.netlify.app/netlify-form.html"
and I’m getting a 200 with Netlify’s form success page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Thank you!</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: rgb(14, 30, 37);
color: white;
overflow: hidden;
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 22px;
line-height: 24px;
}
.main {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.card {
position: relative;
display: flex;
flex-direction: column;
width: 75%;
max-width: 364px;
padding: 24px;
background: white;
color: rgb(14, 30, 37);
border-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(14, 30, 37, .16);
}
a {
margin: 0;
text-decoration: none;
font-weight: 600;
line-height: 24px;
color: #007067;
}
a svg {
position: relative;
top: 2px;
}
a:hover,
a:focus {
text-decoration: underline;
text-decoration-color: #f4bb00;
}
a:hover svg path{
fill: #007067;
}
p:last-of-type {
margin: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="card">
<div class="header">
<h1>Thank you!</h1>
</div>
<div class="body">
<p>Your form submission has been received.</p>
<p>
<a id="back-link" href="/">← Back to our site</a>
</p>
</div>
</div>
</div>
<script>
(function() {
if (document.referrer && document.location.host && document.referrer.match(new RegExp("^https?://" + document.location.host))) {
document.getElementById("back-link").setAttribute("href", document.referrer);
}
})();
</script>
</body>
</html>
So at least right now, this appears to be working. Since you got a 404 in the past, it’s likely that either of the following happened:
@hrishikesh Your second guess is the correct one:
Form name was incorrect or missing
Checking the cURL that I ran, (which was extracted from the browser submission for /netlify-form.html), indicates that the form was previously missing the form-name.
I had to take a break from this for some other stuff but am returning to it.
I am still unsure what is wrong. I’m not following what you two have said is the issue. The form name is wrong?
I have a bunch of dynamic pages which render the form name dynamically, since the form on those dynamic pages is linked to the page itself.
Do I need to make a static form in my output folder for each one?
You had a static form file at https://www.vibe-nation.com/netlify-form.html which seems to no longer exist. It turns out that when I tested that form it didn’t have a form-name (but later when @hrishikesh tested it, it did) - obviously you had changed it in between.
The form name is required.
Yes, Netlify will not detect dynamic forms, nor can you submit forms with form names that it has not detected.