Contact Form 7 でマルチステップフォームを作る方法

入力項目が多い問い合わせ・申込フォームは、1画面に詰め込むほど離脱されます。
Contact Form 7（CF7）で入力を複数ステップに分けるマルチステップフォームにすれば、1画面あたりの負担が下がり、完了率を上げられます。

この記事ではコード不要で設定画面だけで作る方法と、自前実装の方法を解説します。

なぜマルチステップにすると完了率が上がるのか

長いフォームは、最初の1画面に20項目並んでいるだけで「面倒だ」と離脱されます。
ステップに分けて「基本情報 → 詳細 → 確認」と区切ると、1画面の項目が減って心理的ハードルが下がります。
進捗バーで「あと2ステップ」と見せれば、途中離脱も減らせます。
BtoBの申込・見積もり依頼など、項目が多いフォームほど効果が大きいです。

方法1：設定画面だけで完結させる（コード不要・おすすめ）

functions.php もJavaScriptも書かず、WordPress管理画面の設定だけでマルチステップフォームを作れます。
Frontierline Forms を使えば、次の手順で完了します。

手順

1. 項目をステップに振り分け：フォーム項目を「基本情報 → 詳細 → 確認」などのまとまりに分けます。
2. 区切りとボタンを設定：設定画面でステップの区切りを指定し、次へ・戻るボタンと進捗表示を有効化。
3. 確認画面を追加：送信前に入力内容を一覧表示する確認ステップを足します（完了画面はGA4計測にも対応）。
4. テスト送信：各ステップの進む・戻る・バリデーション・確認・送信を確認。

ステップ間のバリデーション（必須項目が空なら次へ進ませない）も設定で有効にできます。
コードを書かないので、フォームを修正してもステップ構成が壊れません。

方法2：JavaScriptで自前実装する（上級者向け）

プラグインを使わず作る場合、各ステップを <div> で区切り、JavaScriptで表示・非表示を切り替え、進む/戻るボタンとバリデーションを自前で書きます。
CF7のタグ生成（[group] 等）と組み合わせる方法もあります。

ただし、次の点でつまずきやすいです。

• ステップ間バリデーションが面倒：「現在のステップの必須項目だけ検証して次へ」をCF7のバリデーションと両立させる実装が重いです。
• 確認画面の値同期：入力値を確認ステップへ反映し、戻って修正しても保持する処理を自前で書く必要があります。
• 保守がテーマに紐づく：JS・CSSがテーマ依存になり、テーマ変更や引き継ぎで壊れます。フォームごとにコードが分岐して属人化します。

1フォームだけなら自前でも作れるが、複数案件で使い回すなら設定で完結する方法1が現実的です。

Lite版とPro版の違い

短い申込なら無料の3ステップで足ります。
項目が多い見積もり依頼や、入力値に応じてステップを出し分ける複雑なフォームを作るならPro版が必要になります。

まとめ

CF7標準にマルチステップ機能はないため、JavaScriptで自前実装するか、対応プラグインで設定するかのどちらかになります。
ステップ間バリデーションや確認画面の値同期は自前だと重く、複数案件で使い回すなら設定で完結する方法が速いです。
まずは無料の3ステップから試せます。

マルチステップに加え、確認・完了画面、Slack/Chatwork/スプレッドシート通知、送信ログのDB保存、CSV出力まで設定だけで実装したいなら、Frontierline Forms の導入を検討してください。