Hi guys,
I’ve been trying to make Netlify forms work in Create React App( https://marketic-mclbdn.netlify.app/ ) for several hours now and decided to ask here.
The form is recognized by Netlify, but when I enter some data, it’s not neither in verified submissions nor in spam submissions.
My index.html part looks like this:
<body>
<form name="contact" netlify netlify-honeypot="bot-field" hidden>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
And my ContactForm component looks like this:
import React, { useState } from "react";
const ContactForm = () => {
const [formIsValid, setFormIsValid] = useState(false);
const handleSubmit = (e) => {
if (e.target.checkValidity()) {
setFormIsValid(true);
}
e.preventDefault();
};
return (
<form
method="post"
id="contact-form"
onSubmit={handleSubmit}
name="contact"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="contact" />
<h3>Contact Us</h3>
{formIsValid ? (
<p className="thank-you-para">Thank you!</p>
) : (
<div>
<fieldset>
<input
placeholder="NAME"
name="name"
type="text"
tabindex="1"
required
/>
</fieldset>
<fieldset>
<input
placeholder="EMAIL"
name="email"
type="email"
tabindex="2"
required
/>
</fieldset>
<fieldset>
<input
placeholder="PHONE NUMBER"
name="phone"
type="tel"
tabindex="3"
required
/>
</fieldset>
<fieldset>
<textarea
placeholder="Type your Message Here...."
tabindex="5"
required
name="message"
></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit">
Submit
</button>
</fieldset>
</div>
)}
</form>
);
};
export default ContactForm;