Save React form submissions to Google Sheets

A React form component that saves each submission as a row and shows its own status.

1
Get your sheet and access key ready
Create a Google Sheet (headers are optional: we'll add a column for each field) and share it with this address as an Editor:
sheetcapture@appspot.gserviceaccount.com
Copy the sheet ID from its URL (the part between /d/ and /edit), and your access key from your account page. No account yet? Start free.

Create the component

Each field's name becomes a column. Swap in your own sheet ID and key, or better, call your own backend (see the Next.js guide) so the key stays private.

import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("idle");

  async function handleSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    setStatus("sending");

    const response = await fetch("https://www.sheetcapture.com/add-row", {
      method: "POST",
      headers: {
        Authorization: "Bearer YOUR_ACCESS_KEY",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        GoogleSheetID: "YOUR_SHEET_ID",
        data: Object.fromEntries(new FormData(form)),
      }),
    });

    if (response.ok) form.reset();
    setStatus(response.ok ? "sent" : "error");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="Name" placeholder="Your name" required />
      <input type="email" name="Email" placeholder="you@example.com" required />
      <textarea name="Message" />
      <button disabled={status === "sending"}>Send</button>
      {status === "sent" && <p>Thanks! We'll be in touch.</p>}
      {status === "error" && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}

Anything in a web page, including hidden fields, can be seen by visitors. Your access key can only add rows and use your plan's requests, but only embed it on sites you control.

Want every option?

The API docs cover responses, limits and error codes.

Read the docs

Get your sheet and access key ready

Create the component