Deploying React Forms Using Formspree with ZEIT Now
Create and deploy a React form with the help of Formspree and ZEIT Now.
Formspree is a form backend that sends submissions via email which can connect to several third-party services such as Google Sheets, MailChimp, Trello, and more. Formspree also provides spam mitigation and filtering, file upload, automatic responses, and other tools to help you manage your forms.
In this guide, you will discover how to create a "contact us" form using React, similar to the example app, handle the form submission with Formspree and deploy it with ZEIT Now.
Step 1: Creating a New Formspree form
Get started integrating Formspree with ZEIT Now by using the Create a Form with ZEIT Now page. Add the email you would like to receive form submissions at and create your form.
Formspree will first ask you to provide a password, then you will be redirected to an integration page where you can get your form URL.
Make a note of your form's endpoint. This will be used later to submit the form you build.
Go to your form's Settings to find the reCAPTCHA setting and toggle it off. To use AJAX on Formspree you must either disable reCAPTCHA or provide your own reCAPTCHA key.
Step 2: Building Your Form
Create a React app from your terminal with Create React App:
npm init react-app my-formspree-app && cd my-formspree-app
Add the axios
dependency to your project:
npm install axios
Create a ContactForm.js
file in the /src
directory with the code below:
import React, { useState } from 'react' import axios from 'axios' export default () => { const [status, setStatus] = useState({ submitted: false, submitting: false, info: { error: false, msg: null } }) const [inputs, setInputs] = useState({ email: '', message: '' }) const handleServerResponse = (ok, msg) => { if (ok) { setStatus({ submitted: true, submitting: false, info: { error: false, msg: msg } }) setInputs({ email: '', message: '' }) } else { setStatus({ info: { error: true, msg: msg } }) } } const handleOnChange = e => { e.persist() setInputs(prev => ({ ...prev, [e.target.id]: e.target.value })) setStatus({ submitted: false, submitting: false, info: { error: false, msg: null } }) } const handleOnSubmit = e => { e.preventDefault() setStatus(prevStatus => ({ ...prevStatus, submitting: true })) axios({ method: 'POST', url: 'https://formspree.io/[your-formspree-endpoint]', data: inputs }) .then(response => { handleServerResponse( true, 'Thank you, your message has been submitted.' ) }) .catch(error => { handleServerResponse(false, error.response.data.error) }) } return ( <main> <h1>React and Formspree</h1> <hr /> <form onSubmit={handleOnSubmit}> <label htmlFor="email">Email</label> <input id="email" type="email" name="_replyto" onChange={handleOnChange} required value={inputs.email} /> <label htmlFor="message">Message</label> <textarea id="message" name="message" onChange={handleOnChange} required value={inputs.message} /> <button type="submit" disabled={status.submitting}> {!status.submitting ? !status.submitted ? 'Submit' : 'Submitted' : 'Submitting...'} </button> </form> {status.info.error && ( <div className="error">Error: {status.info.msg}</div> )} {!status.info.error && status.info.msg && <p>{status.info.msg}</p>} </main> ) }
This form takes two inputs, the user email and message, using axios
to make the POST request with the submission data to the Formspree endpoint received earlier on.
Now you just need to use the form in your app. Change the contents of the App.js
file to the following:
import React from 'react' import ContactForm from './ContactForm' export default function App() { return ( <div> <ContactForm /> </div> ) }
Step 3: Deploy With ZEIT Now
You can choose whether you want to deploy directly from the command line with Now CLI, or from a Git repository by installing either the Now for GitHub or Now for GitLab integrations.
To deploy your project using Now CLI, all it takes is a single command:
now
That’s it! Your form is now live and deployed to a publicly accessible url immediately. If you have used the styles provided, it will look similar to the example app.
Form submissions received from either your localhost or production environments will be emailed, and show up in your form submissions list. If you want to restrict where the form can be embedded, set your production URL in the authorized domains setting in Formspree.
Bonus: Special Formspree Names
Formspree allows you to provide specially named inputs to control how form submissions are processed.
Below is a list some of the most commonly used values, but you can find all of them in the Form Setup section of the Formspree help guide.
name="_replyto"
Use this name to set the Reply-To email address of the submission notification emails.
This allows you to quickly reply to form submissions in your inbox and is shown in the example below.
<input type="email" name="_replyto" placeholder="your email address">
name="_subject"
Use this name to set the subject of notification emails. This will override the default New submission from … subject.
<input type="hidden" name="_subject" value="New lead on mysite.com">
name="_next"
By default, after submitting a form the user is redirected to the Formspree Thank You page.
You can redirect the user to an alternative page on your website by adding a hidden input tag with a name="_next"
attribute.
The value of the attribute should be the full URL of the page you want to redirect the user to as shown below.
<input type="hidden" name="_next" value="https://mysite.com/thanks.html"/>
Be sure to include the http://
or https://
prefix, as this is required for the redirect to work.