Contact Form 7 Multi-Step Formsの使い方・注意点と確認画面を迷わず作るコツ

Contact Form 7 Multi-Step Formsは、入力画面・確認画面・完了画面といった複数ページにフォームを分割し、ユーザーが段階的に入力できるようにするプラグインです。multi step formsの設計例では、各ページごとにContact Form 7のフォームを設置し、ボタンのnext・previousでページ遷移します。

たとえば、資料請求フォームで「入力」「確認」「完了」の3画面を作る場合、入力フォーム、確認用フォーム、完了ページをそれぞれ用意し、どの項目を確認画面へ表示するかをタグ単位で合わせます。見た目は1つのフォームでも、管理画面上は複数の部品をつなぐため、URL設計やフォーム名を最初に決めておくほうが迷いません。

たとえば入力画面のフォーム名を「資料請求」、確認画面を「資料請求確認」、完了ページを「資料請求完了」にしておくと、後から通知メールや自動返信を見直すときに迷いにくくなります。逆にフォーム名が似たまま増えると、どれが送信本体なのか分からず、通知設定を違うフォーム側で直してしまうことがあります。

確認画面ではmultiformタグで前ステップの入力値を表示でき、previousタグで戻る操作、multistepタグで次ページ進行が可能です。つまり『フォーム内に自動で確認画面が差し込まれる』のではなく、『個別に用意した複数のフォームを、multi step構成でつなぐ』という設計です。

実運用では、入力と確認それぞれのフォームを用意し、項目をmultiformタグで切り替えて転記します。名前やメール・複数選択肢等、項目ごとにタグ置換が必要です。設計が複雑になるほど、後から項目の追加や表現の修正が発生した場合、該当箇所が崩れていないか両方のフォームでテスト必須です。

たとえば「会社名」を必須に変えるだけでも、入力フォームの必須設定、確認画面の表示タグ、メール本文、管理者通知の項目順を合わせる必要があります。入力画面だけ直すと確認画面に古いラベルが残り、メールだけ直すと回答者が見た内容と社内で受け取る内容がずれます。

クライアント案件や運用現場では『一括エクスポート』『項目の一元管理』ができないことで作業が煩雑化しやすい点にも留意します。項目変更をクライアントが頻繁に依頼する案件では、修正作業そのものより、修正後に入力、戻る、確認、送信、通知まで通す確認時間を見積もるほうが重要です。

無料版Multi-Step Formsは、前ステップと次ステップ間で保持できる全データ量が約4KBに限定されています。日本語や複数項目・長文自由記述、管理用の隠し情報が増えると、この上限を超えてエラーになる場合が多いです。必ず実データでテストを。

たとえば、採用応募フォームで志望動機、職務経歴、自己PRを自由記述にし、さらに流入元や応募職種を隠し項目で持たせると、確認画面へ進む段階で想定よりデータ量が増えます。短いテスト文では通っても、本番に近い長文を入れると止まることがあるため、担当者が実際に受け取りたい長さで試す必要があります。

たとえばイベント申込で参加者情報を複数名分入力させる場合も、代表者情報、同行者名、アレルギー、自由記述、同意チェックが重なってデータ量が膨らみます。確認画面を入れたい理由が入力ミス防止なら、全項目を1つのステップで抱えるより、聞く項目を減らす、添付や長文を後続メールに回す、といった運用変更も検討します。

添付ファイルは、公式が『最終ステップでのみ安全にアップロード可能』とアナウンスしており、資料請求やエントリーの用途では実装順や手順に工夫が必要です。

ステップ間でセッションを維持する関係上、キャッシュプラグイン・CDN・サーバ側キャッシュや、WordPress側のhttp/https・ドメイン違いが絡むと、意図通り値が引き継がれない・エラー画面が出ることがあります。

たとえば、制作環境では入力から確認へ進めたのに、本番公開後だけ確認画面で入力値が空になる場合、フォーム設定ではなくキャッシュやURL正規化が原因のことがあります。LPだけCDNキャッシュを強めている案件では、フォームのステップページを除外する、httpからhttpsへの混在をなくす、といった確認が必要になります。

たとえば「/contact/」だけキャッシュ除外していても、確認画面を「/contact/confirm/」や完了画面を「/contact/thanks/」に分けている場合、除外設定が入力ページにしか効いていないことがあります。ステップごとのURLを一覧化し、キャッシュ、リダイレクト、セキュリティ系プラグインの対象外にする範囲を確認します。

制作環境では正常でも本番キャッシュで動作しなくなるケースもあるため、first_step設定・ドメイン/プロトコル差異も含めたテストが必須です。

Multi-Step Formsの導入で、フォーム設計・管理の手間や保守範囲は確実に広がります。「短い相談用フォームや小規模サイトは1画面完結も選択肢」「資料請求や申込の入力ミス防止には意味がある」といった業務要件に分けて判断します。

たとえば無料相談フォームのように、氏名、メール、希望日時、相談内容だけで足りる場合は、確認画面を足すよりも入力画面の補足文や完了画面の案内を整えるほうが軽く済みます。一方、予約受付や採用応募のように、日程・個人情報・同意事項をまとめて確認したい場合は、確認画面を入れる意味があります。

その上で、回答管理やCSV出力、クライアント自身による項目変更までを求める場合は、専用フォーム作成SaaSをiframeで埋め込み、WordPress本体の保守とフォーム運用を分ける選択肢もあります。