この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
フォームを作るときに、最初からすべての入力欄を並べてしまうと、読者は「自分に関係ある項目はどれだろう」と迷います。今回はJetFormBuilderの条件分岐を使い、法人と個人で入力欄が変わる申し込みフォームを作る例で考えます。Elementorで作った相談ページにフォームを置き、最初の選択で必要な入力欄だけが表示される構成です。目的は演出ではなく、不要な入力を減らし、送信後に管理者が対応しやすい情報を過不足なく受け取ることです。
この記事で作るもの
- 個人と法人で入力欄を出し分ける相談フォーム
- 条件分岐の基準にする
user_typeフィールド - 法人だけに見せる会社名・部署名・請求書希望の入力欄
- Elementorページにフォームを置いたときの見せ方
- 複雑な分岐にしすぎないための運用ルール
まず何を作るのか
例として、Web制作や講座申し込みの相談ページに置くフォームを作ります。最初に「個人として相談」「法人として相談」を選んでもらい、その選択に応じて後続の入力欄を変えます。個人なら氏名、メール、相談内容、希望連絡時間を中心にします。法人なら、そこに会社名、部署名、請求書の宛名、社内決裁の有無などを追加します。
静的なElementorページだけでもフォームは置けます。ただ、入力欄を一列に並べるだけだと利用者ごとの事情を吸収しにくくなります。法人向けの項目を常に表示すると個人には重く見え、個人向けに簡略化しすぎると法人対応で必要な情報が足りません。そこで条件分岐を使い、必要な人にだけ必要な入力欄を出す形にします。
フォームの入力項目を先に決める
条件分岐は、いきなり画面を触るより入力項目を表にしてから作る方が安全です。分岐の基準になる項目を最初に置き、共通項目と法人だけの項目を分けます。
| 相談者区分 | user_type / Radio |
individual, company |
|---|---|---|
| 氏名 | applicant_name / Text |
山田太郎 |
| メール | applicant_email / Email |
sample@example.com |
| 会社名 | company_name / Text |
株式会社サンプル |
| 部署名 | department / Text |
マーケティング部 |
| 希望連絡時間 | contact_time / Select |
平日午前, 平日午後 |
| 相談内容 | message / Textarea |
既存サイトを改善したい |
会社名や部署名のようにあとで確認したい情報は、長い自由入力欄に混ぜず、入力項目として分けた方が管理しやすくなります。一方で、細かく分けすぎるとフォームが重くなります。最初は送信後の対応に本当に使う項目だけに絞ります。
条件分岐はConditional Blockで考える
JetFormBuilderでは、条件付きで見せたい入力欄をConditional Blockの中に入れて表示条件を設定します。法人用の入力欄をひとつのConditional Blockに入れ、user_type が company のときだけ表示する、という考え方です。設定としては、ブロック内に company_name と department を入れ、Show if、対象フィールド user_type、比較方法 Equal、比較値 company にします。
公式の条件表示ドキュメントでは、条件に合ったときに表示するShow ifと、条件に合ったときに隠すHide ifの考え方が説明されています。初心者向けには、通常は隠れていて必要になったときだけ出るShow ifが分かりやすいです。また、隠れている項目をページHTMLから取り除く設定も重要です。個人が送信したとき、空の会社名がメール本文に残ったり、不要な入力欄が検証画面で見えたりするのを避けやすくなります。
JetEngineでどのデータを持たせるのか
このフォーム単体でも条件分岐は作れます。ただ、JetEngineと組み合わせるなら、申し込みや相談の種類をデータの箱（CPT）として整理しておくと運用しやすくなります。たとえば講座相談ページなら seminar というデータの箱を作り、各講座に「法人受付あり」「担当者」「相談カテゴリ」を持たせます。
| 講座名 | seminar_title / Text |
Elementor実務講座 |
|---|---|---|
| 法人受付 | company_available / Switcher |
ON |
| 担当部署 | owner_team / Select |
制作相談 / 講座運営 |
| 表示フォーム | form_type / Select |
相談フォーム |
Elementor側では、講座詳細ページにJetEngineのDynamic Fieldで講座名や担当部署を表示し、その下にJetFormBuilderの申し込みフォームを置きます。フォーム側にHidden Fieldを入れて、現在の講座名やページ種別を送信データに含めると、管理者はどのページから来た相談かを追いやすくなります。
Elementor側ではどう表示するのか
Elementorページでは、フォームだけをいきなり置くより、入力前に「個人相談と法人相談で必要な項目が変わります」と短く説明します。フォーム内の最初のRadioで相談者区分を選んでもらい、その直後に個人用・法人用の入力欄が変わるようにします。表示が変わる位置が近いほど、利用者は自分の選択でフォームが変わったと理解できます。離れた場所に急に項目が増えると、スマホでは気づきにくくなります。
送信後のメールと管理を忘れない
条件分岐フォームは、表示だけ整えても運用は完成しません。送信後のメール本文や管理者確認画面にも、分岐後の入力値が分かるようにしておく必要があります。個人の送信なら会社名を無理に表示しない。法人の送信なら会社名と部署名を目立つ位置に入れる。こうした整理があると、返信担当者が迷いにくくなります。
管理者宛通知には、相談者区分、氏名、メール、会社名、部署名、相談内容を並べます。法人向け項目が空欄になる可能性がある場合は「法人の場合のみ表示」と補足するか、条件付きの送信後アクションに分けると読みやすくなります。ただし、最初からメールアクションを何本も作ると保守が難しくなります。まずは1本の管理者通知で運用し、必要が出た段階で分ける方が現実的です。
どこから複雑になりすぎるのか
条件分岐は便利ですが、増やしすぎると管理画面を開いた本人も構造を追えなくなります。相談者区分、予算、地域、希望納期、既存サイトの有無、担当者、契約形態をすべて条件にしてしまうと、フォームの見た目は短くても、裏側のルールは複雑になります。複雑になりすぎるサインは、表示条件を作った本人しか説明できない、送信テストのパターンが多すぎる、メール本文に空欄や不要な項目が大量に出る、条件を変えたら別の入力欄が壊れる、個人情報に近い項目を権限や保存期間を決めずに増やしている、といった状態です。
公開前には、個人として送信、法人として送信、何も選ばずに送信しようとした場合、スマホで操作した場合を確認します。法人用の会社名を必須にしたまま非表示にすると、個人が送信できないことがあります。個人情報を扱うフォームでは、プライバシーポリシー、同意、保存期間、管理者権限、スパム対策も別途決めます。JetFormBuilderはフォーム作成を助けますが、セキュリティ設計や個人情報管理を自動で完成させるものではありません。
静的フォームから動的フォームに変えると何が楽になるのか
静的なフォームでは、個人向けと法人向けを別々のページに分けるか、すべての項目をひとつのフォームに詰め込むことになりがちです。別ページにするとリンク案内が増えますし、ひとつに詰め込むと入力者に余計な負担が出ます。条件分岐を使うと、入口はひとつのまま、入力中の選択に合わせて必要な欄だけを見せられます。
運用面では、問い合わせの種類ごとにフォームを何個も複製しなくてよくなるのが大きいです。フォームを複製すると、メール本文、必須項目、プライバシー同意、送信完了メッセージをそれぞれ直す必要があります。条件分岐で小さく分ければ、共通項目は共通のまま保てます。変更するときも、相談者区分のブロックだけ見ればよいので、あとから調整しやすくなります。
実装でつまずきやすい設定
よくある失敗は、非表示になる項目を必須にしたままにすることです。法人用の会社名を必須にしているのに、個人を選んだときは非表示になる。この状態で送信すると、画面上では見えない必須項目が原因で送信できないことがあります。テストでは、表示される項目だけで送信できるかを必ず確認します。
もうひとつは、比較値のズレです。Radioの表示ラベルが「法人」でも、実際の値が company なのか corporate なのかで条件は変わります。条件側には表示ラベルではなく、実際に保存される値を入れる必要があります。フォームを複製したあとに選択肢の値だけ変えると、条件が古い値を見たままになることもあります。
最後に、条件分岐を入力者に見せる順番も重要です。先に長い個人情報を入力させてから最後に相談者区分を選ばせると、フォームが途中で大きく変わり不自然です。分岐に使う質問はなるべく前半に置き、その直後に変化する項目を配置します。これだけで、スマホでの分かりやすさがかなり変わります。
入力者に見える言葉を先に整える
条件分岐の設定名は管理者向けでも問題ありませんが、フォームに出るラベルは入力者向けにします。「user_type」ではなく「ご相談者の区分」、「company_name」ではなく「会社名」のように、画面上の言葉を先に整えます。管理画面のフィールド名は半角英数字で管理し、表示ラベルは日本語で分かりやすくする。この分け方にすると、メール本文や送信データも扱いやすくなります。
法人だけに出す入力欄も、最初から多くしすぎない方がいいです。会社名、部署名、担当者名、請求書宛名、稟議状況、電話番号を全部必須にすると、まだ相談段階の人には重すぎます。最初は会社名と部署名程度にして、詳しい情報は返信後に聞く設計でも十分です。フォームは営業資料ではなく、会話を始める入口として考えると作りやすくなります。
送信前の短い説明文も忘れずに入れると、入力者は安心して選択できます。運用メモにも残します。
まとめ
JetFormBuilderの条件分岐を使うと、Elementorページに置いたフォームでも、入力者に合わせて項目を出し分けられます。今回の例では、個人と法人の相談フォームを分けずに、最初の選択で必要な欄だけを表示する形にしました。ポイントは、先に入力項目を決めること、Conditional Blockを小さく使うこと、送信後のメールと管理まで確認することです。最初は大きな分岐だけで十分です。運用しながら、本当に必要な項目だけを増やしていく方が安全です。
