# React Router で見込み客を選別するリードフォームを作る > React Router フレームワークモードのリードフォーム。署名付きのファーストタッチ Cookie を設定するルートのミドルウェア、検証するルートの action、日程調整ツールへのリダイレクトを組み合わせます。 公開日 2026-10-25 · https://ikiform.com/ja/guides/lead-capture/react-router 最初のドキュメントリクエストで、ルート（root）のミドルウェアを使って UTM タグとリファラーを `createCookie` の署名付き Cookie に記録します。ルートの `action` でリードを検証し、流入元の情報と一緒にフォームバックエンドへ転送して、条件に合うリードには日程調整ツールへの `redirect()` を、それ以外にはフィールドエラー付きの `data()` を返します。`
` は JavaScript があってもなくても送信できるので、同じ action で両方に対応できます。 [メインガイドの React Router タブ](https://ikiform.com/ja/guides/lead-capture.md#form)では、ルートの action からリードを転送し、お礼の一文を表示します。このページでは営業向けの版をフレームワークモードで作ります。サーバーでチェックする 3 つの選別用の質問、訪問者を連れてきた最初のキャンペーン、条件に合うリードのカレンダーへのリダイレクトです。 ## React Router で変わること React Router のデータ API は、素の HTML フォームを前提に設計されています。`` は JavaScript の有無にかかわらず同じようにルートの `action` へ送信し、action が返すもの（エラー付きの `data()` でも `redirect()` でも）はどちらの場合にも機能します。JavaScript がある場合、React Router は別オリジンへのリダイレクトをドキュメント全体の読み込みでたどります。サーバー側の処理は 1 回書くだけです。 この用途にはさらに 2 つの仕組みが合います。React Router 8 からデフォルトで有効なミドルウェアは、すべてのドキュメントリクエストで動くので、ルート（root）のルートでファーストタッチを記録できます。そして `createCookie` は値をシークレットで署名するので、訪問者が CRM に届く前に自分の流入元を書き換えることはできません。 図: 同じ React Router の action が、JavaScript の有無にかかわらずリードを処理する様子 1. 最初のドキュメントリクエストは、URL にキャンペーンのタグを、ヘッダーに外部のリファラーを含んでいます。 2. ルートのミドルウェアはページを描画させてから、流入元を入れた署名付きの Set-Cookie を追加します。 3. JavaScript があると、Form はデータリクエストで action に送信し、React Router はリダイレクトをページ全体の読み込みでたどります。 4. JavaScript がないと、ブラウザーがネイティブに送信し、303 を自分でたどります。 5. どちらの場合も、検証に失敗するとステータス 400 のデータが返り、ページは入力された値の横にエラーを表示します。 1 つの action に 2 つの送り方。ミドルウェアが動くのはドキュメントリクエストだけで、ファーストタッチが起きるのはそこです。 ## プロジェクトの準備 React Router 8 のフレームワークモードのアプリから始めます。サーバー専用の変数を 2 つ追加します。Ikiform のシークレットキーと、Cookie の署名用のシークレットです。キーの作り方は[サーバーからの送信](https://ikiform.com/ja/docs/guides/server.md)にあります。 `ファイル`: ```text app/ root.tsx lead-source.server.ts routes.ts routes/ contact-sales.tsx contact-sales.thanks.tsx react-router.config.ts .env ``` `.env`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key COOKIE_SECRET=a-long-random-string ``` 次に、フォームの **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` はサーバー専用の環境変数に置いてください。 ## 署名付きのファーストタッチ Cookie `app/lead-source.server.ts`: ```ts import { createCookie } from "react-router"; export interface LeadSource { utm_source: string; utm_medium: string; utm_campaign: string; referrer: string; landing_page: string; } export const leadSource = createCookie("lead_source", { httpOnly: true, sameSite: "lax", path: "/", maxAge: 60 * 60 * 24 * 30, secrets: [process.env.COOKIE_SECRET ?? ""], }); export async function firstTouch(request: Request): Promise { const url = new URL(request.url); const referer = request.headers.get("referer") ?? ""; const from = URL.canParse(referer) ? new URL(referer) : null; const tag = (key: string) => url.searchParams.get(key)?.slice(0, 100) ?? ""; const source: LeadSource = { utm_source: tag("utm_source"), utm_medium: tag("utm_medium"), utm_campaign: tag("utm_campaign"), referrer: from && from.host !== url.host ? from.href.slice(0, 300) : "", landing_page: url.pathname.slice(0, 200), }; const hasSignal = source.referrer || source.utm_source || source.utm_medium || source.utm_campaign; return hasSignal ? source : null; } ``` `app/root.tsx`: ```tsx import { leadSource, firstTouch } from "./lead-source.server"; import type { Route } from "./+types/root"; const recordFirstTouch: Route.MiddlewareFunction = async ({ request }, next) => { const response = await next(); if (request.method !== "GET") return response; if (await leadSource.parse(request.headers.get("Cookie"))) return response; const source = await firstTouch(request); if (source) response.headers.append("Set-Cookie", await leadSource.serialize(source)); return response; }; export const middleware: Route.MiddlewareFunction[] = [recordFirstTouch]; ``` - `.server.ts` の接尾辞で、このモジュールと `COOKIE_SECRET` をクライアントのバンドルから除外します。 - `leadSource.parse` は、Cookie がない場合も署名が一致しない場合も `null` を返すので、改ざんされた値は信用されず無視されます。 - ミドルウェアは先に `next()` を呼び、そのあとヘッダーを追加するだけです。ドキュメントには、サーバーのレスポンスではステータスを読んでヘッダーを設定し、ボディには触れないようにとあります。 - サーバーのミドルウェアがクライアント側のナビゲーションで動くのは、`.data` を取得するときだけです。それで問題ありません。タグは最初のドキュメントリクエストで届きます。 ## ルートの action `app/routes/contact-sales.tsx`: ```tsx import { data, Form, redirect, useNavigation } from "react-router"; import { type LeadSource, leadSource } from "../lead-source.server"; import type { Route } from "./+types/contact-sales"; const CHOICES = { 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"], }; function validate(values: Record) { const errors: Record = {}; if (!values.name) errors.name = "Tell us who to reply to."; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) errors.email = "Enter a work email we can reply to."; if (!values.company) errors.company = "Which company is this for?"; for (const [key, allowed] of Object.entries(CHOICES)) { if (!allowed.includes(values[key])) errors[key] = "Pick one of the options."; } if (values.message.length > 5000) errors.message = "Keep it under 5,000 characters."; return errors; } export async function action({ request }: Route.ActionArgs) { const form = await request.formData(); const keys = ["name", "email", "company", "company_size", "budget", "timeline", "message", "_gotcha"]; const values = Object.fromEntries(keys.map((key) => [key, String(form.get(key) ?? "").trim()])); const errors = validate(values); if (Object.keys(errors).length) return data({ errors, values }, { status: 400 }); const source: Partial = (await leadSource.parse(request.headers.get("Cookie"))) ?? {}; const qualified = values.company_size !== "1_10" && ["10k_50k", "50k_plus"].includes(values.budget) && ["this_quarter", "next_quarter"].includes(values.timeline); const origin = request.headers.get("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({ ...source, ...values, fit: qualified ? "qualified" : "nurture" }), }); const result = await response.json().catch(() => null); if (!result?.ok) { const fields: Record = result?.error?.fields ?? {}; const failed = Object.fromEntries(Object.entries(fields).map(([key, list]) => [key, list[0] ?? ""])); if (!Object.keys(failed).length) failed.form = "We couldn't send that. Email sales@example.com instead."; return data({ errors: failed, values }, { status: response.status }); } if (!qualified || values._gotcha) return redirect("/contact-sales/thanks", 303); return redirect(`https://cal.com/acme/intro?${new URLSearchParams({ name: values.name, email: values.email })}`, 303); } export default function ContactSales({ actionData }: Route.ComponentProps) { const pending = useNavigation().state === "submitting"; const errors: Record = actionData?.errors ?? {}; const values: Record = actionData?.values ?? {}; const error = (key: string) => (errors[key] ?

{errors[key]}

: null); return ( {error("name")} {error("email")} {error("company")} {error("company_size")} {error("budget")} {error("timeline")}