Netlify-forms Contact Form submission 404 error

Question

I am having trouble submitting my Contact Page through using Netlify-Forms, I am getting a 404 error.

I have the following form :-

<form name="Portfolio_Contact" 
      method="POST" 
      data-netlify="true"
      data-netlify-honeypot="bot-field"
      action="/thank-you">
    <div className="form-group">
      <input
        type="text"
        name="name"
        placeholder="name"
        className="form-control"
      />
      <input
        type="email"
        placeholder="email"
        name="email"
        className="form-control"
      />
      <textarea
        name="message"
        rows="5"
        placeholder="message"
        className="form-control"
      ></textarea>
      <div data-netlify-recaptcha="true"></div>
    </div>
    <button type="submit" className="submit-btn btn">
      send me your message
    </button>
  </form>

And when I submit it, I am first getting a 404 error, and then getting my thank-you page as expected.

Am I doing something wrong? I can see my “Portfolio_Contact” in the Forms section.

Thanks for your help and time.

Answer 1

You have a reCAPTCHA set but your form is not expecting it since is not defined in your <form> tag. Just add:

<form name="Portfolio_Contact" 
      method="POST" 
      data-netlify="true"
      data-netlify-honeypot="bot-field" 
      data-netlify-recaptcha="true"
      action="/thank-you">

Spot the data-netlify-recaptcha="true". You can find more information in Netlify documentation for reCAPTCHA 2.

I am getting this in the network :- Referrer Policy: strict-origin-when-cross-origin

Besides of this configuration on the <form> tag, you need to set up your POST action configuration. Netlify is kind of weird in their responses, a 404 doesn't mean that your form doesn't exist, it means that the request failed. I usually apply the exact <form> configuration that I've posted but I add a custom submit handle function which sets the request configurations:

<form name="Portfolio_Contact" 
      method="POST" 
      data-netlify="true"
      data-netlify-honeypot="bot-field" 
      data-netlify-recaptcha="true"
      action="/thank-you">
    <div className="form-group">
      <input
        type="text"
        name="name"
        placeholder="name"
        className="form-control"
      />
      <input
        type="email"
        placeholder="email"
        name="email"
        className="form-control"
      />
      <textarea
        name="message"
        rows="5"
        placeholder="message"
        className="form-control"
      ></textarea>
      <div data-netlify-recaptcha="true"></div>
    </div>
    <button type="submit" className="submit-btn btn" onClick={handleSubmit}>
      send me your message
    </button>
  </form>

Your handleSubmit function:

  const handleSubmit = event => {
    event.preventDefault();

   // do your verifications and checks
   if(!verified) return false    

    const REQUEST_PARAMETERS = {
      method: `POST`,
      headers: { 'Content-Type': `application/x-www-form-urlencoded` },
      body: encode({ ...data }), //your data here. Needs to have your form-name attribute set
    };

    fetch(`/`, REQUEST_PARAMETERS)
      .then(() => {
        console.log(`OK`);
      })
      .catch(error => alert(error));
  };

Note: your request won't work in your local environment

This configuration is important because sets the headers of the request, what is failing in your sample.

You can check for a sample in this DEV article.