JetFormBuilderでステップ型フォームを作るときの設計ポイント

長い申し込みフォームをそのまま1画面に並べると、入力する前から「面倒そう」と感じられます。ElementorでLPをきれいに作っても、最後のフォームが長く見えるだけで離脱が増えることがあります。

今回はJetFormBuilderのステップ分割を使い、講座申込フォームを3ステップに分ける構成で考えます。作るのは、講座紹介ページの下に置く申し込みフォームです。最初に基本情報、次に希望講座、最後に確認と同意を入力して送信する流れにします。

ステップ型にすると見た目はすっきりしますが、分けすぎると逆に入力の全体像が見えにくくなります。この記事では、フォームを短く見せるだけでなく、どの入力項目をどのステップへ置くか、送信後の管理まで含めて整理します。

JetFormBuilder公式ページを見てみる

この記事で作るもの

• 講座申込ページに置く3ステップの申し込みフォーム
• 基本情報、希望講座、確認・同意に分けた入力項目
• JetEngineで講座データを持たせ、フォームの選択肢と運用を整理する考え方
• Elementor側でフォームを自然に見せる配置
• 長いフォームを複雑にしすぎない判断基準

まず何を作るのか

例として、WordPressとElementorで作った講座紹介ページに「講座申込フォーム」を置きます。静的なElementorページでもフォーム自体は置けますが、講座が増えたり、申込内容を管理したり、確認項目を追加したりすると、1つの画面に入力欄が積み上がっていきます。

今回のフォームは次の3ステップに分けます。

JetFormBuilderでは、フォーム内にページ区切り用のブロックを置くことで、フォームを複数ページに分けられます。公式情報でも、Form Page Breakはフォームをいくつかのパートに分け、前のページを入力したあと次のページへ進む形で表示できるものとして案内されています。ここではその機能を、講座申込の実務に置き換えます。

JetEngineでどのデータを持たせるのか

主役はJetFormBuilderですが、講座情報を毎回フォームの文章へ直接書くより、JetEngine側にデータの箱（CPT）として持たせると運用しやすくなります。たとえば course というデータの箱を作り、講座ごとに次の入力項目を持たせます。

最初はフォーム内の選択肢を手動で作っても構いません。ただ、講座数が増えるなら、講座データを別で管理し、ページ側の講座一覧や詳細ページと同じ情報を使う方が修正漏れを減らせます。フォームだけを独立した入力欄として作るのではなく、講座データと申込導線をつなげて考えるのがポイントです。

フォームのステップ設計

ステップ型フォームでは、区切り方が重要です。単に3分割すればよいわけではありません。読者の頭の中で自然に進む順番にします。最初に個人情報を全部聞くより、何に申し込みたいのかを先に選んでもらった方が分かりやすい場合もあります。今回の講座申込では、ページ自体が特定講座の紹介ページである前提なので、基本情報から入っても違和感が少ない構成にします。

設定としては、フォーム内に次の順番でブロックを置きます。

• Form Pages Start
• お名前、メール、電話番号
• Form Page Break
• 希望講座、受講形式、参加人数
• Form Page Break
• 備考、同意チェック、送信ボタン

このとき、各ステップの見出しは短くします。「基本情報」「希望内容」「確認」のように、スマホでもすぐ読める言葉にします。説明文を長く入れると、ステップに分けた意味が薄れます。フォームの前に本文で必要な説明を済ませ、フォーム内では迷わないための短い補足に留めます。

Elementor側ではどう表示するのか

Elementor側では、講座ページの本文下部にフォームを置きます。おすすめの順番は「講座の内容」「開催情報」「申込前の不安を減らす短い説明」「申し込みフォーム」です。フォーム直前には、申込に必要なものを短く示すだけで十分です。

フォームを置くセクションでは、左側に講座の要点、右側にフォームを置くような2カラム構成も考えられます。ただしスマホでは縦に積まれるため、フォームの上に「入力は3ステップです」と短く書いておくと安心です。フォームの横幅は狭すぎると入力しづらいので、LPの本文幅より少し広めでも構いません。

確認画面の代わりに何を見せるか

ステップ型フォームでよくある失敗は、最後のステップを「何となく確認っぽくする」ことです。本格的な確認画面や予約システムのように作り込む前に、まずは送信前に必要な同意と注意だけを整理します。たとえば、連絡可能な時間帯、キャンセル規定への同意、個人情報の取り扱いへの同意を最後にまとめます。

最後のステップに置く項目例は次の通りです。

• contact_time: 連絡希望時間、Select
• message: 相談内容、Textarea
• privacy_agree: プライバシーポリシーへの同意、Checkbox
• entry_note: 管理者向けメモ、Hiddenまたは管理側だけで扱う項目

ここで個人情報を扱うため、プライバシーポリシー、保存期間、管理者権限、スパム対策は別途確認します。JetFormBuilderで入力画面は作れますが、個人情報管理や運用ルールを自動で代替するものではありません。

表示条件を使うときの考え方

講座申込では、個人申込と法人申込で入力項目を変えたいことがあります。この場合、条件に応じて入力欄を出し分ける設計が考えられます。たとえば、Step 1で「申込種別」を選び、法人を選んだ場合だけ会社名と部署名を表示します。

条件分岐は便利ですが、分岐が増えるほどテスト項目も増えます。個人、法人、オンライン、会場、複数名、キャンセル待ちまで同時に入れると、フォームはすぐ複雑になります。最初は大きな分岐だけにして、細かい確認は送信後のメール対応で補う方が安全です。

送信後のアクションを先に決める

ステップ型フォームは、入力体験だけを整えても不十分です。送信後に管理者へどの情報が届き、どの順番で対応するかまで決めておきます。講座申込なら、最低限メール通知と申込データの記録を整えます。申込が増える場合は、JetEngine側に申込データ用のデータの箱を作り、フォーム送信から投稿作成につなぐ構成も考えられます。

申込データ用に course_entry というデータの箱を作るなら、次の項目を持たせます。

ただし、申込データをWordPress内に保存するなら、個人情報の扱いが重くなります。管理者権限、バックアップ、削除依頼への対応、スパム対策を決めずに始めるのは避けてください。

運用すると何が楽になるのか

ステップ型フォームの良さは、単にフォームが短く見えることだけではありません。管理者側でも、入力項目を意味ごとに整理できます。基本情報、希望内容、同意事項が分かれていれば、通知メールや申込データを見たときに確認しやすくなります。

また、講座ページが増えたときにも、共通のフォーム設計を使い回しやすくなります。講座データはJetEngineで持たせ、フォームは申込の流れとして管理する。この分担にしておくと、ページごとにフォームを手作業で作り直す必要が減ります。

フォームは入力欄の集合ではなく、申込業務の入口です。入力完了後に誰が確認し、何を返信し、どの状態になったら完了なのかまで考えると、フォームの項目数やステップ数も決めやすくなります。

どこから複雑になりすぎるのか

複雑になりすぎる境界は、フォームの途中で読者が「今どこにいるのか」を見失うところです。ステップ数が5つ、6つと増えると、1画面は短くても全体としては長く感じます。講座申込なら、基本情報、希望内容、確認の3ステップから始めるのが扱いやすいです。

次の状態になったら、設計を見直してください。

• ステップごとの入力数に大きな偏りがある
• 条件分岐が多く、テストパターンを追えない
• 個人情報、支払い、会員登録、予約確定を1つのフォームに詰めている
• 送信後の管理者対応が決まっていない
• 申込データを保存する理由と保存期間が曖昧

予約、決済、会員管理まで含めるなら、JetFormBuilderだけで簡単に完結すると考えない方が安全です。必要に応じて予約用の仕組み、決済サービス、会員権限、プライバシー設計を別で検討します。

公開前に確認すること

公開前には、スマホで最初から最後まで入力テストをします。Step 1からStep 2へ進めるか。必須項目が空のときに分かりやすく止まるか。戻る操作をしたときに入力内容が消えないか。最後の同意チェックがない状態で送信できないか。管理者宛メールに、どの講座への申込か分かる情報が入っているか。ここまで確認します。

特にスマホでは、次へ進んだあと画面の位置が分かりにくいことがあります。フォームの上部にステップ見出しを置き、次のページへ進んだときに読者が迷わないようにします。細かい動きが気になる場合でも、まずは標準機能で読める構成にしてから調整します。

個人情報を扱うフォームでは、テスト送信後のデータ削除も確認してください。通知メールだけで運用するのか、WordPress内に記録するのかによって、管理の重さが変わります。

この構成が向いているケース

• 入力項目が10個以上ある講座申込や相談フォーム
• 基本情報、希望内容、同意事項を分けると分かりやすいフォーム
• スマホからの申込が多いサイト
• 講座データや申込データをWordPress内で整理したいサイト

逆に、名前とメールだけの簡単な問い合わせフォームなら、無理にステップ型にする必要はありません。フォームが短い場合は、1画面で完結した方が早く送信できます。ステップ化は、入力体験を良くするための手段であり、必ず使うべき装飾ではありません。

まとめ

JetFormBuilderのステップ分割を使うと、長い講座申込フォームを「基本情報」「希望内容」「確認」のように分けられます。今回の例では、JetEngine側に course という講座データを持たせ、フォーム側では申込者情報と希望内容を整理する構成にしました。

運用面では、送信後の通知、申込データの保存、管理者対応、個人情報の扱いまで決めることが大切です。最初は3ステップ程度に絞り、条件分岐や投稿作成は必要になってから広げる方が、読者にも管理者にも扱いやすいフォームになります。

JetFormBuilder公式ページを見てみる