Form Handling with Gatsby.js V2 and Netlify

This post was originally published on CodeBushi.com

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 (which you should be), you can utilize their awesome form handling feature 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. You can do this with pretty much any static site generator, just make sure you're hosting with Netlify.

Gatsby Site with Forms ( view source )

Assuming you have Gatsby.js installed on your machine, let's start off by cloning a Gatsby starter I've previously made.

# 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:

<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:

<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.

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!

Finished Product ( view source )

You can also add a custom Success page, check out the original post for more details!