Netlify-forms Contact Form submission 404 error - reactjs

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.