# Nuxt で見込み客を選別するリードフォームを作る > Nuxt のリードフォーム。サーバーミドルウェアが初回接触の UTM を記録し、Zod で検証する 1 つのサーバールートが fetch とプレーンな送信の両方に応え、有望なリードは商談を予約します。 公開日 2026-10-25 · https://ikiform.com/ja/guides/lead-capture/nuxt 最初のページリクエスト時に、Nitro のサーバーミドルウェアで UTM タグとリファラーを httpOnly Cookie に記録します。フォームは Zod で検証する 1 つのサーバールートに送信し、そのルートがアトリビューション付きでリードをフォームバックエンドに転送して、`$fetch` には JSON、プレーンなフォーム送信には `303` で応答します。クライアントでは、`navigateTo(url, { external: true })` で条件を満たしたリードを予約ツールに送ります。 [メインガイドの Nuxt タブ](https://ikiform.com/ja/guides/lead-capture.md#form)では、サーバールートを通して `$fetch` でリードを送り、お礼の一文を表示します。このページでは営業向けの版を作ります。会社の規模、予算、時期をサーバーでチェックし、各リードの背後にあるキャンペーンを記録し、カレンダーに引き継ぎ、JavaScript が読み込まれなくても動く経路を用意します。 ## Nuxt で変わること Nuxt にはフォームアクションがありません。フォームは他のエンドポイントと同じように Nitro のサーバールートに送信するので、対応すべき送信方法が 2 つ残ります。ハイドレーション後のページからの JSON 付き `$fetch` と、素の HTML フォームからの URL エンコードされた送信です。h3 の `readBody` は両方を解析するので、それぞれに合った方法で応答する限り、1 つのルートで両方に対応できます。 この便利さには代償があります。URL エンコードされたボディを受け付けるルートは、クロスサイトのプレーンなフォーム送信も受け付けてしまいます。h3 のドキュメントもこれを警告しており、SvelteKit や Next.js と違って Nuxt はオリジンチェックを自動で追加しません。ルート自身が `Origin` をチェックします。 図: ハイドレーション済みのフォームとプレーンなフォーム送信の両方に応える 1 つの Nuxt サーバールート 1. JavaScript があれば、ページはリアクティブな lead オブジェクトを $fetch で JSON として送信します。 2. サーバールートは他のオリジンからの送信を拒否し、Zod で検証して、アトリビューション付きでリードを転送します。 3. 次の URL を含む JSON で応答し、navigateTo で Cal.com かサンクスページに移動します。 4. バリデーションの失敗は createError で投げられ、ページはエラーの data からフィールドのメッセージを読みます。 5. JavaScript がなければ、ブラウザーはフォームを URL エンコードして同じルートに送信します。 6. ルートは同じチェックを行い、303 で応答します。行き先は予約ツール、サンクスページ、または失敗したフィールド名付きでフォームに戻すかのいずれかです。 応答を決めるのはルートではなくコンテンツタイプです。バリデーションと Ikiform への送信は一度だけ書けば済みます。 ## プロジェクトの準備 Nuxt 4 のアプリから始め、`zod` をインストールします。キーを `runtimeConfig` で宣言し、`NUXT_IKIFORM_SECRET_KEY` として設定します。ルートが `useRuntimeConfig(event)` を読むと、Nuxt が実行時にこの変数を割り当てます。キーとフォームについては [Nuxt のドキュメントページ](https://ikiform.com/ja/docs/guides/nuxt.md)で説明しています。 `ファイル`: ```text app/ pages/ contact-sales.vue contact-sales/thanks.vue server/ middleware/first-touch.ts api/lead.post.ts utils/lead.ts nuxt.config.ts .env ``` `nuxt.config.ts`: ```ts export default defineNuxtConfig({ runtimeConfig: { ikiformSecretKey: "", }, }); ``` フォームの **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` はサーバー専用の環境変数に置いてください。 ## 初回接触を記録するサーバーミドルウェア `server/middleware/first-touch.ts`: ```ts const TAGS = ["utm_source", "utm_medium", "utm_campaign"]; export default defineEventHandler((event) => { if (event.method !== "GET" || getCookie(event, "lead_source")) return; if (!getRequestHeader(event, "accept")?.includes("text/html")) return; const url = getRequestURL(event); const referer = getRequestHeader(event, "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))) return; source.set("referrer", external); source.set("landing_page", url.pathname.slice(0, 200)); setCookie(event, "lead_source", source.toString(), { httpOnly: true, sameSite: "lax", path: "/", maxAge: 60 * 60 * 24 * 30, }); }); ``` - Nitro は `server/middleware` 内のファイルをすべてのリクエストの前に実行し、何も返さないことを期待します。値を返すとリクエストがそこで終わってしまいます。 - `accept` のチェックで Cookie をページの読み込みに限定するので、API 呼び出しやアセットは対象外になります。 - `getCookie`、`setCookie` などの h3 ヘルパーは、`server/` 内で自動インポートされます。 - `routeRules` や `nuxt generate` でプリレンダリングされたページはファイルとして配信されるので、ミドルウェアはその訪問を一切見ません。キャンペーンのランディングページはサーバーレンダリングのままにしてください。 ## 1 つのルートで 2 種類の応答 `server/utils/lead.ts`: ```ts import { z } from "zod"; export 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(), }); export type Lead = z.infer; export const isQualified = (lead: Lead) => lead.company_size !== "1_10" && (lead.budget === "10k_50k" || lead.budget === "50k_plus") && (lead.timeline === "this_quarter" || lead.timeline === "next_quarter"); ``` `server/api/lead.post.ts`: ```ts import { z } from "zod"; const SOURCE = ["utm_source", "utm_medium", "utm_campaign", "referrer", "landing_page"]; export default defineEventHandler(async (event) => { const origin = getRequestHeader(event, "origin"); if (origin && new URL(origin).host !== getRequestHost(event)) { throw createError({ status: 403, message: "Posts from other sites aren't accepted." }); } const wantsJson = getRequestHeader(event, "content-type")?.includes("application/json"); const parsed = LeadSchema.safeParse(await readBody(event)); if (!parsed.success) { const fields = z.flattenError(parsed.error).fieldErrors; if (!wantsJson) return sendRedirect(event, `/contact-sales?invalid=${Object.keys(fields).join(",")}`, 303); throw createError({ status: 400, message: "Check the highlighted fields.", data: { fields } }); } const lead = parsed.data; const stored = new URLSearchParams(getCookie(event, "lead_source") ?? ""); const qualified = isQualified(lead); const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${useRuntimeConfig(event).ikiformSecretKey}`, ...(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) { if (!wantsJson) return sendRedirect(event, "/contact-sales?failed=1", 303); throw createError({ status: response.status, message: result?.error?.message ?? "We couldn't send that. Try again.", data: { fields: result?.error?.fields ?? {} }, }); } const next = qualified && !lead._gotcha ? `https://cal.com/acme/intro?${new URLSearchParams({ name: lead.name, email: lead.email })}` : "/contact-sales/thanks"; return wantsJson ? { next } : sendRedirect(event, next, 303); }); ``` - `server/utils` からのエクスポートはサーバールートで自動インポートされるので、`LeadSchema` と `isQualified` にインポートは不要です。 - ブラウザーの同じ `Origin` ヘッダーが 2 つの役割を果たします。クロスサイトの送信をブロックし、さらに Ikiform に転送されます。サーバー側の fetch は Origin を送らず、Ikiform はそれを使って無料の `localhost` テストを見分けるからです。 - `createError` はフィールドのメッセージを `data` に入れ、Nuxt のエラー応答はそれを入れ子にするので、クライアントは `error.data.data.fields` を読みます。 - プレーンな送信はセッションなしでは状態を持ち帰れないので、失敗時は失敗したフィールド名をクエリ文字列に入れてリダイレクトします。訪問者は入力し直すことになりますが、これはフォールバックの経路です。 ## ページ `app/pages/contact-sales.vue`: ```vue