Troubleshooting Netlify Forms w Gatsby

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)}
/>



);
};`

howdy, we had some trouble with forms last week, see here:

so my first question is is whether this is working now?
secondly, did you see this troubleshooting guide?

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

Hello!

I did see the guide and completed all of the steps/troubleshooting inside to no avail. However, I found a work around in Gatsby that allowed the form to be recognized.

hi! glad it is working now. Do you have more information on that workaround? I am sure others would also like to see this!