# TanStack Start で見込み客を選別するリードフォームを作る > TanStack Start のリードフォームです。ファーストタッチの UTM を記録するグローバルなリクエストミドルウェア、Zod を使うサーバー関数、日程調整ツールへの throw によるリダイレクトを組み合わせます。 公開日 2026-10-25 · https://ikiform.com/ja/guides/lead-capture/tanstack-start `src/start.ts` のグローバルなリクエストミドルウェアで、最初のページリクエストの UTM タグとリファラーを記録し、httpOnly の Cookie に保持します。`createServerFn` のハンドラーで Zod を使ってリードを検証し、流入元の情報と一緒にフォームバックエンドへ転送して、`redirect({ href })` を throw して条件に合うリードを日程調整ツールに送ります。サーバー関数は `useServerFn` 経由で呼ぶと、リダイレクトを自動でたどってくれます。 [メインガイドの TanStack Start タブ](https://ikiform.com/ja/guides/lead-capture.md#form)では、サーバー関数でリードを送ってお礼の一文を表示します。このページでは営業向けの版を作ります。サーバーで検証する 3 つの選別用の質問、訪問者を連れてきたキャンペーン、条件に合うリードのカレンダーへの直接のリダイレクトです。 ## TanStack Start で変わること Start には、ファイルベースのミドルウェアの規約がありません。すべてのリクエストで動かすべきものは、グローバルなリクエストミドルウェアとして `src/start.ts` に置きます。これは SSR、サーバールート、サーバー関数のどれよりも前に動きます。ファーストタッチを記録するのはそこです。 落とし穴があります。Start がサーバー関数の CSRF 保護を自動で組み込むのは、`src/start.ts` が存在しないときだけです。流入元の記録のためにこのファイルを作った瞬間から保護は自分の責任になり、`createCsrfMiddleware()` を自分で追加しなければなりません。忘れると、リードのエンドポイントがクロスサイトの送信を受け付けてしまいます。 図: リードが TanStack Start のミドルウェアとサーバー関数を通る流れ 1. すべてのリクエストは最初に CSRF ミドルウェアを通ります。チェックするのはサーバー関数の呼び出しだけです。 2. Cookie がまだない GET では、firstTouch が UTM タグと外部のリファラーを読んで保存します。 3. ページはいつもどおり描画されます。 4. 送信時、useServerFn が FormData をサーバー関数に送ります。 5. バリデーターがそれを普通のオブジェクトに変え、ハンドラーがそれに Zod をかけます。 6. 有効なリードは、流入元の情報、fit、訪問者の Origin と一緒に Ikiform に送られます。 7. ハンドラーは Cal.com かサンクスページのルートへのリダイレクトを throw し、useServerFn がそれをたどります。エラーはデータとして戻ります。 src/start.ts を書くと Start のデフォルトのリクエストミドルウェアが置き換わるので、CSRF は手で戻します。 ## プロジェクトの準備 React の TanStack Start プロジェクトから始め、`zod` をインストールします。シークレットキーを `.env` に `IKIFORM_SECRET_KEY` として入れます。サーバー関数は `process.env` からそれを読み、クライアントのバンドルに含まれることはありません。ドキュメントに Start 専用のページはありません。キーとエンドポイントについては[サーバーからの送信](https://ikiform.com/ja/docs/guides/server.md)にあります。 `ファイル`: ```text src/ start.ts lib/lead.ts routes/ contact-sales.tsx contact-sales.thanks.tsx vite.config.ts .env ``` フォームの **Fields** タブでフィールドを定義すると、想定していない流入元のキーも含め、一致しないものはすべて Ikiform が拒否します。 | フィールド ID | Ikiform での型 | 設定元 | | --- | --- | --- | | `name`, `email`, `company` | テキスト、メール、テキスト | 訪問者 | | `company_size` | 選択：`1_10`、`11_50`、`51_200`、`201_1000`、`1000_plus` | 訪問者 | | `budget` | 選択：`under_10k`、`10k_50k`、`50k_plus`、`unsure` | 訪問者 | | `timeline` | 選択：`this_quarter`、`next_quarter`、`later`、`researching` | 訪問者 | | `message` | テキストエリア、任意 | 訪問者 | | `utm_source`, `utm_medium`, `utm_campaign`, `referrer`, `landing_page` | テキスト、任意 | サーバー、最初の訪問から | | `fit` | 選択：`qualified`、`nurture` | サーバー、検証のあと | > サーバー側の版はシークレットキー付きで送信するので、Ikiform は **Allowed domains** と人間確認をスキップします。その場合はすべての送信がサーバーの IP から来るため、訪問者ごとに 1 分あたり 5 件という Standard の制限が、全訪問者をまとめて数えることになります。サーバー経由で送信するフォームには Relaxed か Custom の[レート制限](https://ikiform.com/ja/docs/rate-limits.md)を選び、`IKIFORM_SECRET_KEY` はサーバー専用の環境変数に置いてください。 ## ファーストタッチ用のグローバルミドルウェア `src/start.ts`: ```ts import { createCsrfMiddleware, createMiddleware, createStart } from "@tanstack/react-start"; import { getCookie, setCookie } from "@tanstack/react-start/server"; const TAGS = ["utm_source", "utm_medium", "utm_campaign"]; const csrf = createCsrfMiddleware({ filter: (ctx) => ctx.handlerType === "serverFn" }); const firstTouch = createMiddleware().server(({ request, next }) => { if (request.method !== "GET" || getCookie("lead_source")) return next(); const url = new URL(request.url); const referer = request.headers.get("referer") ?? ""; const from = URL.canParse(referer) ? new URL(referer) : null; const external = from && from.host !== url.host ? from.href.slice(0, 300) : ""; const source = new URLSearchParams(); for (const tag of TAGS) source.set(tag, url.searchParams.get(tag)?.slice(0, 100) ?? ""); if (external || TAGS.some((tag) => source.get(tag))) { source.set("referrer", external); source.set("landing_page", url.pathname.slice(0, 200)); setCookie("lead_source", source.toString(), { httpOnly: true, sameSite: "lax", path: "/", maxAge: 60 * 60 * 24 * 30, }); } return next(); }); export const startInstance = createStart(() => ({ requestMiddleware: [csrf, firstTouch], })); ``` - フィルターで、CSRF のチェックをサーバー関数に限定します。グローバルに使う場合に Start のドキュメントが推奨している方法です。`Sec-Fetch-Site`、`Origin`、`Referer` をリクエストのオリジンと比較します。 - `firstTouch` は GET 以外を飛ばすので、サーバー関数の送信が Cookie に触れることはありません。 - `setCookie` と `getCookie` は `@tanstack/react-start/server` から来ており、サーバーでしか動きません。 - リクエスト中に設定した Cookie は、次のリクエストまで `getCookie` では読めません。ここではそれで問題ありません。リードはあとのリクエストで送信されます。 ## サーバー関数 `src/lib/lead.ts`: ```ts import { redirect } from "@tanstack/react-router"; import { createServerFn } from "@tanstack/react-start"; import { getCookie, getRequestHeader } from "@tanstack/react-start/server"; import { z } from "zod"; const LeadSchema = z.object({ name: z.string().trim().min(1, "Tell us who to reply to.").max(120), email: z.email("Enter a work email we can reply to."), company: z.string().trim().min(1, "Which company is this for?").max(200), company_size: z.enum(["1_10", "11_50", "51_200", "201_1000", "1000_plus"], { error: "Pick a company size." }), budget: z.enum(["under_10k", "10k_50k", "50k_plus", "unsure"], { error: "Pick a budget range." }), timeline: z.enum(["this_quarter", "next_quarter", "later", "researching"], { error: "Pick a timeline." }), message: z.string().trim().max(5000).optional(), _gotcha: z.string().optional(), }); const SOURCE = ["utm_source", "utm_medium", "utm_campaign", "referrer", "landing_page"]; const FIT = { size: ["1_10"], budget: ["10k_50k", "50k_plus"], timeline: ["this_quarter", "next_quarter"] }; export type LeadResult = { errors: Record }; export const submitLead = createServerFn({ method: "POST" }) .validator((data: unknown) => { if (!(data instanceof FormData)) throw new Error("Expected form data"); return Object.fromEntries([...data].map(([key, value]) => [key, String(value)])); }) .handler(async ({ data }): Promise => { const parsed = LeadSchema.safeParse(data); if (!parsed.success) { const { fieldErrors } = z.flattenError(parsed.error); return { errors: Object.fromEntries(Object.entries(fieldErrors).map(([key, list]) => [key, list?.[0] ?? ""])) }; } const lead = parsed.data; const stored = new URLSearchParams(getCookie("lead_source") ?? ""); const qualified = !FIT.size.includes(lead.company_size) && FIT.budget.includes(lead.budget) && FIT.timeline.includes(lead.timeline); const origin = getRequestHeader("origin"); const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`, ...(origin ? { Origin: origin } : {}), }, body: JSON.stringify({ ...lead, ...Object.fromEntries(SOURCE.map((key) => [key, stored.get(key) ?? ""])), fit: qualified ? "qualified" : "nurture", }), }); const result = await response.json().catch(() => null); if (!result?.ok) { const fields: Record = result?.error?.fields ?? {}; const errors = Object.fromEntries(Object.entries(fields).map(([key, list]) => [key, list[0] ?? ""])); return { errors: Object.keys(errors).length ? errors : { form: result?.error?.message ?? "Try again." } }; } if (!qualified || lead._gotcha) throw redirect({ to: "/contact-sales/thanks" }); throw redirect({ href: `https://cal.com/acme/intro?${new URLSearchParams({ name: lead.name, email: lead.email })}` }); }); ``` - `.validator()` は `FormData` の形を変えるだけです。Zod はハンドラーで `safeParse` として動くので、フィールドエラーは、コンポーネントがフィールドごとに読めない throw されたエラーではなく、データとして戻ります。 - `fit` はサーバーで決まります。フォームを書き換えてもリードの格は上がりません。 - サーバー側の fetch は `Origin` を送らず、Ikiform は無料の `localhost` テストをそこから判別するので、`getRequestHeader("origin")` を転送します。 - `redirect({ href })` は外部向けの形で、`redirect({ to })` はアプリ内にとどまります。どちらも throw します。 ## ルート `src/routes/contact-sales.tsx`: ```tsx import { createFileRoute } from "@tanstack/react-router"; import { useServerFn } from "@tanstack/react-start"; import { type FormEvent, useState } from "react"; import { submitLead } from "../lib/lead"; export const Route = createFileRoute("/contact-sales")({ component: ContactSales }); const SELECTS = { company_size: ["Company size", [["1_10", "1 to 10"], ["11_50", "11 to 50"], ["51_200", "51 to 200"], ["201_1000", "201 to 1,000"], ["1000_plus", "More than 1,000"]]], budget: ["Budget", [["under_10k", "Under $10k"], ["10k_50k", "$10k to $50k"], ["50k_plus", "More than $50k"], ["unsure", "Not sure yet"]]], timeline: ["When do you want to start?", [["this_quarter", "This quarter"], ["next_quarter", "Next quarter"], ["later", "Later this year"], ["researching", "Researching for now"]]], } as const; function ContactSales() { const send = useServerFn(submitLead); const [errors, setErrors] = useState>({}); const [pending, setPending] = useState(false); async function onSubmit(event: FormEvent) { event.preventDefault(); setPending(true); try { const result = await send({ data: new FormData(event.currentTarget) }); setErrors(result?.errors ?? {}); } catch { setErrors({ form: "We couldn't send that. Email sales@example.com instead." }); } finally { setPending(false); } } const error = (key: string) => (errors[key] ?

{errors[key]}

: null); return (
{error("name")} {error("email")} {error("company")} {Object.entries(SELECTS).map(([id, [label, options]]) => (
{error(id)}
))}