ステップフォームとは？項目が多いフォームを分割して離脱を減らす設計と、Formieでの作り方

ステップフォームの効果は、項目数と回答者の気持ちの切り替えに左右されます。氏名、メールアドレス、問い合わせ内容の3項目しかないフォームを2ページに分けても、クリック回数が増えるだけで利点はほとんどありません。一方で、住所、希望日、複数の選択項目、同意チェックまで含む申込フォームでは、1ページ目に全部が見えている状態そのものが離脱の原因になります。

分割が向いているのは、入力に2〜3分以上かかるフォームです。資料請求と合わせて会社情報を聞くBtoBのフォーム、参加者情報と希望日程を聞くイベント申込、職歴や志望動機を書いてもらう採用応募がこれにあたります。回答者が「あとどれくらいあるのか」を見通せるように進捗を示すと、途中で手を止めにくくなります。

逆に、LPの最下部に置く短い相談フォームや、キャンペーンの応募フォームのように、できるだけ素早く送ってほしいものは1ページのままが向いています。迷ったら、まず項目数を減らせないかを検討し、それでも8項目を超えるならステップ化を考える、という順番で判断すると失敗が少なくなります。

ステップ化は項目を減らす代わりにはなりません。聞かなくてよい項目を残したまま分割しても、合計の入力量は変わらないためです。項目の棚卸しをしてから分ける、という前提は変わりません。

分け方の基本は、回答者が同じ気持ちで答えられる項目をひとまとまりにすることです。氏名と会社名と部署名は「自分が誰か」を答える項目、メールアドレスと電話番号と住所は「どこに連絡してほしいか」を答える項目、希望日や相談内容は「何をしてほしいか」を答える項目です。この3つの切り替えに沿ってページを分けると、各ページの見出しも自然に決まります。

1ページあたりの項目数は3〜6が目安です。2項目しかないページが続くと「次へ」を押す回数が増えて煩わしく、10項目を超えるページがあると分けた意味が薄れます。ページ数は3〜4ページに収めると、進捗表示を見たときの「あと少し」感が保てます。

ページの順番は、答えやすい項目を先に置きます。たとえば採用応募なら、氏名や連絡先を先に、志望動機のような考えて書く項目を後ろに置くと、書き始めるまでのハードルが下がります。先に時間のかかる項目を置くと、最初のページで止まってしまいます。

各ページには短い見出しを付けます。「基本情報」「連絡先」「ご相談内容」のような名前が進捗表示に出ていると、回答者は今どこにいて、次に何を聞かれるのかを把握できます。見出しは長い説明文より、3〜6文字の名詞のほうが読み飛ばされにくくなります。

日本企業向けのフォームでは、ステップフォームにしても送信前の確認画面を省かないほうが安全です。ページを分けると、回答者は前のページに何を入力したかを忘れやすくなります。最後に全項目を一覧で見直せる確認画面があると、ページを行き来して確かめる手間がなくなります。

必須チェックは、ページごとに行うのが基本です。最後のページで送信を押したあとに「1ページ目のメールアドレスが未入力です」と言われると、戻って直してまた進む作業が発生します。各ページの「次へ」を押した時点でそのページの項目を検証し、問題がなければ次に進める作りにしておきます。

一方で、最終的な送信時にはサーバー側で全項目をまとめて検証します。ブラウザ側のチェックだけに頼ると、途中のページを飛ばす操作や古いデータの送信を防げません。サーバー側でエラーが見つかった場合は、該当する項目があるページに戻して、どこを直せばよいか示す必要があります。

戻る操作も忘れずに用意します。入力した内容は戻っても保持され、再度「次へ」で進んだときに再入力にならないことが条件です。ブラウザの戻るボタンでページ全体が離脱してしまう作りだと、修正のつもりで入力をすべて失う事故が起きます。

Formieでは、作成画面で「ステップ区切り」ブロックを置いた位置でページが分かれます。「/」コマンドか「+ ブロックを追加」から「ステップ区切り」を選ぶと、点線の区切りが入り、その下の項目が次のステップに表示されます。区切りの横の入力欄にステップ名を入れると進捗表示に使われ、空欄なら「ステップ 2」のように番号で表示されます。

区切りはほかのブロックと同じように上下に動かせるため、項目を並べ終えてから分け方を決めても問題ありません。先に全項目を1ページに並べ、プレビューで眺めながら「ここで気持ちが切り替わる」という位置に区切りを差し込む、という進め方が実務では早く済みます。

公開フォームでは、ステップごとに「次へ」と「戻る」が表示され、各ステップの必須項目はそのステップ内でチェックされます。最後のステップのあとは、確認画面を有効にしていれば入力内容の確認、無効ならそのまま送信に進みます。確認画面で「修正する」を押すと最後のステップに戻り、入力内容は保持されたまま「戻る」で前のステップまで見直せます。

区切り自体は入力項目ではないので、確認画面、回答一覧、CSV出力、通知メールには出ません。公開済みのフォームに区切りを足しても回答データの形式は変わらないため、既存の問い合わせフォームや申込フォームをあとからステップ化する使い方もできます。

公開前には、プレビューと埋め込み先のページで、スマートフォンの幅でも進捗表示とボタンが見えるかを確認します。iframeで埋め込んだ場合、ページが切り替わるたびに表示位置が変わるため、フォームの上端に戻ることも含めて実機で一度通しておくと安心です。

WordPressのContact Form 7でステップフォームを作る場合、Multi-Step Formsのようなプラグインでページごとにフォームを用意し、タグで値を引き継ぐ設計になります。確認画面を足すにはさらに別の仕組みが必要で、項目を1つ変えるたびに複数のフォームを直す運用になりがちです。

外部のフォームサービスでステップ化する場合は、1つのフォームの中で区切りを動かすだけなので、項目の追加や順番の変更が1か所で済みます。制作会社がクライアントサイトに納品する場合は、納品後に「項目を1つ足したい」という依頼が来たときの作業量が大きく変わります。

どちらを選ぶかは、フォームの変更頻度と、確認画面や回答管理まで含めてどこで運用したいかで決めます。サイト内で完結させたい、プラグインの保守を自分で持てるならWordPress内で、フォームの修正をクライアントに渡したい、回答をフォーム単位で管理したいなら外部サービスが向いています。