Form displays on dashboard, but receiving 404 when submitted

Support
1

Hey everyone, I know this question seems to be asked over and over again, but I can’t seem to find a resolution.

I have created a basic form in a React site. I’m creating the form as if it were a standard HTML form for simplicity.

Here is the link: https://clever-jennings-55b420.netlify.app/

You will notice a form on the homepage, as well as the affordability page. They are two separate forms.

These forms are displaying in my admin dashboard, but when I hit the submit button, it seems to throw an error and puts me in a 404. I have went through all the debugging stages everyone is recommending and I seem to have everything up to par. I’m highly confused because this code is EXACTLY what I’ve used in the past and it works flawlessly.

I hope I can get some help. I feel stupid after 10 years!

Here’s my source code:

<form name="Affordability" method="POST" data-netlify="true" data-netlify-honeypot="bot-field">
    <div className="inputArea">
        <div className="inputs">
            <input type="text" name="name" id="name" placeholder="name"/>
        </div>
        <div className="inputs">
            <input type="email" name="email" id="email" placeholder="email"/>
        </div>
        <div className="inputs">
            <input type="tel" name="number" id="number" placeholder="phone"/>
        </div>
    </div>
    <div className="messsage">
        <textarea name="message" placeholder="Which window would you like more information about?"></textarea>
    </div>
    <button className="submit-btn" type="submit">Send Message</button>
</form>
2

Hey @TechJohnson thanks for reaching out to the community.

I’m not sure what your set up looks like but I am noticing that you don’t have the hidden input field that can help Netlify recognize your form.

There might be a need to have a copy of the form in your output html page with a hidden tag but I linked you to the docs to try the hidden field first

2 Likes
3

Yup…silly me. I just assumed that since I was writing it in HTML, I didn’t even need to consider the Javascript route with the hidden. Thanks man, appreciate it. Maybe next time I should just…I don’t know…remember I’m using React and that it’s a JAVASCRIPT framework.

4

Woohoo! glad it worked! Thanks for reaching out :raised_hands:

2 Likes