Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Modified version of Netlify's form handler
import React from 'react'
/* Handling a Form */
class Form extends React.Component {
// Set up a state object that's just empty
// You'll see why it's empty in handleChange
constructor(props) {
this.state = {};
// You tie onChange in the render to this method
// handleChange takes the active event (which is whatever somebody is typing)
// And it updates the state object
// This is a shorthand but notice how the keys are being made
// We're looking at the event target's name
// The wrapper [] is a dynamic way to create key names
// This is called a computed property name:
handleChange = (e) => {
// If you want to take the data and submit it...
// Build a fetch like normal, with method, headers and body
// Notice how body works - it references encode() check below how that works
// The only weird part here is `, ...this.state`
// The spread operator takes each key/value in state and passes it into the encode function
// This is a destructing move
handleSubmit = (e) => {
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({ "form-name": "annual-report-signup-form", ...this.state })
.then( () => {
// This just makes things pretty...
// Janky error handling but you get the idea
error => alert("We couldn't add you to the list. Try again and if the problem persists, email and we'll manually add you to the list.")
// Render is pretty simple honestly
// Only this is notice how onChange synce with handleChange() above
render() {
return (
<FormItself id="pfb-signup-submission" name="annual-report-signup-form" data-netlify="true" data-netlify-honeypot="bot-field" onSubmit={ this.handleSubmit }>
Don’t fill this out: <input name="bot-field" />
<InputBox type="text" name="first-name" id="signup-box-fname" placeholder="First Name" onChange={ this.handleChange } />
<InputBox type="text" name="last-name" id="signup-box-lname" placeholder="Last Name" onChange={ this.handleChange } />
<InputBox type="email" name="email" id="signup-box-email" placeholder="Email" onChange={ this.handleChange } />
<InputBox type="text" name="zip-code" id="signup-box-zip" placeholder="Zip Code" onChange={ this.handleChange } />
<input type="hidden" name="form-name" value="annual-report-signup-form" />
<InputSubmit type="submit" className="submit-button" value="Sign Up" id="pfb-signup-button" />
// This is kind of an extra but you usually need to encode your data before sending it across the wire
// This is a utility function that accomplishes that
// handleSubmit calls encode per react state key, loops through each one
// we're then leveraging encodeURIComponent:
// This just changes the format into something that can be transferred easily via HTTP
// You've seen this syntax a million times in your URL window:
// ie:
// What this function is creating is: key=value&key2=value2&
function encode(data) {
return Object.keys(data)
.map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment