DEV Community 👩‍💻👨‍💻

Hunter Chang
Hunter Chang

Posted on • Updated on • Originally published at codebushi.com

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (1)

Collapse
 
imthedeveloper profile image
ImTheDeveloper

Yep I use netlify forms all the time for anything simple like contact us etc. The free tier is ideal too!

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!