Contact Form 7 で多段階（ステップ）フォームを作る方法｜入力完了率を上げる

入力項目が多いフォームは、1画面に全部並べると圧迫感が出て離脱が増えます。
住所・電話・要望・予算……と縦に長く続くフォームを見た瞬間に閉じられる、というのは運営者なら誰しも経験があるはずです。

これを解決するのが 多段階（マルチステップ）フォーム です。
入力を「STEP1 基本情報 → STEP2 詳細 → STEP3 確認」のように分割し、1画面あたりの負担を減らします。
1問ずつ進む構成は完了率を押し上げる定番手法で、申込み・見積もり・予約フォームで効果が大きく出ます。

この記事では、Contact Form 7（CF7）でマルチステップフォームを作る方法を解説します。

CF7 標準ではステップ分割ができない

CF7は1フォーム＝1画面が基本で、複数ステップに分ける機能は標準にありません。
確認画面すら標準では用意されていません（確認画面の追加方法はこちら）。

そのため、マルチステップ化するには次のいずれかになります。

1. JavaScriptで画面切替を自作する
2. マルチステップ対応プラグインを使う

方法1：JavaScript でステップ切替を自作する

実装の手軽さ ★☆☆

フォーム内を <div> でステップごとに区切り、「次へ」「戻る」ボタンで表示を切り替える方法です。
CSSで非アクティブなステップを display:none にし、JSで進行を制御します。

<div class="step step--1">
  [text* your-name placeholder "お名前"]
  [email* your-email placeholder "メール"]
  <button type="button" class="step-next">次へ</button>
</div>
<div class="step step--2" style="display:none;">
  [textarea your-message placeholder "ご要望"]
  <button type="button" class="step-prev">戻る</button>
  [submit "送信する"]
</div>

ただし、この方法には限界があります。

• ステップごとのバリデーション（未入力のまま次へ進ませない制御）を自前で書く必要がある
• 進捗バー（STEP 1/3 表示）も自作になる
• 確認画面まで足すと処理が一気に複雑化する
• CF7のAjax送信と相性を取るのに調整が要り、保守も自分持ち

シンプルな2ステップなら可能ですが、バリデーションと進捗表示まで含めると相応のコード量になります。

方法2：プラグインでマルチステップフォームを実装する

実装の手軽さ ★★★

設定だけでステップ分割できるのがプラグイン方式です。
Frontierline Forms は、既存のCF7フォームにコードなしでマルチステップ機能を追加します。
無料版 で次の機能を使えます。

• フォームを ステップごとに区切る だけで多段階化（ステップ数の制限なし）
• 「次へ／戻る」ボタンと 進捗バー を自動生成
• ステップ単位の バリデーション（未入力なら次へ進めない）に対応
• 最終ステップに 確認画面 を組み込める
• スマホでの画面切替・スクロール制御込み

既存のCF7フォームをそのまま活かせるため、作り直しは不要です。
確認画面機能と組み合わせれば「入力（複数ステップ）→確認→送信→完了」の本格的なフローが、設定だけで完成します。

設定の詳しい手順は マルチステップフォームの作り方ガイド で公開しています。

自作とプラグインの比較

項目	JavaScript自作	Frontierline Forms
費用	無料	無料
ステップ切替	自作	設定のみ
進捗バー	自作	自動
ステップ別バリデーション	自作	標準対応
確認画面の併用	さらに改修	設定で併用
保守	自分で対応	プラグインが対応

まとめ

入力項目が多いフォームは、マルチステップ化で完了率を改善できます。
CF7は標準でステップ分割に非対応のため、JavaScriptで自作するか、対応プラグインを使うことになります。

進捗バー・ステップ別バリデーション・確認画面まで求めるなら、自作の保守コストは高くつきます。
Frontierline Forms なら既存フォームを活かしたまま設定だけでマルチステップを実装でき、確認画面とも組み合わせられます。
いずれも無料版で無制限に使えます。

Cloudflare Turnstile などのスパム対策と同じフォームで併用したい場合の設定は Contact Form 7 で Turnstile と確認画面を併用する方法 で解説しています。

選んだ内容に応じて項目そのものを出し分けたい場合は、Contact Form 7 で条件分岐（項目の出し分け）を実装する方法 も併せてご覧ください。
ステップ分割と条件分岐は同じ無料版で併用でき、ステップごとに表示する項目を変える構成も組めます。