React

How to submit React forms to Google Sheets

React is an open-source JavaScript library used for building user interfaces, focusing on component-based development. It efficiently renders and updates UI components, allowing developers to create interactive, dynamic web applications.

You can easily connect forms built with React to Google Sheets using Sheet Monkey.

Once you create a form in the Sheet Monkey dashboard, Sheet Monkey will provide a form url or "form action" where you can start posting data. This unique action is all you need to post data into the Google Sheet.

Then in your React form, post your data to the Sheet Monkey endpoint as in the following example:

import React, { useState } from 'react'; const FormComponent = () => { const [formData, setFormData] = useState({ name: '', email: '', message: '', }); const handleChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const handleSubmit = async (e) => { e.preventDefault(); const response = await fetch('https://api.sheetmonkey.io/form/vB1pUYCBvUqnSarEvAgsd6', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(formData), }); if (response.ok) { // Handle success (optional) console.log('Form submitted successfully!'); setFormData(initialFormData); // Reset form after successful submission } else { // Handle error console.error('Form submission failed:', response.status); } }; return ( <div> <h2>Contact Form</h2> <form onSubmit={handleSubmit}> <div> <label htmlFor="name">Name:</label> <input type="text" id="name" name="name" value={formData.name} onChange={handleChange} required /> </div> <div> <label htmlFor="email">Email:</label> <input type="email" id="email" name="email" value={formData.email} onChange={handleChange} required /> </div> <div> <label htmlFor="message">Message:</label> <textarea id="message" name="message" value={formData.message} onChange={handleChange} required /> </div> <button type="submit">Submit</button> </form> </div> ); }; export default FormComponent;

Once you submit this form, the data will appear in the linked sheet like this:

Sheet Monkey supports:

And many other form libraries for React. Sheet Monkey can run in React and React Native.

Hey, that was pretty easy!

Sheet Monkey is free to get started. Why not create an account and connect it with a React form? See for yourself how simple it is to start saving your form data in Google Sheets.

Get Started for Free
Get started