Form Handling with Gatsby.js V2 and Netlify
Tags: netlify, react, javascript, gatsby
Published: 2018-09-29 18:34:11

---
title: Form Handling with Gatsby.js V2 and Netlify
published: true
description: Easily handle forms for your Gatsby.js V2 static website with Netlify. Works with most static site generators.
tags: netlify, react, javascript, gatsbyjs
canonical_url: https://codebushi.com/form-handling-gatsby-netlify/
---

*This post was originally published on [CodeBushi.com](https://codebushi.com/form-handling-gatsby-netlify/)*

<img src="https://thepracticaldev.s3.amazonaws.com/i/4krle8lzsrmenr44scxc.jpg">

Having a working contact form is a basic requirement for many websites, but setting one up with a static site can be tricky. If you're hosting your website with [Netlify](https://www.netlify.com/) (which you should be), you can utilize their awesome [form handling feature](https://www.netlify.com/docs/form-handling/) for free. Setting this up is super fast and easy, you'll never want to jump through hoops or embed an ugly form again.

For this example, I'll be using a static site made with [Gatsby.js](https://www.gatsbyjs.org/). You can do this with pretty much any static site generator, just make sure you're hosting with Netlify.

<h4><a href="https://gatsby-forms.netlify.com/">Gatsby Site with Forms</a> <small>( <a href="https://github.com/codebushi/gatsby-forms">view source</a> )</small></h4>

Assuming you have Gatsby.js installed on your machine, let's start off by cloning a [Gatsby starter](https://codebushi.com/gatsby-starters/) I've previously made.

```bash
# Create a new Gatsby site with the Forty starter
gatsby new gatsby-forms https://github.com/codebushi/gatsby-starter-forty

# Go into the new directory
cd gatsby-forms/

# Start the dev site, browse to http://localhost:8000/
gatsby develop
```

Your new Gatsby site should be up and running, scroll down to the bottom of the page to see the contact form. Since Gatsby is built using React.js, this form area is just simple React component. Open up the file in your text editor of choice, `src/components/Contact.js`

Here's the initial JSX for the form:

```jsx
<form method="post" action="#">
    <div className="field half first">
        <label htmlFor="name">Name</label>
        <input type="text" name="name" id="name" />
    </div>
    <div className="field half">
        <label htmlFor="email">Email</label>
        <input type="text" name="email" id="email" />
    </div>
    <div className="field">
        <label htmlFor="message">Message</label>
        <textarea name="message" id="message" rows="6"></textarea>
    </div>
    <ul className="actions">
        <li><input type="submit" value="Send Message" className="special" /></li>
        <li><input type="reset" value="Clear" /></li>
    </ul>
</form>
```

All we need to do is add a few new attributes to the `<form>` tag:

```jsx
<form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field">
  <input type="hidden" name="bot-field" />
  <input type="hidden" name="form-name" value="contact" />
    ...
</form>
```

The first hidden field `bot-field` is for Netlify's bots to pick up. The second `form-name` hidden field is specific to Gatsby, since Gatsby strips out input fields that are not included in the JSX form.

That's it! This is the most minimal way to get form submissions working. Netlify's bots will automatically detect the attribute `data-netlify="true"` when you deploy, and process the form for you. The `data-netlify-honeypot="bot-field"` is optional, but it's for anti-spam and easy enough to include. If a spam bot fills out the hidden `bot-field` input, then the form won't be submitted.

Now just create a new GitHub repository with these files and [deploy to Netlify](https://www.netlify.com/docs/continuous-deployment/).

Go to your new site and submit the form. You should get directed to a generic success page and we can look into changing this a bit later. Netlify will have a Forms area in their back-end where you can see the submissions. You can also head into `Settings > Forms > Form notifications` and receive an email alert anytime a new submission comes through. Pretty awesome!

<h4><a href="https://gatsby-forms.netlify.com/">Finished Product</a> <small>( <a href="https://github.com/codebushi/gatsby-forms">view source</a> )</small></h4>

You can also add a custom `Success` page, check out the [original post](https://codebushi.com/form-handling-gatsby-netlify/) for more details!