Netlify Forms: Page Not Found 404 on Submit

[tcapozza]

I am having an issue with Netlify forms. I have successfully installed a form on a separate website of mine that is hosted on Netlify, but can’t seem to get this one to work below.

When I hit submit, I get a PAGE NOT FOUND, 404 error.

Site name: projectpassive.netlify.app

    <form name="Contact" method="POST" netlify data-netlify="true" data-netlify-honeypot="bot-field">
  <input type="hidden" name="form-name" value="contact" />
    <input type="text" name="name" placeholder="Name"/>   
    <input type="email" name="email" placeholder="Email"/>
    <textarea name="message" placeholder="Message"></textarea>
    <div class="form-btn"><button type="submit">SUBMIT</button></div>
</form>

The site is built on Vue - I have added the form code to the public index as well as in the Vue component. I have all of the proper fields in there.

Please let me know if you need more information to dissect this issue.

Thanks!

[perry]

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form.

[tcapozza]

Hi perry,

I have gone through the support guides and read through the forums - nothing has worked.

Both links below were built by me. I got the form working on trevorcapozza.com but when I copy/pasted the code into projectpassive.io, it does not work. Everything else is the same.

projectpassive.io
trevorcapozza.com

[tcapozza]

Hi perry,

Any idea why two websites with identical code regarding the form produces two different results? I am stumped on this one.

Thanks

[perry]

hey there, sorry to be so slow to reply! can you show the code to us?

also, question: do both forms have separate names? they can’t be identical.

[tcapozza]

Hi Perry,

My code is in the original question. I have also attached both websites.

projectpassive.io
trevorcapozza.com

Each website is hosted on a different Netlify account so identical form names wouldn’t matter in this instance if I understand correctly.

[perry]

hi there @tcapozza - any news on this? Are you still experiencing the problem?

[tcapozza]

Hi Perry,

Yes - this problem still exists. I haven’t received any suggestions on how I might be able to resolve this.

Thanks

[hillary]

Hi there, @tcapozza

I appreciate your patience here and recognize we haven’t been able to work through this with you yet. We have been a bit underwater recently with a high volume of inquiries.

@jonsully, do you have any thoughts on this currently? Please let us know

[freddy]

Are you sure the code is correct? When hitting the submit button I’m redirected away from Vue and into Netlify’s own 404 page. This probably isn’t right, are you missing a native.prevent ?

With Vue, logically, even if it doesn’t work, it shouldn’t actually change the page.

[tcapozza]

Hi Freddy,

Please read the thread. It is the same code as on trevorcapozza.com

When you click submit, it does in fact change the page (the url does not change in either instance).

[jonsully]

Hi Trevor

Welcome to The Forums and apologies for the long support delay.

Your page, https://projectpassive.netlify.app — does it also have a custom domain name assigned to it?

–
Jon

[jonsully]

It’s not actually a Vue form in this case. Vue does indeed render the form, but it’s not hooking into the submit event or anything. Just rendering the plain HTML and letting the browser natively handle the form submission event

[freddy]

He has posted the custom domain a whopping 3 times

[jonsully]

D’oh! You’re so right! Thanks!

[luke]

Hi, @tcapozza. When Netlify’s form parser analyses a page with a <form> tag on it, our service will add a hidden <input> to the form so that when it is submitted, it includes a “form-name” field which matches the form.

On the site where this is working, you have two forms defined, “Contact” and “contact”. The “form-name” <input> is “contact” so the lower case form is the one receiving the submissions. You can see this at “Site Name” > Forms in on web UI.

For the non-working site, there is only a single form named “Contact”. Because the POST is sending “contact” it doesn’t match any forms for that site and returns a 404.

I believe if you change this line:

<input type="hidden" name="form-name" value="contact" />

to this:

<input type="hidden" name="form-name" value="Contact" />

that will resolve the issue.

Also, if you just completely delete that line, Netlify will automatically insert the correct <input> (provided the form is correctly parsed). In other words, it is normally not required (nor recommended) to manually create that <input>.

If there are other questions about this, please let us know.

[tcapozza]

Thanks Luke!

That seemed to have fixed it, I really appreciate the help.

[Emilsone]

Hello @luke having the same issue with @tcapozza and I have followed the exact sample on this thread but it’s still not working. Do you know what the problem is ?

Below is my code sample

<form name="Contact" netlify method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="Contact" />
  <div class="relative mb-4">
    <label for="name" class="leading-7 text-sm text-gray-600">Name</label>
    <input type="text" id="name" name="name"
      class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
  </div>
  <div class="relative mb-4">
    <label for="email" class="leading-7 text-sm text-gray-600">Email</label>
    <input type="email" id="email" name="email"
      class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
  </div>
  <div class="relative mb-4">
    <label for="message" class="leading-7 text-sm text-gray-600">Message</label>
    <textarea id="message" name="message"
      class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
  </div>
  <button
    class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Submit</button>

</form>

[Melvin]

Hi @Emilsone,

Thanks for reaching out and welcome to Netlify’s Support Forums!

As mentioned above, we have a Support Guide on common form issues to help with troubleshooting:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

Could you review the guide to see if that helps with resolving the issue?

If you continue to have issues, could you provide us with form name as it appears in the UI, along with a link to your live form, and a brief description of what debugging steps you have taken. Additionally, please provide the name of your site (for example: “sitename.netlify.com” Thank you.

[Emilsone]

Hi @Melvin I have followed the guide you sent to me, but I still can’t fix the issue.

This is the link to my live form live form

I followed every step on this guide

I checked my form name, added the required input and made sure my form input had a unique name

See code example below :

<template>
  <main>
    <form name="contact" method="POST" class="contact__form" netlify-honeypot="bot-field" data-netlify="true">
      <input type="hidden" name="form-name" value="Contact" />
      <div class="relative mb-4">
        <label for="name" class="leading-7 text-sm text-gray-600">Name</label>
        <input type="text" id="name" name="name"
          class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
      </div>
      <div class="relative mb-4">
        <label for="email" class="leading-7 text-sm text-gray-600">Email</label>
        <input type="email" id="email" name="email"
          class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
      </div>
      <div class="relative mb-4">
        <label for="message" class="leading-7 text-sm text-gray-600">Message</label>
        <textarea id="message" name="message"
          class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
      </div>
      <button
        class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Submit</button>

    </form>
  </main>
</template>```