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.

import React, { useState } from "react"

Add the following piece of code that parses the HTML.

const encode = data => {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&")
}

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

  const [submitted, setSubmitted] = useState("")
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [message, setMessage] = useState("")
  const [submitting, setSubmitting] = useState(false)

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.

const handleSubmit = e => {
    setSubmitting(true)
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "waitlist", name, email, message }),
    })
      .then(() => {
        setSubmitting(false)
        setSubmitted("Thank you for your kind words!")
      })
      .catch(error => alert(error))
e.preventDefault()
  }

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.

<form
  onSubmit={handleSubmit}
  name="waitlist"
  data-netlify="true"
  data-netlify-honeypot="bot-field"
>
  <input type="hidden" name="form-name" value="waitlist" />
<div>
    <label htmlFor="name">Your Name: </label>
    <input
      onChange={({ target }) => setName(target.value)}
      type="text"
      name="name"
      value={name}
      minLength="5"
      placeholder="e.g Morenike Martins-Brown"
    />
  </div>
  <div>
    <label htmlFor="email">Your Email:</label>
    <input
      type="email"
      name="email"
      value={email}
      required
      onChange={({ target }) => setEmail(target.value)}
      placeholder="e.g morenike@hey.com"
    />
  </div>
<div>
    <label htmlFor="message">
      Anything else you would like to know (optional)
    </label>
    <textarea
      name="message"
      placeholder="e.g When do you plan on launching?"
      rows="5"
      onChange={({ target }) => setMessage(target.value)}
      value={message}
    ></textarea>
  </div>
  <p>
    <button type="submit">Join waitlist</button>
  </p>
</form>

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