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

About Netlify Forms

Create your own Netlify Form

import React, { useState } from "react"
const encode = data => {
return Object.keys(data)
.map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&")
}
  const [submitted, setSubmitted] = useState("")
const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [message, setMessage] = useState("")
const [submitting, setSubmitting] = useState(false)
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()
}
<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>

Full code

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store