Skip to content
SheetCapture

Send form data to Google Sheets with JavaScript

Submit a form with fetch so visitors stay on your page and see an instant confirmation.

  1. 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.

  2. 2

    Add a normal form

    Give each input a name: those become your column headers.

    <form id="signup">
  <input name="Name" placeholder="Your name" required />
  <input type="email" name="Email" placeholder="you@example.com" required />
  <button type="submit">Join the waitlist</button>
  <p id="status" role="status"></p>
</form>
  3. 3

    Send it with fetch

    This turns the form into a data object and posts it. The page doesn't reload.

    const form = document.getElementById("signup");
const status = document.getElementById("status");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  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();
    status.textContent = "Thanks, you're on the list!";
  } else {
    const { error } = await response.json();
    status.textContent = error;
  }
});

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