How to add netlify forms to your Gatsby/React site.

If you’re only here for the code, scroll all the way to the end to see the github gist.

About Netlify Forms

Netlify Provides a way for us to add forms to our sites out of the box. As long as your site is deployed with Netlify, you can easily add stateful forms to your static site.

The free tier comes with 100 FREE submissions per month and allows users upload files up to 10mb per month.

In your new Gatsby project, create a new React component, let’s call ours Form.js .

Create your own Netlify Form

Import React and the useState hook.

Add the following piece of code that parses the HTML.

Now, within our Form function, let’s create a number of stateful attributes to handle inputs and the different states.

Next, let’s create the handleSubmit handler to handle when the form is clicked. Notice that we have given our form a name of waitlist. We have also passed in our name, email and message states.

Finally, let’s create the actual form. There are a few important things to note here. Make sure to use the following attributes on form:
1. name=”waitlist”
2. data-netlify=”true”
3. data-netlify-honeypot=”bot-field”

The name attribute should be the same as the form-name inside the encode function in your handleSubmit event handler.

Make sure not to leave out the hidden input field aswell.

See the full code below. NB — I’m using tailwind css for styling. You can ignore all the styles.

Full code

Full-stack Engineer. Rails/Node.js/React. I love plantain chips! Reach me at Adebola.dev.