My Netlify forms don't work. data-netlify='true' with react

Support
1

please i need your help. my react app doesn’t seem to work with netlify forms. i have copied and used resources out there but it still just decides to not recognize the form. the app link in hdnetwork.netlify.app. please i need this its quite urgent

2

From the docs,

When Netlify bots parse the static HTML for a form you’ve added, they automatically strip the data-netlify="true" or netlify attribute from the <form> tag and inject a hidden input named form-name . In the resulting HTML that’s deployed, the data-netlify="true" or netlify attribute is gone, and the hidden form-name input’s value matches the name attribute of <form> like this:

But your form seems to have them both

<form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field" _lpchecked="1">
    <input type="hidden" name="form-name" value="contact">
    <p hidden=""><input type="bot-field"></p>
    <label> Full Name * </label>
    <input type="text" required="" name="name">
    <label> Email *</label>
    <input type="email" required="" name="email">
    <label> Message</label>
    <textarea required="" name="message"></textarea><button type="submit">Send a message</button>
</form>

How are you adding the form? From what I understand, the form must not be a ‘dynamic’ element in the HTML (injected by frontend). If that feature is required, this tutorial explains it well.

Also, shouldn’t the label have a for attribute? Or, place the input as a child of the label. Helps with input focus.

Let us now how it goes!

3

Hey @donemmx :wave:t2:

If you’re using a react-based Static Site generator (Gatsby, Next, etc.) I might recommend this package I wrote to help solve the forms problem. It’s tricky.

Otherwise is it possible to see some of your code? Is the repository open? It’s typically easier to debug when we can see both sides of the equation

–
Jon