Hello,
I am trying to set up a Netlify form in my Gatsby site and have completed all of the steps to set the form to be visible for Netlify. However, with the Netlify form tag and data-netlify-honeypot set correctly my form is still not showing in the dashboard. I’ve tried multiple versions of this (stateful, stateless, hidden form with matching name attributes, dummy .html form), but my form below will not show in the Netlify form dashboard. Any help would be appreciated.
I’ve posted my code below.
const encode = (data) => Object.keys(data) .map((key) => ${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
.join(‘&’);
const ContactForm = () => {
const { formState, setFormState } = useState({
name: ‘’,
email: ‘’,
message: ‘’,
});
const handleSubmit = (event) => {
event.preventDefault();
const form = event.target;
fetch(‘/’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },
body: encode({
‘form-name’: form.getAttribute(‘name’),
…formState,
}),
})
.then(() => navigate(‘/success’))
.catch((error) => {
console.log(error);
navigate(‘/404’);
});
};
const handleChange = (event) => {
setFormState({ …formState, [event.target.name]: event.target.value });
};
return (
<form
data-netlify=“true”
data-netlify-honeypot=“bot-field”
name=“contact-form”
method=“POST”
action=“/success”
onSubmit={(event) => handleSubmit(event)}
style={{
display: ‘flex’,
flexDirection: ‘column’,
}}
>
{/* form-name hidden field is required to support form submissions without JavaScript */}
Enter Your Name:
<FormInput
name=“full-name”
id=“full-name”
placeholder=“John Smith”
onChange={(event) => handleChange(event)}
/>
Enter Your Email:
<FormInput
name=“contact-email”
type=“email”
id=“contact-email”
placeholder="john@gmail.com"
onChange={(event) => handleChange(event)}
/>
Enter Your Message:
<FormTextArea
name=“contact-message”
rows=“8”
cols=“40”
id=“contact-message”
placeholder=“Enter your message here…”
onChange={(event) => handleChange(event)}
/>
);
};`