Skip to content
SheetCapture

Save Next.js form submissions to Google Sheets

Use a Server Action so your access key stays on the server and never reaches the browser.

  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 your key and sheet ID as environment variables

    In .env.local (and in your hosting provider's settings):

    SHEETCAPTURE_KEY=YOUR_ACCESS_KEY
    GOOGLE_SHEET_ID=YOUR_SHEET_ID
  3. 3

    Create a Server Action

    It runs on your server, so the key is never sent to visitors.

    // app/actions.js
    "use server";
    
    export async function subscribe(formData) {
      const response = await fetch("https://www.sheetcapture.com/add-row", {
        method: "POST",
        headers: {
          Authorization: `Bearer ${process.env.SHEETCAPTURE_KEY}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          GoogleSheetID: process.env.GOOGLE_SHEET_ID,
          data: {
            Name: formData.get("name"),
            Email: formData.get("email"),
          },
        }),
      });
    
      if (!response.ok) {
        const { error } = await response.json();
        throw new Error(error);
      }
    }
  4. 4

    Use it in a form

    No client-side JavaScript is needed for the submission itself.

    // app/page.js
    import { subscribe } from "./actions";
    
    export default function Page() {
      return (
        <form action={subscribe}>
          <input name="name" placeholder="Your name" required />
          <input type="email" name="email" placeholder="you@example.com" required />
          <button type="submit">Subscribe</button>
        </form>
      );
    }

This is the most secure way to use SheetCapture on a website: visitors can't see or reuse your key.

Want every option?

The API docs cover responses, limits and error codes.

Read the docs