# SaaS の解約フローに解約アンケートを追加する > SaaS の解約フローで解約理由を尋ね、スキップはワンクリックのまま、理由を Stripe と Ikiform に保存し、解約を決して遅らせない方法。 公開日 2026-10-25 · https://ikiform.com/ja/guides/feedback-form/cancellation-survey 解約ページに任意の質問を 1 つだけ表示し、送信ボタンの横にスキップボタンを置き、本人がどちらを選んでも先にサブスクリプションを解約します。そのあと、セッションから取ったアカウント、プラン、契約期間を付けて、レスポンスのあとか短いタイムアウト付きでサーバーから回答を送信し、アンケートが解約を止めることがないようにします。同じ理由を Stripe のサブスクリプションにも保存し、両方のシステムをそろえます。 ## 解約フローならではの違い ほかの場所では、フィードバックフォームはこちらからのお願いです。解約フローでは、顧客と、顧客が決めたことの間に立ちはだかります。そこからルールが決まります。 - **解約は決してアンケートに依存させない。** 回答にも、Ikiform に接続できるかにも、遅いリクエストにも依存させません。サブスクリプションを先に解約し、アンケートの送信は誰にも気づかれずに失敗してもかまいません。 - **スキップはワンクリックで。** 送信ボタンの横に **Skip and cancel** ボタンを置きます。これを隠したり、オファーの 2 画面目、3 画面目を足したりすると、アンケートが障害物になり、人は戻ってくるかを決めるときにそれを覚えています。 - **文脈はサーバーから取る。** アカウント、プラン、支払ってきた期間はすでにわかっています。hidden の入力欄ではなくセッションから取れば、データを信頼できます。 図: 顧客が待っている間に起きることと、確認画面を見たあとに起きること 1. 顧客が請求ページで「プランを解約」を押します。 2. 質問が 1 つ表示され、答えることもスキップすることもできます。 3. どちらの場合も、サーバーは Stripe のサブスクリプションを期間終了時に解約するよう設定し、理由があればそれも保存します。 4. 顧客にはすぐに確認画面が表示されます。 5. レスポンスが送られたあとで初めて、サーバーは回答を Ikiform に送信します。 6. Ikiform はプランと契約期間と一緒に回答を保存し、Webhook を送ります。リレーがそれを解約用のチャンネルに投稿できます。 下の段のどれも、上の段を遅らせたり止めたりできません。Ikiform に接続できなくても、顧客が気づくことはありません。 ## フィールド フォーム: Cancellation survey - **解約する主な理由は何ですか？** (`reason`, radio, 必須) - **ほかに伝えたいことはありますか？** (`details`, textarea) - **どのツールに移りますか？** (`switched_to`, text) - **アカウント** (`account_id`, text, 必須) - **プラン** (`plan`, text, 必須) - **契約月数** (`months_subscribed`, number) 顧客に見えるのは最初の 3 つだけです。`account_id`、`plan`、`months_subscribed` は、サーバーがセッションから追加します。 理由の値は Stripe の `cancellation_details.feedback` の選択肢と同じなので、1 つの値を両方に送れ、レポートもそろいます。ラベルはわかりやすい言葉に言い換えています。`switched_to` は得られる自由記述の回答の中でいちばん役に立ちます。乗り換え先のツールの一覧は、そのまま競合分析になります。 | フィールド | 流入元 | 理由 | | --- | --- | --- | | `reason` | 顧客 | 1 つを選択、Stripe と同じ ID | | `details` | 顧客 | 任意。本当の事情がわかる唯一の場所であることも多い | | `switched_to` | 顧客 | 理由が `switched_service` のときだけ保存 | | `account_id`, `plan` | 自分のセッション | 返信する前に利用状況を確認 | | `months_subscribed` | 自分のセッション | 早期の解約と後期の解約では原因が違う | ## 解約のアクション どちらの版も理由の小さな一覧を共有するので、フォームとサーバーで有効な値が一致します。 `reasons.ts`: ```ts export const REASONS = [ ["too_expensive", "It's too expensive"], ["missing_features", "It's missing something I need"], ["switched_service", "I found an alternative"], ["unused", "I don't use it enough"], ["too_complex", "It was too hard to use"], ["low_quality", "It didn't work well"], ["customer_service", "Support didn't help"], ["other", "Something else"], ] as const; export type Reason = (typeof REASONS)[number][0]; export function readReason(value: FormDataEntryValue | null): Reason | null { return REASONS.find(([id]) => id === value)?.[0] ?? null; } ``` **Next.js** サーバーアクションは先に解約し、そのあとレスポンスが終わってから実行される `after()` で Ikiform への送信を予約します。これでリダイレクトは遅れず、送信が失敗しても握りつぶされます。**Skip and cancel** は `formNoValidate` を使うので、必須のラジオボタンに止められません。 `app/billing/cancel/actions.ts`: ```ts "use server"; import { headers } from "next/headers"; import { redirect } from "next/navigation"; import { after } from "next/server"; import Stripe from "stripe"; import { requireSession } from "@/lib/session"; import { readReason } from "./reasons"; const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!); export async function cancelPlan(formData: FormData) { const session = await requireSession(); const skipped = formData.get("intent") === "skip"; const reason = skipped ? null : readReason(formData.get("reason")); const details = skipped ? "" : String(formData.get("details") ?? "").slice(0, 2000); await stripe.subscriptions.update(session.subscriptionId, { cancel_at_period_end: true, ...(reason ? { cancellation_details: { feedback: reason, comment: details || undefined } } : {}), }); if (reason) { const origin = (await headers()).get("origin"); after(async () => { 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({ reason, details, switched_to: reason === "switched_service" ? String(formData.get("switched_to") ?? "") : "", account_id: session.accountId, plan: session.plan, months_subscribed: Math.floor((Date.now() - session.subscribedAt.getTime()) / 2_629_800_000), }), }).catch(() => undefined); }); } redirect("/billing/cancelled"); } ``` `app/billing/cancel/page.tsx`: ```tsx import { cancelPlan } from "./actions"; import { REASONS } from "./reasons"; export default function CancelPage() { return (

Cancel your plan

Your plan stays active until the end of the billing period. One question first, if you have a moment.

What's the main reason you're cancelling? {REASONS.map(([value, label]) => ( ))}