404 Error Upon Submission of Form

Hello,

Issue: I am setting up a contact form for my portfolio and am receiving the error “the server responded with a status of 404 ()”.

A little about my site.

  1. My site name is www.justuswitmer.com
  2. I am using JavaScrip to render my HTML.
  3. I have a an HTML form called “Contact.html” in my directory.
  4. I tripled checked that my HTML form and my Javascript rendered form are identical in with their name attributes.

What I have done to try to resolve my issue:

  1. I followed the instructions on how to integrate Netlify forms with my website via this tutorial: https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app
  2. I read through the other posts in Netlify community on 404 errors upon form submission.
  3. I followed this support guide and made sure I had everything right: [Support Guide] Form problems, form debugging, 404 when submitting
  4. Crossed my fingers and did the chicken dance while waiting for my site to build (lol)

Anything I am missing? Not really sure what else to do.

Below is my HTLM code and Javascript code

Thanks!

Justus

HTML

<form
  method="POST"
  name="contactForm" 
  netlify netlify-honeypot="bot-field" 
  hidden
>
  <input 
    type="text" 
    name="name" 
  />
  <input 
    type="email" 
    name="email" 
  />
  <textarea 
    name="message"
  >
  </textarea>
</form>

Javascript

<form name="contactForm" data-netlify="true" method="POST" onSubmit={handleSubmit}>
        <p>
          <label>
            Your Name: <input type="text" name="name" value={fullName} onChange={(e)=>handleFullName(e.target.value)} />
          </label>
        </p>
        <p>
          <label>
            Your Email: <input type="email" name="email" value={email} onChange={(e)=>handleEmail(e.target.value)} />
          </label>
        </p>
        <p>
          <label>
            Message: <textarea name="message" value={message} onChange={(e)=>handleMessage(e.target.value)} />
          </label>
        </p>
        <p>
          <button type="submit">Send</button>
        </p>
      </form>

Where exactly are you using this form? I see you’ve linked to the documentation of using forms in React, so I’m assuming you’re using it in a React app. But I don’t see the hidden input that you need as mentioned in that document:

<input type="hidden" name="form-name" value="the-name-of-the-html-form" />

Thanks for your response!
Yes, this is a React app.

I added the hidden input.
I thought that it was was generated by Netlify, but I now have it right above my Javascript form (see below).
I am still receiving a 404 error though.

Also, I included my handleSubmit function.

HandleSubmit

const handleSubmit = e => {
    const newMessage = {
      fullName: fullName,
      email: email,
      message: message
    };
    const isValid = validateForm();
    if (isValid) {
      fetch("/", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: encode({ "form-name": "contactForm", newMessage })
      })
        .then(() => alert("Success!"))
        .catch(error => alert(error));
      e.preventDefault();
      setFullName('');
      setEmail('');
      setMessage('');
      handleShow();
    };
  };

Javascript Form

<input type="hidden" name="form-name" value="contactForm" />
      <form name="contactForm" data-netlify="true" method="POST" onSubmit={handleSubmit}>
        <p>
          <label>
            Your Name: <input type="text" name="name" value={fullName} onChange={(e)=>handleFullName(e.target.value)} />
          </label>
        </p>
        <p>
          <label>
            Your Email: <input type="email" name="email" value={email} onChange={(e)=>handleEmail(e.target.value)} />
          </label>
        </p>
        <p>
          <label>
            Message: <textarea name="message" value={message} onChange={(e)=>handleMessage(e.target.value)} />
          </label>
        </p>
        <p>
          <button type="submit">Send</button>
        </p>
      </form>

The hidden input goes inside the form and not before it just like it’s mentioned in the documentation.

1 Like

Ok, thank you.

I found a tutorial (below) that walked through the whole process and now have my contact form working.
Thanks again for your responses!

Justus