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:

• React Hook Form
• Formik
• React Final Form

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