Skip to content

Instantly share code, notes, and snippets.

Embed
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) {
super(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:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names
handleChange = (e) => {
this.setState({[e.target.name]: e.target.value});
}
// 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...
document.getElementById("signup-submission").classList.add('hide-form')
document.getElementById("signup-result").classList.add('show-form-thanks')
})
.catch(
// 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 xyx@abc.com and we'll manually add you to the list.")
);
e.preventDefault();
};
// 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 }>
<Hidden>
Don’t fill this out: <input name="bot-field" />
</Hidden>
<InputGroup>
<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 } />
</InputGroup>
<InputGroupLast>
<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 } />
</InputGroupLast>
<input type="hidden" name="form-name" value="annual-report-signup-form" />
<InputSubmit type="submit" className="submit-button" value="Sign Up" id="pfb-signup-button" />
</FormItself>
)
}
}
// 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:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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: https://www.google.com/search?q=encodeuricomponent&rlz=1C5CHFA_enUS855US856&oq=encodeURI&aqs=chrome.0.0j69i57j0l6.1784j1j4&sourceid=chrome&ie=UTF-8
// What this function is creating is: key=value&key2=value2&
function encode(data) {
return Object.keys(data)
.map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment