Contact form not working getting 404 then going back to the homepage

I believe I followed all the steps to get the contact form working. When I go to the forms section for my apps site, I see the contact form so it is aware of the contact form.

I submitted a real looking message (I know spam filtering is used) and it still didnt come through and I still got the 404 message.

Tips?

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

This Common Issue is the first port of call to debug any forms issues.

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. :slight_smile:

Thanks, looks like I meet all 7 points he makes. Except for #6 ( Make sure that you POST your form request (not GET) with a Content-Type of application/x-www-form-urlencoded in most cases. However, if and only if you are submitting the form with a file upload then the Content-Type needs to be multipart/form-data instead.)

Can you give me an example of how to implement this in my code please so I can try it out?

Hey @noobnetlifyuser,
If you are not using Javascript/Ajax, you should be able to add type="file" to the input as described here:

So, adapting from the sample code in our docs:

<form name="contact" method="POST" netlify>
  <p>
    <label>Your Name: <input type="text" name="name" /></label>   
  </p>
  <p>
    <label>File: <input type="file" name="file_name" /></label>   
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

If you are using Javascript, it’s a bit trickier :slight_smile: but here’s some sample code for where you would set the Content-Type header in Nuxt.js:

Let us know if you have other questions!

Thanks, I am using JS. So does that mean I have to use VUE.js or Nuxt.js then and implement that in my code?

Not at all! Just means you’ll need a few additional pieces, like the Content-Type header and some kind of encoding function. Could you share your form code here so we can take a look?

How do I paste the code? It renders it when I paste it on here

The form is just a typical block of form, but I can paste it still I just dont know how w/o it rendering

noobnetlifyuser, if you put the code between two sets of 3 ``` (backticks) it will render correctly :+1:

Thanks

            <div className="field half first">
              <label htmlFor="name">Name</label>
              <input type="text" name="name" id="name" />
            </div>
            <div className="field half">
              <label htmlFor="email">Email</label>
              <input type="email" name="email" id="email" />
            </div>
            <div className="field">
              <label htmlFor="message">Message</label>
              <textarea name="message" id="message" rows="4"></textarea>
            </div>
            <ul className="actions">
              <li>
                <button type="submit">Send Message</button>
              </li>
              <li>
                <input type="reset" value="Reset" />
              </li>
            </ul>
          </form>

hey @noobnetlifyuser, the most important line, namely the opening form tag, is missing here. Do you have it in your code or did it get cut off?

Yes, I have it
<form name="contact" method="POST" data-netlify="true">

Hi, @noobnetlifyuser, would you please send us the following details?

  • a link to the pure HTML form
  • a link to the page where that form appears in the live site (if not the same as above)

Hi @noobnetlifyuser :wave:t2:

Netlify forms are fun :slight_smile:
Thanks for posting the HTML for your form.

You mentioned above

Thanks, I am using JS.

Which typically implies that you’re submitting your form via JS rather than letting the browser do its ‘default’ operations in submitting a form. The HTML form you posted doesn’t actually appear to have any hooks in it, but if you are indeed controlling the submit process with JavaScript and sending the form submission manually in that way, it’ll be super important that you paste that code here too.

I apparently am having some local network trouble ( :frowning: ) but I was able to load your page once and checked out the form. I think you’re experiencing some trouble in the way Gatsby’s build/render/runtime process works vs. what Netlify does and expects.

We can absolutely help you get your form working, but the first step is understanding if you’re using a manual JS submit process (e.g. a “controlled” form, or a form with “controlled” components), or if you’re just rendering a plain HTML form and letting the browser act default. The more code you’re willing to share about that the better.


Jon


(Netlify team, is there a guide out there yet specifically for understanding the Gatsby & Netlify form workflow? Would be happy to write one if there isn’t but want to check first)

Thanks.

When I said I am using JS I meant in the sense that I am using thrat Gatsby started, and the file which contains the HTML code (that I pasted above) is a JS file.

I looked on your website weeks ago on how to use a contact form, and what to add to make it easily work with netlify. I just did that (which you can see in the HTML code above). Beyond that their is nothing else I have added for the contact page, so their is no other code for me to share regarding the contact form, that HTML code is it.

Hope that clarifies it?

Awesome. Thanks for the clarification :slight_smile:

The docs are great for learning how to quickly and easily add Forms functionalities to purely static sites. React-based Static-Site-Generators like Gatsby get a little more complicated. There are new guides in the works to help alleviate that! In the meantime, this comment should be able to explain to you some of the under-the-hood as to why your current form isn’t working quite right.

The tl;dr for you is that you just need to add an additional input to your form HTML in your jsx. If you can go ahead and add

<input type='hidden' name='form-name' value='contactNuh' />

to your form HTML, I believe the form should work.


Jon

You can just add that input between the Form and the Div :slight_smile:

It worked, thank you for your help