diff --git a/.env.local.example b/.env.local.example
index 84a5006..800198e 100644
--- a/.env.local.example
+++ b/.env.local.example
@@ -50,3 +50,12 @@ NEXTAUTH_SECRET=
 CUSTOMERIO_SITE_ID=
 CUSTOMERIO_API_KEY=
 CUSTOMERIO_REGION=
+
+# Build the Vote sign-ups → the Google Sheet shared with CJPAC, written with
+# the Sheets API as a service account (src/lib/google-sheet.ts). Share the
+# Sheet with the service account's email as an Editor. The private key is the
+# JSON key's private_key; literal \n escapes are fine. Required in production
+# (sign-ups fail without it); leave unset locally to skip the Sheet.
+GOOGLE_SERVICE_ACCOUNT_EMAIL=
+GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY=
+GOOGLE_SHEET_ID=
diff --git a/package.json b/package.json
index 0f50c32..a59d8cb 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "seed:bills-admin": "tsx scripts/seed-bills-admin.ts",
     "eval:bills": "tsx --env-file-if-exists=.env.local --env-file-if-exists=.env src/app/bills/evals/run.ts",
     "test:feeds": "tsx --test src/lib/feeds.test.ts",
+    "test:sheet": "tsx --test src/lib/google-sheet.test.ts",
     "test:polls": "NODE_OPTIONS=--conditions=import tsx --test src/lib/charts/inline-chart.test.ts src/lib/polls/downloads.test.ts src/lib/polls/crosstabs.test.ts"
   },
   "dependencies": {
diff --git a/src/app/api/volunteer/details/route.ts b/src/app/api/volunteer/details/route.ts
new file mode 100644
index 0000000..284badf
--- /dev/null
+++ b/src/app/api/volunteer/details/route.ts
@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import {
+  AVAILABILITY_OPTIONS,
+  EMAIL_COOKIE,
+  MAYORAL_OPTIONS,
+  SHEET_COLUMNS,
+  SHEET_TAB,
+} from "@/app/toronto/volunteer/build-the-vote";
+import { sheetTimestamp, upsertSheetRow } from "@/lib/google-sheet";
+
+// Build the Vote step 2: optional details, added to the volunteer's row in the
+// Sheet shared with CJPAC. The row is found by the email step 1's response put
+// in an httpOnly cookie, so the email is never in a URL or the page. These
+// answers (including a mayoral preference) go to the Sheet only, not to
+// Customer.io.
+
+export async function POST(req: NextRequest) {
+  try {
+    const email = req.cookies.get(EMAIL_COOKIE)?.value;
+    if (!email) {
+      return NextResponse.json({ error: "expired" }, { status: 401 });
+    }
+
+    const body = await req.json();
+    const availability = Array.isArray(body.availability)
+      ? AVAILABILITY_OPTIONS.filter((o) => body.availability.includes(o))
+      : [];
+    const mayoral = MAYORAL_OPTIONS.find((o) => o === body.mayoral) ?? "";
+    const issues =
+      typeof body.issues === "string" ? body.issues.trim().slice(0, 2000) : "";
+
+    await upsertSheetRow({
+      tab: SHEET_TAB,
+      columns: SHEET_COLUMNS,
+      email,
+      values: {
+        Availability: availability.join(", "),
+        "Mayoral candidate": mayoral,
+        Issues: issues,
+        "Details added at": sheetTimestamp(),
+      },
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (err) {
+    console.error(err);
+    return NextResponse.json(
+      { error: "Something went wrong. Please try again." },
+      { status: 500 },
+    );
+  }
+}
diff --git a/src/app/api/volunteer/route.ts b/src/app/api/volunteer/route.ts
index 8b7d88f..6408060 100644
--- a/src/app/api/volunteer/route.ts
+++ b/src/app/api/volunteer/route.ts
@@ -1,49 +1,115 @@
 import { NextRequest, NextResponse } from "next/server";
 
+import {
+  DETAILS_API_PATH,
+  EMAIL_COOKIE,
+  PARTNER_SOURCE,
+  SHEET_COLUMNS,
+  SHEET_TAB,
+} from "@/app/toronto/volunteer/build-the-vote";
 import { identifyToCustomerio } from "@/lib/customerio";
 import { normalizePostalCode } from "@/lib/elections/postal-code";
+import { sheetTimestamp, upsertSheetRow } from "@/lib/google-sheet";
 
-// Build the Vote sign-ups, identified to Customer.io. The sign-up itself goes
-// to CJPAC's Formstack; this copies who signed up into our own Customer.io so
-// we can follow up. Deliberately not York Factory: these aren't newsletter
-// subscribers created by our own form.
+// Build the Vote step 1. Writes the sign-up to the Google Sheet shared with
+// CJPAC, which is how CJPAC receives it, then identifies the volunteer to
+// Customer.io for our own follow-up. Deliberately not York Factory: these
+// aren't newsletter subscribers created by our newsletter form.
+//
+// The Sheet write must succeed, or the volunteer is told to try again: a
+// sign-up CJPAC never sees is lost. Customer.io is best-effort. The phone
+// number goes to the Sheet only; CJPAC calls, we don't.
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 export async function POST(req: NextRequest) {
   try {
     const body = await req.json();
-    const { email, first_name, last_name, city, postal_code } = body;
 
-    if (!email || typeof email !== "string") {
-      return NextResponse.json({ error: "Email is required" }, { status: 400 });
-    }
+    // A field people never see; bots that fill in every input do. Answer as
+    // if it worked so they don't learn to skip it.
+    if (body.website) return NextResponse.json({ success: true });
+
+    const str = (v: unknown, max: number) =>
+      typeof v === "string" ? v.trim().slice(0, max) : "";
+
+    const email = str(body.email, 254).toLowerCase();
+    const firstName = str(body.first_name, 50);
+    const lastName = str(body.last_name, 50);
+    const phone = normalizePhone(body.phone);
+    const city = str(body.city, 100);
+    const postalCode = normalizePostalCode(body.postal_code);
 
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(email) || email.length > 254) {
-      return NextResponse.json(
-        { error: "Invalid email format" },
-        { status: 400 },
-      );
+    const checks: [boolean, string][] = [
+      [Boolean(firstName && lastName), "Please enter your first and last name"],
+      [EMAIL_PATTERN.test(email), "Please enter a valid email address"],
+      [Boolean(phone), "Please enter a 10-digit phone number"],
+      [Boolean(city), "Please enter your city"],
+      [Boolean(postalCode), "Please enter a valid postal code (e.g. M5V 1A1)"],
+    ];
+    const failed = checks.find(([ok]) => !ok);
+    if (failed) {
+      return NextResponse.json({ error: failed[1] }, { status: 400 });
     }
 
-    const str = (v: unknown, max: number) =>
-      typeof v === "string" ? v.trim().slice(0, max) : undefined;
-    const firstName = str(first_name, 100);
-    const lastName = str(last_name, 100);
-
-    const identified = await identifyToCustomerio(email.trim().toLowerCase(), {
-      first_name: firstName,
-      last_name: lastName,
-      name: [firstName, lastName].filter(Boolean).join(" "),
-      city: str(city, 100),
-      postal_code: normalizePostalCode(postal_code),
-      toronto_2026_build_the_vote_volunteer: true,
-      // A Unix timestamp, so date-based segments can use it.
-      toronto_2026_build_the_vote_signed_up_at: Math.floor(Date.now() / 1000),
+    await upsertSheetRow({
+      tab: SHEET_TAB,
+      columns: SHEET_COLUMNS,
+      email,
+      values: {
+        "Signed up at": sheetTimestamp(),
+        "First name": firstName,
+        "Last name": lastName,
+        Phone: phone,
+        City: city,
+        "Postal code": postalCode,
+        Source: str(body.utm_source, 100),
+        Medium: str(body.utm_medium, 100),
+        Campaign: str(body.utm_campaign, 100),
+        Partner: PARTNER_SOURCE,
+      },
     });
 
-    // `identified` is false when Customer.io isn't configured (local dev).
-    return NextResponse.json({ success: true, identified });
+    try {
+      await identifyToCustomerio(email, {
+        first_name: firstName,
+        last_name: lastName,
+        name: `${firstName} ${lastName}`,
+        city,
+        postal_code: postalCode,
+        toronto_2026_build_the_vote_volunteer: true,
+        // A Unix timestamp, so date-based segments can use it.
+        toronto_2026_build_the_vote_signed_up_at: Math.floor(Date.now() / 1000),
+      });
+    } catch (err) {
+      console.error(err);
+    }
+
+    // Lets step 2 add to this row without the email in a URL or the page.
+    const response = NextResponse.json({ success: true });
+    response.cookies.set(EMAIL_COOKIE, email, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      path: DETAILS_API_PATH,
+      maxAge: 60 * 60 * 2,
+    });
+    return response;
   } catch (err) {
-    return NextResponse.json({ error: String(err) }, { status: 500 });
+    console.error(err);
+    return NextResponse.json(
+      { error: "Something went wrong. Please try again." },
+      { status: 500 },
+    );
   }
 }
+
+/** "416-555-0123", "(416) 555 0123", "+1 416…" → "(416) 555-0123". North
+ *  American numbers only; anything else returns "". */
+function normalizePhone(raw: unknown): string {
+  if (typeof raw !== "string") return "";
+  let digits = raw.replace(/\D/g, "");
+  if (digits.length === 11 && digits.startsWith("1")) digits = digits.slice(1);
+  if (digits.length !== 10) return "";
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 878b49f..bcdda7b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -8,8 +8,6 @@
 /* Bills sub-app theme — scoped under .bills-scope (see src/app/bills/bills.css). */
 @import "./bills/bills.css";
 
-/* CJPAC's Formstack forms on the Build the Vote pages. */
-@import "./toronto/volunteer/formstack.css";
 
 html {
   scroll-behavior: auto;
diff --git a/src/app/toronto/volunteer/FormstackForm.tsx b/src/app/toronto/volunteer/FormstackForm.tsx
deleted file mode 100644
index 4e61cfa..0000000
--- a/src/app/toronto/volunteer/FormstackForm.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-"use client";
-
-import { useEffect, useEffectEvent, useRef, useState } from "react";
-
-const FORMSTACK_ORIGIN = "https://cjpac.formstack.com";
-
-/**
- * Embeds one of CJPAC's Formstack forms and adjusts it to fit our page.
- *
- * Formstack's embed code is a script that document.write()s the form in place.
- * That only works while the HTML is still being parsed, so it can't run from a
- * React effect (and would wipe the page if it did). Instead we load it with
- * document.write captured, then insert what it wrote ourselves, running its
- * scripts in order. The form itself runs untouched; only where it lands moves.
- *
- * Formstack renders the form with React. Hiding fields with a stylesheet
- * keyed on their data-testid survives its re-renders, where setting
- * style.display on a node would not. Values are written through the native
- * setter plus an input event, which is what Formstack's controlled inputs
- * listen for; assigning `.value` directly would be overwritten on the next
- * render.
- *
- * `onSubmit` sees each submit that passes the form's own required-field
- * checks, before Formstack sends it. It's for copying the answers elsewhere;
- * it can't stop or delay the submit.
- *
- * `onSubmitted` keeps the visitor on our page. Formstack submits with a plain
- * form POST, so the page would follow the form's own redirect, which CJPAC
- * sets in Formstack and which may point back at their hosted forms. With
- * `onSubmitted`, the form posts into a hidden iframe instead: the submission
- * and its redirect happen in there, and when the iframe loads we call
- * `onSubmitted` so the page can go where we choose. The response is
- * cross-origin, so we can't read it; the iframe loading means Formstack took
- * the POST.
- */
-export function FormstackForm({
-  slug,
-  fill = {},
-  check = [],
-  hide = [],
-  onSubmit,
-  onSubmitted,
-}: {
-  /** the form's Formstack slug, e.g. "buildthevote_step1" */
-  slug: string;
-  /** text and hidden fields to fill, by Formstack field ID */
-  fill?: Record<string, string>;
-  /** checkbox fields to tick, by Formstack field ID */
-  check?: string[];
-  /** fields to hide, by Formstack field ID */
-  hide?: string[];
-  /** called with the form's values on a valid submit */
-  onSubmit?: (values: FormData) => void;
-  /** called once Formstack has received the submission; see above */
-  onSubmitted?: () => void;
-}) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [status, setStatus] = useState<"loading" | "ready" | "failed">(
-    "loading",
-  );
-
-  // The props are fixed per page, so an effect keyed on their contents runs
-  // once per mount, not on every render that passes a fresh object.
-  const fillKey = JSON.stringify(fill);
-  const checkKey = check.join(",");
-
-  const sinkName = `formstack-${slug}`;
-  // An iframe fires load once for its initial blank page; only a load after a
-  // submit is Formstack's response.
-  const submittedRef = useRef(false);
-
-  // Listening in the capture phase runs this before Formstack's own handler,
-  // which may navigate away. checkValidity() still works under the form's
-  // novalidate; it reads the required and type rules on each input.
-  const handleSubmit = useEffectEvent((event: Event) => {
-    const form = event.target;
-    if (!(form instanceof HTMLFormElement)) return;
-    if (onSubmitted) {
-      // Set before Formstack's handler calls form.submit(), which honours it.
-      form.target = sinkName;
-      submittedRef.current = true;
-    }
-    if (form.checkValidity()) onSubmit?.(new FormData(form));
-  });
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    container.addEventListener("submit", handleSubmit, true);
-    return () => container.removeEventListener("submit", handleSubmit, true);
-  }, []);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    let cancelled = false;
-    let observer: MutationObserver | undefined;
-
-    captureWrites(`${FORMSTACK_ORIGIN}/forms/js.php/${slug}`)
-      .then(async (html) => {
-        if (cancelled) return;
-        await insertHtml(container, html);
-        if (cancelled) return;
-        observer = applyWhenRendered(
-          container,
-          JSON.parse(fillKey) as Record<string, string>,
-          checkKey ? checkKey.split(",") : [],
-        );
-        setStatus("ready");
-      })
-      .catch(() => {
-        if (!cancelled) setStatus("failed");
-      });
-
-    return () => {
-      cancelled = true;
-      observer?.disconnect();
-      container.replaceChildren();
-    };
-  }, [slug, fillKey, checkKey]);
-
-  const hidden = hide
-    .map((id) => `[data-testid="field-${id}"],[data-testid^="field-${id}-"]`)
-    .join(",");
-
-  return (
-    <div className="formstack-embed">
-      {hidden && <style>{`${hidden}{display:none!important}`}</style>}
-      {status === "loading" && (
-        <p className="type-label text-text-secondary py-10">Loading the form…</p>
-      )}
-      {status === "failed" && (
-        <p className="font-serif text-[1.05rem] leading-[1.5] py-6">
-          The form didn&rsquo;t load.{" "}
-          <a
-            href={`${FORMSTACK_ORIGIN}/forms/${slug}`}
-            className="underline hover:text-accent"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Open it in a new tab
-          </a>
-          .
-        </p>
-      )}
-      <div ref={containerRef} />
-      {onSubmitted && (
-        <iframe
-          name={sinkName}
-          title="Form submission"
-          hidden
-          tabIndex={-1}
-          onLoad={() => {
-            if (submittedRef.current) onSubmitted();
-          }}
-        />
-      )}
-      <noscript>
-        <a href={`${FORMSTACK_ORIGIN}/forms/${slug}`} className="underline">
-          Open the form
-        </a>
-      </noscript>
-    </div>
-  );
-}
-
-/** Runs a document.write()-based embed script and returns what it wrote. */
-function captureWrites(src: string): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const chunks: string[] = [];
-    const { write, writeln } = document;
-    document.write = (...text: string[]) => {
-      chunks.push(text.join(""));
-    };
-    document.writeln = (...text: string[]) => {
-      chunks.push(text.join("") + "\n");
-    };
-    const restore = () => {
-      document.write = write;
-      document.writeln = writeln;
-      script.remove();
-    };
-
-    const script = document.createElement("script");
-    script.src = src;
-    script.onload = () => {
-      restore();
-      resolve(chunks.join(""));
-    };
-    script.onerror = () => {
-      restore();
-      reject(new Error(`Failed to load ${src}`));
-    };
-    document.head.appendChild(script);
-  });
-}
-
-/** Shared across mounts so navigating back to a form doesn't execute
- *  Formstack's renderer bundle a second time. */
-const loadedScripts = new Map<string, Promise<void>>();
-
-/**
- * Inserts HTML that contains scripts, running them in document order the way
- * the parser would have. Scripts inserted via innerHTML never execute, so each
- * one is recreated; an external script has to finish loading before the
- * inline script after it (which calls into it) runs.
- */
-async function insertHtml(container: HTMLElement, html: string) {
-  const template = document.createElement("template");
-  template.innerHTML = html;
-
-  for (const node of Array.from(template.content.childNodes)) {
-    if (!(node instanceof HTMLScriptElement)) {
-      container.appendChild(node);
-      continue;
-    }
-
-    if (node.src) {
-      const src = node.src;
-      let loaded = loadedScripts.get(src);
-      if (!loaded) {
-        loaded = new Promise<void>((resolve, reject) => {
-          const script = document.createElement("script");
-          script.src = src;
-          script.onload = () => resolve();
-          script.onerror = () => {
-            loadedScripts.delete(src);
-            reject(new Error(`Failed to load ${src}`));
-          };
-          document.head.appendChild(script);
-        });
-        loadedScripts.set(src, loaded);
-      }
-      await loaded;
-    } else {
-      const script = document.createElement("script");
-      script.textContent = node.textContent;
-      container.appendChild(script);
-    }
-  }
-}
-
-/**
- * Fills and ticks fields as Formstack renders them. Its render is async, so
- * the inputs may not exist yet when the scripts finish; we watch for each one
- * rather than assuming it's there. Gives up after 20 seconds.
- */
-function applyWhenRendered(
-  container: HTMLElement,
-  fill: Record<string, string>,
-  check: string[],
-): MutationObserver | undefined {
-  const pendingFill = new Map(Object.entries(fill).filter(([, v]) => v));
-  const pendingCheck = new Set(check);
-
-  const apply = () => {
-    for (const [id, value] of pendingFill) {
-      const input = container.querySelector<HTMLInputElement>(
-        `[name="field${id}"]`,
-      );
-      if (!input) continue;
-      if (input.value !== value) setNativeValue(input, value);
-      pendingFill.delete(id);
-    }
-    for (const id of pendingCheck) {
-      const box = container.querySelector<HTMLInputElement>(
-        `input[type="checkbox"][name="field${id}[]"]`,
-      );
-      if (!box) continue;
-      // A click, not `checked = true`, so Formstack's own handler records it.
-      if (!box.checked) box.click();
-      pendingCheck.delete(id);
-    }
-    return pendingFill.size === 0 && pendingCheck.size === 0;
-  };
-
-  if (apply()) return undefined;
-
-  const observer = new MutationObserver(() => {
-    if (apply()) observer.disconnect();
-  });
-  observer.observe(container, { childList: true, subtree: true });
-  setTimeout(() => observer.disconnect(), 20_000);
-  return observer;
-}
-
-function setNativeValue(input: HTMLInputElement, value: string) {
-  const setter = Object.getOwnPropertyDescriptor(
-    HTMLInputElement.prototype,
-    "value",
-  )?.set;
-  setter?.call(input, value);
-  input.dispatchEvent(new Event("input", { bubbles: true }));
-  input.dispatchEvent(new Event("change", { bubbles: true }));
-}
diff --git a/src/app/toronto/volunteer/SignupTracker.tsx b/src/app/toronto/volunteer/SignupTracker.tsx
index 5a61142..f1d52e0 100644
--- a/src/app/toronto/volunteer/SignupTracker.tsx
+++ b/src/app/toronto/volunteer/SignupTracker.tsx
@@ -4,15 +4,11 @@ import { useEffect } from "react";
 import posthog from "posthog-js";
 
 /**
- * Records a Build the Vote sign-up. The form lives in CJPAC's Formstack, so we
- * never see the submit itself. Landing on step 2 is the closest signal we have:
- * step 1's redirect is the only link to it.
+ * Records a Build the Vote sign-up. Step 1 only moves on to step 2 once the
+ * sign-up is saved, so landing here means it went through.
  */
 export function SignupTracker() {
   useEffect(() => {
-    // Inside the hidden iframe a form posts into (see FormstackForm), should
-    // CJPAC's redirect ever point here: the visible page records it instead.
-    if (window !== window.top) return;
     posthog.capture("volunteer_signed_up", { program: "build_the_vote" });
   }, []);
 
diff --git a/src/app/toronto/volunteer/VolunteerSignupForm.tsx b/src/app/toronto/volunteer/VolunteerSignupForm.tsx
index c712e49..77d9ced 100644
--- a/src/app/toronto/volunteer/VolunteerSignupForm.tsx
+++ b/src/app/toronto/volunteer/VolunteerSignupForm.tsx
@@ -1,71 +1,161 @@
 "use client";
 
-import { useRef } from "react";
+import { useState, type FormEvent } from "react";
+import { useRouter } from "next/navigation";
 import posthog from "posthog-js";
-import { FormstackForm } from "./FormstackForm";
-import { PARTNER_SOURCE, STEP_1, STEP_2_PATH } from "./build-the-vote";
+import { Button } from "@/components/ui/button";
+import { STEP_2_PATH } from "./build-the-vote";
 
-const { fields } = STEP_1;
+export const labelClass = "type-label block mb-2";
+export const inputClass =
+  "w-full border border-charcoal-300 bg-white px-3 py-2.5 font-serif text-[1.05rem] outline-none focus:border-charcoal-1000 transition-colors";
 
 /**
- * Step 1 of the sign-up. Formstack sends the volunteer to CJPAC; we also
- * identify them in PostHog and, through /api/volunteer, in Customer.io.
- *
- * Formstack may leave the page as soon as its submit handler runs, so the
- * Customer.io call goes as a keepalive request that outlives the navigation,
- * and nothing waits on it. Phone stays with CJPAC: the consent line covers
- * Build Canada email, not calls from us.
- *
- * Once Formstack has the submission we send the volunteer to our own step 2
- * ourselves, rather than following the redirect set in CJPAC's Formstack. The
- * email rides along in the URL as that redirect's would; the proxy moves it
- * into a cookie before the page renders (see src/proxy.ts).
+ * Step 1 of the sign-up. Posts to /api/volunteer, which writes the sign-up to
+ * the Sheet CJPAC works from and identifies the volunteer to Customer.io, then
+ * moves on to step 2. The visitor's utm_* tags ride along so CJPAC can see
+ * which of our campaigns brought them.
  */
 export function VolunteerSignupForm() {
-  const emailRef = useRef("");
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-  const handleSubmit = (values: FormData) => {
-    const value = (name: string) => {
-      const v = values.get(`field${name}`);
-      return typeof v === "string" ? v.trim() : "";
-    };
-    const email = value(fields.email);
-    if (!email) return;
-    emailRef.current = email;
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setError(null);
+    const fields = Object.fromEntries(new FormData(e.currentTarget));
+    const params = new URLSearchParams(window.location.search);
 
-    posthog.identify(email, { email });
-
-    fetch("/api/volunteer", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      keepalive: true,
-      body: JSON.stringify({
-        email,
-        first_name: value(`${fields.name}-first`),
-        last_name: value(`${fields.name}-last`),
-        city: value(`${fields.address}-city`),
-        postal_code: value(`${fields.address}-zip`),
-      }),
-    }).catch(() => {
-      // Best-effort: CJPAC still has the sign-up.
-    });
+    setLoading(true);
+    try {
+      const res = await fetch("/api/volunteer", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          ...fields,
+          utm_source: params.get("utm_source") ?? undefined,
+          utm_medium: params.get("utm_medium") ?? undefined,
+          utm_campaign: params.get("utm_campaign") ?? undefined,
+        }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setError(data.error || "Something went wrong. Please try again.");
+        setLoading(false);
+        return;
+      }
+      const email = String(fields.email).trim().toLowerCase();
+      posthog.identify(email, { email });
+      router.push(`${STEP_2_PATH}/`);
+    } catch {
+      setError("Network error. Please try again.");
+      setLoading(false);
+    }
   };
 
   return (
-    <FormstackForm
-      slug={STEP_1.slug}
-      fill={{ [fields.utmSource]: PARTNER_SOURCE }}
-      check={[fields.emailOptIn]}
-      hide={[fields.utmSource, fields.emailOptIn, fields.consent]}
+    <form
+      id="volunteer-signup"
+      name="volunteer-signup"
       onSubmit={handleSubmit}
-      onSubmitted={() => {
-        const email = emailRef.current;
-        window.location.assign(
-          email
-            ? `${STEP_2_PATH}/?email=${encodeURIComponent(email)}`
-            : `${STEP_2_PATH}/`,
-        );
-      }}
-    />
+      className="flex flex-col gap-5"
+    >
+      <fieldset>
+        <legend className={labelClass}>Name</legend>
+        <div className="grid grid-cols-2 gap-3">
+          <input
+            type="text"
+            name="first_name"
+            autoComplete="given-name"
+            placeholder="First name"
+            aria-label="First name"
+            required
+            maxLength={50}
+            className={inputClass}
+          />
+          <input
+            type="text"
+            name="last_name"
+            autoComplete="family-name"
+            placeholder="Last name"
+            aria-label="Last name"
+            required
+            maxLength={50}
+            className={inputClass}
+          />
+        </div>
+      </fieldset>
+      <label>
+        <span className={labelClass}>Email</span>
+        <input
+          type="email"
+          name="email"
+          autoComplete="email"
+          required
+          maxLength={254}
+          className={inputClass}
+        />
+      </label>
+      <label>
+        <span className={labelClass}>Phone</span>
+        <input
+          type="tel"
+          name="phone"
+          autoComplete="tel"
+          required
+          maxLength={20}
+          className={inputClass}
+        />
+      </label>
+      <fieldset>
+        <legend className={labelClass}>City and postal code</legend>
+        <div className="grid grid-cols-[minmax(0,3fr)_minmax(0,2fr)] md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] gap-3">
+          <input
+            type="text"
+            name="city"
+            autoComplete="address-level2"
+            placeholder="City"
+            aria-label="City"
+            required
+            maxLength={100}
+            className={inputClass}
+          />
+          <input
+            type="text"
+            name="postal_code"
+            autoComplete="postal-code"
+            placeholder="Postal code"
+            aria-label="Postal code"
+            required
+            maxLength={7}
+            className={inputClass}
+          />
+        </div>
+      </fieldset>
+      {/* For bots only: hidden from people and screen readers. */}
+      <input
+        type="text"
+        name="website"
+        tabIndex={-1}
+        autoComplete="off"
+        aria-hidden="true"
+        className="hidden"
+      />
+      <div>
+        <Button
+          as="button"
+          type="submit"
+          variant="auburn"
+          disabled={loading}
+          className="px-7 py-4.5"
+        >
+          {loading ? "Signing you up…" : "Sign up"}
+        </Button>
+        <p role="alert" className="type-label-sm text-auburn-800 mt-3 min-h-[1.3em]">
+          {error}
+        </p>
+      </div>
+    </form>
   );
 }
diff --git a/src/app/toronto/volunteer/build-the-vote.ts b/src/app/toronto/volunteer/build-the-vote.ts
index eff546d..be5bfed 100644
--- a/src/app/toronto/volunteer/build-the-vote.ts
+++ b/src/app/toronto/volunteer/build-the-vote.ts
@@ -1,56 +1,62 @@
 // Build the Vote: the Election Day volunteer drive we run with CJPAC.
 //
-// The two sign-up forms live in CJPAC's Formstack account, not ours. CJPAC
-// owns the forms' fields and their submit redirects (step 1 → STEP_2_PATH with
-// the volunteer's email, step 2 → THANKS_PATH), and receives every lead. What
-// we own is the page around each form, so every Formstack ID this site depends
-// on is collected here: if CJPAC rebuilds a form, this is the file to update.
+// Volunteers sign up in two steps on our own forms. /api/volunteer writes each
+// sign-up to a Google Sheet shared with CJPAC (src/lib/google-sheet.ts), which
+// is how CJPAC gets its leads, and identifies the volunteer to Customer.io.
+// Step 2 adds optional details to the same row of the Sheet.
 
 export const VOLUNTEER_PATH = "/toronto/volunteer";
 export const STEP_2_PATH = `${VOLUNTEER_PATH}/step-2`;
 export const THANKS_PATH = `${VOLUNTEER_PATH}/thanks`;
 
-/** Written into each form's "UTM Source" field so CJPAC can tell our sign-ups
- *  from those of their other partners. Not the visitor's own utm_source: that
- *  stays on the URL for our analytics and lands in the form's hidden
- *  "Campaign Source" field on its own. */
+/** Written to every row's Partner column so CJPAC can tell our sign-ups from
+ *  those of their other partners. Not the visitor's own utm_source, which goes
+ *  in the Source column. */
 export const PARTNER_SOURCE = "buildcanada";
 
-export const STEP_1 = {
-  slug: "buildthevote_step1",
-  fields: {
-    /** Split by Formstack into `-first` and `-last` inputs. */
-    name: "199478140",
-    email: "199478141",
-    /** Asks only for city and postal code: `-city` and `-zip` inputs. */
-    address: "199478143",
-    /** Visible in the form as built, so we fill it with PARTNER_SOURCE and
-     *  hide it. */
-    utmSource: "199478149",
-    /** The opt-in checkbox for Build Canada email. Replaced by the consent
-     *  line under the form, which makes submitting the form the opt-in. */
-    emailOptIn: "199478245",
-    /** CJPAC's own consent copy. Ours (CONSENT below) includes it and adds
-     *  Build Canada email, so theirs is hidden rather than shown twice. */
-    consent: "199478150",
-  },
-} as const;
-
-export const STEP_2 = {
-  slug: "buildthevote_step2",
-  fields: {
-    /** Hidden in the form. Carries the email from step 1 so CJPAC can join
-     *  the two submissions. */
-    email: "199478152",
-  },
-} as const;
-
-/** Query parameters the step 1 redirect may carry the volunteer's email in.
- *  The proxy strips both before the page renders (see src/proxy.ts). */
-export const EMAIL_PARAMS = ["email", `field${STEP_2.fields.email}`] as const;
-
-/** Holds the email across the proxy's redirect to the clean step-2 URL. */
+/** The tab of CJPAC's Sheet that sign-ups are written to, and the header row
+ *  it starts with if empty. Values are matched to columns by these names, so
+ *  renaming one in the Sheet means renaming it here too. */
+export const SHEET_TAB = "Sign-ups";
+export const SHEET_COLUMNS = [
+  "Signed up at",
+  "First name",
+  "Last name",
+  "Email",
+  "Phone",
+  "City",
+  "Postal code",
+  "Availability",
+  "Mayoral candidate",
+  "Issues",
+  "Details added at",
+  "Source",
+  "Medium",
+  "Campaign",
+  "Partner",
+] as const;
+
+/** Set by step 1's API response so step 2 can add to the right row without
+ *  the email ever appearing in a URL or in the page. httpOnly, and scoped to
+ *  the API path step 2 posts to. */
 export const EMAIL_COOKIE = "btv_email";
+export const DETAILS_API_PATH = "/api/volunteer/details";
+
+/** Step 2's questions, worded as CJPAC wrote them for their Formstack form.
+ *  The API accepts only these options. */
+export const AVAILABILITY_OPTIONS = [
+  "All day",
+  "Morning",
+  "Afternoon",
+  "Evening",
+] as const;
+
+export const MAYORAL_OPTIONS = [
+  "Brad Bradford",
+  "Olivia Chow",
+  "Other / Not sure",
+  "Prefer not to say",
+] as const;
 
 export const CONSENT =
   "By submitting this form, you consent to being contacted by a CJPAC staff member or volunteer and to receive Build Canada emails.";
diff --git a/src/app/toronto/volunteer/formstack.css b/src/app/toronto/volunteer/formstack.css
deleted file mode 100644
index 88b2d07..0000000
--- a/src/app/toronto/volunteer/formstack.css
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
- * CJPAC's Formstack forms, restyled to match our own inputs (see SubscribeForm)
- * and Button. Imported once from src/app/globals.css.
- *
- * Formstack styles the form with styled-components: hashed class names that
- * change between renderer releases, so these rules hang off the stable fs*
- * classes and element types instead. Its rules arrive after ours and can be as
- * specific, hence the !important on anything it also sets.
- */
-
-.formstack-embed .fsBody,
-.formstack-embed .fsForm,
-.formstack-embed .fsPage,
-.formstack-embed .fsSection,
-.formstack-embed .fsBody > div {
-  background: transparent !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  max-width: none !important;
-  width: 100% !important;
-  border: 0 !important;
-  box-shadow: none !important;
-}
-
-.formstack-embed .fsFieldCell {
-  margin: 0 0 1.25rem !important;
-  padding: 0 !important;
-}
-
-.formstack-embed .fsLabel,
-.formstack-embed legend {
-  font-family: var(--font-label) !important;
-  font-size: 0.75rem !important;
-  font-weight: 500 !important;
-  letter-spacing: 0.14em !important;
-  line-height: 1.3 !important;
-  text-transform: uppercase !important;
-  color: var(--color-dark) !important;
-  margin-bottom: 0.5rem !important;
-}
-
-.formstack-embed .fsRequiredMarker {
-  color: var(--color-accent) !important;
-  margin-left: 0.25em;
-}
-
-/* Sub-labels under split fields ("First Name", "Postal Code") and supporting
-   text. */
-.formstack-embed .fsSubField label,
-.formstack-embed .fsSupportingSubLabel,
-.formstack-embed .fsSupporting {
-  font-family: var(--font-serif) !important;
-  font-size: 0.95rem !important;
-  color: var(--color-text-secondary) !important;
-  margin-top: 0.35rem !important;
-}
-
-.formstack-embed input[type="text"],
-.formstack-embed input[type="email"],
-.formstack-embed input[type="tel"],
-.formstack-embed select,
-.formstack-embed textarea {
-  width: 100% !important;
-  border: 1px solid var(--color-charcoal-300) !important;
-  border-radius: 0 !important;
-  background: #fff !important;
-  color: var(--color-dark) !important;
-  font-family: var(--font-serif) !important;
-  font-size: 1.05rem !important;
-  line-height: 1.4 !important;
-  padding: 0.65rem 0.75rem !important;
-  height: auto !important;
-  box-shadow: none !important;
-  outline: none !important;
-  transition: border-color 0.15s;
-}
-
-.formstack-embed input:focus,
-.formstack-embed select:focus,
-.formstack-embed textarea:focus {
-  border-color: var(--color-dark) !important;
-}
-
-.formstack-embed .fsOptionLabel {
-  font-family: var(--font-serif) !important;
-  font-size: 1.05rem !important;
-  color: var(--color-dark) !important;
-  display: flex !important;
-  align-items: center;
-  gap: 0.6rem;
-}
-
-.formstack-embed input[type="checkbox"],
-.formstack-embed input[type="radio"] {
-  accent-color: var(--color-accent);
-}
-
-.formstack-embed .fsSubmit,
-.formstack-embed [id^="fsSubmit"] {
-  background: transparent !important;
-  padding: 0.5rem 0 0 !important;
-  margin: 0 !important;
-  border: 0 !important;
-  text-align: left !important;
-}
-
-/* Matches Button's "auburn" variant, which reads as Toronto blue inside the
-   election theme. */
-.formstack-embed .fsSubmitButton {
-  background: var(--color-auburn-800) !important;
-  border: 1px solid var(--color-auburn-800) !important;
-  border-radius: 0 !important;
-  color: #fff !important;
-  font-family: var(--font-label) !important;
-  font-size: 0.75rem !important;
-  font-weight: 500 !important;
-  letter-spacing: 0.14em !important;
-  text-transform: uppercase !important;
-  padding: 1.1rem 1.75rem !important;
-  width: auto !important;
-  cursor: pointer;
-  transition: opacity 0.15s;
-}
-
-.formstack-embed .fsSubmitButton:hover {
-  opacity: 0.8;
-}
-
-.formstack-embed .fsSubmitButton:focus-visible {
-  outline: 2px solid var(--color-dark) !important;
-  outline-offset: 3px;
-}
diff --git a/src/app/toronto/volunteer/step-2/Step2Form.tsx b/src/app/toronto/volunteer/step-2/Step2Form.tsx
index 81b1773..49b3d80 100644
--- a/src/app/toronto/volunteer/step-2/Step2Form.tsx
+++ b/src/app/toronto/volunteer/step-2/Step2Form.tsx
@@ -1,16 +1,125 @@
 "use client";
 
-import { FormstackForm } from "../FormstackForm";
-import { STEP_2, THANKS_PATH } from "../build-the-vote";
+import { useState, type FormEvent } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import {
+  AVAILABILITY_OPTIONS,
+  DETAILS_API_PATH,
+  MAYORAL_OPTIONS,
+  THANKS_PATH,
+} from "../build-the-vote";
+import { inputClass, labelClass } from "../VolunteerSignupForm";
+
+const optionClass =
+  "flex items-center gap-2.5 font-serif text-[1.05rem] cursor-pointer";
+
+/**
+ * Step 2: optional details for the volunteer's coordinator, added to their row
+ * in CJPAC's Sheet. The API finds the row from a cookie step 1 set, so this
+ * form never needs the email. If that cookie has expired the sign-up itself
+ * is already saved, so the volunteer goes on to the thanks page regardless.
+ */
+export function Step2Form() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setError(null);
+    const data = new FormData(e.currentTarget);
+
+    setLoading(true);
+    try {
+      const res = await fetch(DETAILS_API_PATH, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          availability: data.getAll("availability"),
+          mayoral: data.get("mayoral") ?? "",
+          issues: data.get("issues") ?? "",
+        }),
+      });
+      if (!res.ok && res.status !== 401) {
+        const body = await res.json().catch(() => ({}));
+        setError(body.error || "Something went wrong. Please try again.");
+        setLoading(false);
+        return;
+      }
+      router.push(`${THANKS_PATH}/`);
+    } catch {
+      setError("Network error. Please try again.");
+      setLoading(false);
+    }
+  };
 
-/** Step 2's form. Like step 1, it goes to our own next page once Formstack
- *  has the answers, whatever redirect CJPAC has set. */
-export function Step2Form({ email }: { email: string }) {
   return (
-    <FormstackForm
-      slug={STEP_2.slug}
-      fill={{ [STEP_2.fields.email]: email }}
-      onSubmitted={() => window.location.assign(`${THANKS_PATH}/`)}
-    />
+    <form onSubmit={handleSubmit} className="flex flex-col gap-7">
+      <p className="font-serif text-[1.05rem] leading-[1.5] text-text-secondary">
+        All questions are optional.
+      </p>
+      <fieldset>
+        <legend className={labelClass}>
+          What is your availability to volunteer on October&nbsp;26?
+        </legend>
+        <div className="flex flex-col gap-2.5 mt-1">
+          {AVAILABILITY_OPTIONS.map((option) => (
+            <label key={option} className={optionClass}>
+              <input
+                type="checkbox"
+                name="availability"
+                value={option}
+                className="size-4 accent-accent"
+              />
+              {option}
+            </label>
+          ))}
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend className={labelClass}>
+          Which mayoral candidate best aligns with your values and priorities?
+        </legend>
+        <div className="flex flex-col gap-2.5 mt-1">
+          {MAYORAL_OPTIONS.map((option) => (
+            <label key={option} className={optionClass}>
+              <input
+                type="radio"
+                name="mayoral"
+                value={option}
+                className="size-4 accent-accent"
+              />
+              {option}
+            </label>
+          ))}
+        </div>
+      </fieldset>
+      <label>
+        <span className={labelClass}>
+          In these municipal elections, what issues are most important to you?
+        </span>
+        <textarea
+          name="issues"
+          rows={4}
+          maxLength={2000}
+          className={`${inputClass} resize-y`}
+        />
+      </label>
+      <div>
+        <Button
+          as="button"
+          type="submit"
+          variant="auburn"
+          disabled={loading}
+          className="px-7 py-4.5"
+        >
+          {loading ? "Saving…" : "Finish"}
+        </Button>
+        <p role="alert" className="type-label-sm text-auburn-800 mt-3 min-h-[1.3em]">
+          {error}
+        </p>
+      </div>
+    </form>
   );
 }
diff --git a/src/app/toronto/volunteer/step-2/page.tsx b/src/app/toronto/volunteer/step-2/page.tsx
index d7460a3..d17dc95 100644
--- a/src/app/toronto/volunteer/step-2/page.tsx
+++ b/src/app/toronto/volunteer/step-2/page.tsx
@@ -1,25 +1,17 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { cookies } from "next/headers";
 import { ELECTION } from "../../vote/2026/key-dates";
 import { SignupTracker } from "../SignupTracker";
 import { Step2Form } from "./Step2Form";
 import { GUTTER_LEFT, GUTTER_RIGHT } from "../gutter";
-import {
-  CJPAC_URL,
-  EMAIL_COOKIE,
-  THANKS_PATH,
-} from "../build-the-vote";
+import { CJPAC_URL, THANKS_PATH } from "../build-the-vote";
 
 export const metadata: Metadata = {
   title: "A few more questions",
   robots: { index: false, follow: false },
 };
 
-export default async function VolunteerStep2Page() {
-  // Put here by src/proxy.ts, which took it off the URL step 1 redirected to.
-  const email = (await cookies()).get(EMAIL_COOKIE)?.value ?? "";
-
+export default function VolunteerStep2Page() {
   return (
     <div className={`${ELECTION.themeClass ?? ""} bg-bg text-dark`}>
       <SignupTracker />
@@ -40,7 +32,7 @@ export default async function VolunteerStep2Page() {
             </p>
           </div>
           <div className={`${GUTTER_RIGHT} py-12 md:py-16`}>
-            <Step2Form email={email} />
+            <Step2Form />
             <p className="font-serif text-[1rem] leading-[1.5] text-text-secondary mt-6 max-w-[56ch]">
               Sign-ups are handled by our volunteer partner,{" "}
               <a
diff --git a/src/lib/google-sheet.test.ts b/src/lib/google-sheet.test.ts
new file mode 100644
index 0000000..0d858e0
--- /dev/null
+++ b/src/lib/google-sheet.test.ts
@@ -0,0 +1,134 @@
+import { before, beforeEach, test } from "node:test";
+import assert from "node:assert/strict";
+import { exportPKCS8, generateKeyPair, jwtVerify, type KeyLike } from "jose";
+
+import { upsertSheetRow } from "./google-sheet";
+
+// An in-memory stand-in for the Sheets API and Google's token endpoint, just
+// enough of each for upsertSheetRow: read the tab, write the header row,
+// append a row, and batch-update cells.
+
+let publicKey: KeyLike;
+
+before(async () => {
+  const keys = await generateKeyPair("RS256", { extractable: true });
+  publicKey = keys.publicKey;
+  process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL = "sheets@test.iam.gserviceaccount.com";
+  // Stored with literal \n, the way env dashboards often hold it.
+  process.env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY = (
+    await exportPKCS8(keys.privateKey)
+  ).replace(/\n/g, "\\n");
+  process.env.GOOGLE_SHEET_ID = "sheet123";
+});
+
+let grid: string[][];
+let tokenRequests: number;
+
+beforeEach(() => {
+  grid = [];
+  tokenRequests = 0;
+});
+
+const cell = (a1: string) => {
+  const [, letters, row] = a1.match(/^([A-Z]+)(\d+)$/)!;
+  const col = [...letters].reduce((n, c) => n * 26 + c.charCodeAt(0) - 64, 0);
+  return { row: Number(row) - 1, col: col - 1 };
+};
+
+globalThis.fetch = (async (input: string | URL, init: RequestInit = {}) => {
+  const url = new URL(String(input));
+  const json = (body: unknown) =>
+    new Response(JSON.stringify(body), { status: 200 });
+
+  if (url.host === "oauth2.googleapis.com") {
+    tokenRequests++;
+    const assertion = new URLSearchParams(String(init.body)).get("assertion")!;
+    const { payload } = await jwtVerify(assertion, publicKey, {
+      issuer: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
+      audience: "https://oauth2.googleapis.com/token",
+    });
+    assert.equal(payload.scope, "https://www.googleapis.com/auth/spreadsheets");
+    return json({ access_token: "token", expires_in: 3600 });
+  }
+
+  assert.equal(new Headers(init.headers).get("Authorization"), "Bearer token");
+  const path = decodeURIComponent(url.pathname).replace(
+    "/v4/spreadsheets/sheet123",
+    "",
+  );
+  const body = init.body ? JSON.parse(String(init.body)) : undefined;
+
+  if (path === "/values/'Sign-ups'!A:ZZ") {
+    return json(grid.length ? { values: grid } : {});
+  }
+  if (path === "/values/'Sign-ups'!1:1" && init.method === "PUT") {
+    grid[0] = body.values[0];
+    return json({});
+  }
+  if (path === "/values/'Sign-ups'!A:A:append") {
+    assert.equal(url.searchParams.get("valueInputOption"), "RAW");
+    grid.push(body.values[0]);
+    return json({});
+  }
+  if (path === "/values:batchUpdate") {
+    assert.equal(body.valueInputOption, "RAW");
+    for (const { range, values } of body.data) {
+      const { row, col } = cell(range.replace("'Sign-ups'!", ""));
+      grid[row][col] = values[0][0];
+    }
+    return json({});
+  }
+  throw new Error(`Unexpected request: ${init.method ?? "GET"} ${path}`);
+}) as typeof fetch;
+
+const write = (email: string, values: Record<string, string>) =>
+  upsertSheetRow({
+    tab: "Sign-ups",
+    columns: ["Signed up at", "Email", "Phone", "Availability"],
+    email,
+    values,
+  });
+
+test("writes the header row and the first sign-up to an empty sheet", async () => {
+  assert.equal(await write("A@x.com", { "Signed up at": "t1", Phone: "p1" }), true);
+  assert.deepEqual(grid, [
+    ["Signed up at", "Email", "Phone", "Availability"],
+    ["t1", "a@x.com", "p1", ""],
+  ]);
+});
+
+test("fills in the existing row for the same email, whatever its case", async () => {
+  await write("a@x.com", { "Signed up at": "t1", Phone: "p1" });
+  await write("b@x.com", { "Signed up at": "t2", Phone: "p2" });
+  await write("A@X.com", { Availability: "Morning" });
+  assert.deepEqual(grid.slice(1), [
+    ["t1", "a@x.com", "p1", "Morning"],
+    ["t2", "b@x.com", "p2", ""],
+  ]);
+});
+
+test("follows the Sheet's own column order and adds missing columns", async () => {
+  grid = [["Phone", "Email", "Signed up at"]];
+  await write("a@x.com", { "Signed up at": "t1", Phone: "p1", Issues: "Housing" });
+  assert.deepEqual(grid, [
+    ["Phone", "Email", "Signed up at", "Issues"],
+    ["p1", "a@x.com", "t1", "Housing"],
+  ]);
+});
+
+test("reuses the access token across writes", async () => {
+  await write("a@x.com", { Phone: "p1" });
+  await write("b@x.com", { Phone: "p2" });
+  assert.ok(tokenRequests <= 1);
+});
+
+test("skips the Sheet when it isn't configured outside production", async () => {
+  const id = process.env.GOOGLE_SHEET_ID;
+  delete process.env.GOOGLE_SHEET_ID;
+  try {
+    assert.equal(await write("a@x.com", { Phone: "p1" }), false);
+    assert.deepEqual(grid, []);
+  } finally {
+    process.env.GOOGLE_SHEET_ID = id;
+  }
+});
diff --git a/src/lib/google-sheet.ts b/src/lib/google-sheet.ts
new file mode 100644
index 0000000..dc77b7c
--- /dev/null
+++ b/src/lib/google-sheet.ts
@@ -0,0 +1,201 @@
+// Writes rows to a Google Sheet through the Sheets API, as a service account.
+//
+// Setup: create a service account in Google Cloud with the Sheets API enabled,
+// make it a JSON key, and share the Sheet with the account's email as an
+// Editor. Then set:
+//   GOOGLE_SERVICE_ACCOUNT_EMAIL        the account's client_email
+//   GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY  its private_key (\n escapes are fine)
+//   GOOGLE_SHEET_ID                     from the Sheet's URL: /d/<id>/edit
+//
+// Rows are upserted by email: the first write for an email appends a row,
+// later ones fill in that row. Values are keyed by header name, so columns can
+// be reordered or added in the Sheet freely. Everything is written RAW, so a
+// value someone typed is never read as a formula.
+
+import { SignJWT, importPKCS8 } from "jose";
+
+const SHEETS_API = "https://sheets.googleapis.com/v4/spreadsheets";
+const TOKEN_URL = "https://oauth2.googleapis.com/token";
+const SCOPE = "https://www.googleapis.com/auth/spreadsheets";
+const EMAIL_COLUMN = "Email";
+
+export type SheetRow = Record<string, string | undefined>;
+
+/**
+ * Upserts the row for `email` on the `tab` sheet. On an empty sheet, writes
+ * `columns` as the header row first; a value whose header is missing gets a
+ * new column at the end.
+ *
+ * Returns false without writing when the Sheet isn't configured outside
+ * production (local development). In production a missing configuration
+ * throws, since the Sheet is how sign-ups reach CJPAC.
+ */
+export async function upsertSheetRow({
+  tab,
+  columns,
+  email,
+  values,
+}: {
+  tab: string;
+  columns: readonly string[];
+  email: string;
+  values: SheetRow;
+}): Promise<boolean> {
+  const config = sheetConfig();
+  if (!config) {
+    if (process.env.NODE_ENV === "production") {
+      throw new Error(
+        "GOOGLE_SERVICE_ACCOUNT_EMAIL, _PRIVATE_KEY and GOOGLE_SHEET_ID must be set",
+      );
+    }
+    return false;
+  }
+  const api = sheetsClient(config);
+  const key = email.trim().toLowerCase();
+  const range = (a1: string) => encodeURIComponent(`'${tab}'!${a1}`);
+
+  const { values: rows = [] } = (await api(`/values/${range("A:ZZ")}`)) as {
+    values?: string[][];
+  };
+
+  const headers = rows[0]?.length ? [...rows[0]] : [...columns];
+  const written: SheetRow = { ...values, [EMAIL_COLUMN]: key };
+  const missing = Object.keys(written).filter((h) => !headers.includes(h));
+  headers.push(...missing);
+  if (!rows[0]?.length || missing.length) {
+    await api(`/values/${range("1:1")}?valueInputOption=RAW`, {
+      method: "PUT",
+      body: JSON.stringify({ values: [headers] }),
+    });
+  }
+
+  const emailCol = headers.indexOf(EMAIL_COLUMN);
+  const existing = rows.findIndex(
+    (row, i) => i > 0 && row[emailCol]?.trim().toLowerCase() === key,
+  );
+
+  if (existing === -1) {
+    await api(
+      `/values/${range("A:A")}:append?valueInputOption=RAW&insertDataOption=INSERT_ROWS`,
+      {
+        method: "POST",
+        body: JSON.stringify({
+          values: [headers.map((h) => written[h] ?? "")],
+        }),
+      },
+    );
+  } else {
+    // Only the columns this write carries; the rest of the row is left alone.
+    const rowNumber = existing + 1;
+    await api(`/values:batchUpdate`, {
+      method: "POST",
+      body: JSON.stringify({
+        valueInputOption: "RAW",
+        data: Object.entries(values)
+          .filter(([, v]) => v !== undefined)
+          .map(([h, v]) => ({
+            range: `'${tab}'!${columnLetter(headers.indexOf(h))}${rowNumber}`,
+            values: [[v]],
+          })),
+      }),
+    });
+  }
+  return true;
+}
+
+/** "2026-10-16 09:20" in Toronto time: readable in the Sheet, and sorts. */
+export function sheetTimestamp(date = new Date()): string {
+  const parts = Object.fromEntries(
+    new Intl.DateTimeFormat("en-CA", {
+      timeZone: "America/Toronto",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      hourCycle: "h23",
+    })
+      .formatToParts(date)
+      .map((p) => [p.type, p.value]),
+  );
+  return `${parts.year}-${parts.month}-${parts.day} ${parts.hour}:${parts.minute}`;
+}
+
+type SheetConfig = { clientEmail: string; privateKey: string; sheetId: string };
+
+function sheetConfig(): SheetConfig | null {
+  const clientEmail = process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL;
+  const privateKey = process.env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY;
+  const sheetId = process.env.GOOGLE_SHEET_ID;
+  if (!clientEmail || !privateKey || !sheetId) return null;
+  // Env files and dashboards often hold the key's newlines as literal \n.
+  return { clientEmail, privateKey: privateKey.replace(/\\n/g, "\n"), sheetId };
+}
+
+function sheetsClient(config: SheetConfig) {
+  return async (path: string, init: RequestInit = {}) => {
+    const res = await fetch(`${SHEETS_API}/${config.sheetId}${path}`, {
+      ...init,
+      headers: {
+        Authorization: `Bearer ${await accessToken(config)}`,
+        "Content-Type": "application/json",
+      },
+      cache: "no-store",
+    });
+    if (!res.ok) {
+      throw new Error(
+        `Google Sheets ${init.method ?? "GET"} failed: ${res.status} ${(await res.text()).slice(0, 300)}`,
+      );
+    }
+    return res.json();
+  };
+}
+
+// Tokens last an hour; reused across requests on a warm server.
+let cachedToken: { value: string; expiresAt: number } | undefined;
+
+/** Exchanges a signed JWT for an access token (Google's service account
+ *  flow), without pulling in Google's client libraries. */
+async function accessToken(config: SheetConfig): Promise<string> {
+  if (cachedToken && cachedToken.expiresAt > Date.now() + 60_000) {
+    return cachedToken.value;
+  }
+  const now = Math.floor(Date.now() / 1000);
+  const assertion = await new SignJWT({ scope: SCOPE })
+    .setProtectedHeader({ alg: "RS256", typ: "JWT" })
+    .setIssuer(config.clientEmail)
+    .setAudience(TOKEN_URL)
+    .setIssuedAt(now)
+    .setExpirationTime(now + 3600)
+    .sign(await importPKCS8(config.privateKey, "RS256"));
+
+  const res = await fetch(TOKEN_URL, {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: new URLSearchParams({
+      grant_type: "urn:ietf:params:oauth:grant-type:jwt-bearer",
+      assertion,
+    }),
+    cache: "no-store",
+  });
+  if (!res.ok) {
+    throw new Error(
+      `Google token exchange failed: ${res.status} ${(await res.text()).slice(0, 300)}`,
+    );
+  }
+  const { access_token, expires_in } = await res.json();
+  cachedToken = { value: access_token, expiresAt: Date.now() + expires_in * 1000 };
+  return access_token;
+}
+
+/** 0 → "A", 25 → "Z", 26 → "AA". */
+function columnLetter(index: number): string {
+  let n = index + 1;
+  let letters = "";
+  while (n > 0) {
+    const r = (n - 1) % 26;
+    letters = String.fromCharCode(65 + r) + letters;
+    n = Math.floor((n - 1) / 26);
+  }
+  return letters;
+}
diff --git a/src/proxy.ts b/src/proxy.ts
index 1c48621..addef4b 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -8,20 +8,14 @@ import {
   refreshAccessToken,
   setSessionCookies,
 } from "@/lib/oauth";
-import {
-  EMAIL_COOKIE,
-  EMAIL_PARAMS,
-  STEP_2_PATH,
-} from "@/app/toronto/volunteer/build-the-vote";
 
 const FLAG = "dashboard";
 
 // Next 16 allows a single proxy (formerly "middleware") entrypoint, so this file
-// owns four unrelated concerns, dispatched by path:
+// owns three unrelated concerns, dispatched by path:
 //   - /dashboard/*                         → gate the section behind the `dashboard` PostHog flag
 //   - /memos/*, /posts/*, /builders/*      → serve markdown to LLM agents (.md suffix or Accept header)
 //   - /memos/*, /api/auth/me               → silently renew an expired OAuth session
-//   - /toronto/volunteer/step-2            → move the volunteer's email out of the URL
 export const config = {
   matcher: [
     "/memos/:path*",
@@ -31,8 +25,6 @@ export const config = {
     "/api/auth/me",
     "/dashboard",
     "/dashboard/:path*",
-    "/toronto/volunteer/step-2",
-    "/toronto/volunteer/step-2/",
   ],
 };
 
@@ -43,10 +35,6 @@ const MARKDOWN_CONTENT = /^\/(memos|polls|posts|builders)\/([^/]+?)(\.md)?$/;
 export async function proxy(req: NextRequest) {
   const { pathname } = req.nextUrl;
 
-  if (pathname.replace(/\/$/, "") === STEP_2_PATH) {
-    return stripVolunteerEmail(req);
-  }
-
   if (pathname === "/dashboard" || pathname.startsWith("/dashboard/")) {
     return gateDashboard(req);
   }
@@ -60,32 +48,6 @@ export async function proxy(req: NextRequest) {
   return NextResponse.next();
 }
 
-// CJPAC's step 1 form sends volunteers to step 2 with their email in the query
-// string, so step 2's hidden email field can tie the two submissions together.
-// Left there, every analytics tag and pixel in the root layout would record it
-// with the page URL. So before any HTML is served, the email moves into a
-// short-lived cookie scoped to this one page, and the browser is sent to the
-// same URL without it. Other parameters (utm_*) survive the hop.
-function stripVolunteerEmail(req: NextRequest): NextResponse {
-  const url = req.nextUrl.clone();
-  const email = EMAIL_PARAMS.map((p) => url.searchParams.get(p)).find(Boolean);
-  if (!email) return NextResponse.next();
-
-  for (const p of EMAIL_PARAMS) url.searchParams.delete(p);
-  const response = NextResponse.redirect(url, 303);
-  response.cookies.set(EMAIL_COOKIE, email, {
-    httpOnly: true,
-    secure: process.env.NODE_ENV === "production",
-    sameSite: "lax",
-    path: STEP_2_PATH,
-    maxAge: 60 * 30,
-  });
-  // The redirect itself carries the email in its request URL; keep it out of
-  // any shared cache.
-  response.headers.set("Cache-Control", "no-store");
-  return response;
-}
-
 // Rewrites both public markdown shapes to the internal /md route:
 //   /memos/foo.md                                  → /md/memos/foo
 //   /memos/foo + `Accept: text/markdown` header    → /md/memos/foo