JetFormBuilderとは？Elementorサイトに申込フォームと業務フローを足す具体例

Elementorでセミナー案内ページを作れるようになると、次に欲しくなるのは「申し込みを受けた後の流れ」です。フォームを置くだけなら多くのプラグインでできます。問題は、送信内容を誰が確認し、どこに保存し、どのメールが自動で届き、あとから対応状況をどう見返すかです。

この記事では、JetFormBuilderを使って、Elementorサイトに「セミナー申し込みフォーム」と「送信後の業務フロー」を足す具体例を解説します。フォーム項目、送信後アクション、メール通知、JetEngine側の申込データ保存まで、実務で考える順番に整理します。

JetFormBuilderは単体でもフォーム作成に使えますが、このシリーズではJetEngineと一緒に考えます。理由は、フォームの送信内容をただメールで受けるだけでなく、後から管理できるデータとして残す場面が多いからです。公式ページで機能の全体像を確認しておくと、このあとの「入力項目」「送信後アクション」「申込データ保存」のつながりが分かりやすくなります。

JetFormBuilder公式ページを見てみる

この記事で分かること

• JetFormBuilderを「フォーム設置」だけで終わらせない考え方
• セミナー申し込みフォームの入力項目例
• 送信後アクションの組み立て方
• JetEngineで申込データを持たせる構成
• Elementor側で申込導線をどう見せるか
• 個人情報やスパム対策で慎重にするべき範囲

まず何を作るのか

今回作るのは、1つのセミナー案内ページに置く申し込みフォームです。読者がページ下部のフォームから申し込むと、管理者に通知メールが届き、申し込んだ本人にも控えメールが届きます。さらに、必要に応じてJetEngine側の「申込データ」に1件保存し、管理画面で受付状況を確認できるようにします。

静的なElementorページだけで作る場合、ページ本文に「お申し込みはこちら」と書き、別のフォームサービスに飛ばす、またはシンプルな問い合わせフォームを置く形になりがちです。それでも最初は動きます。しかし、開催日ごとの人数管理、担当者別の確認、対応済みチェック、後日の参加者確認が必要になると、メールだけでは探しにくくなります。

ここでJetFormBuilderを使う意味は、フォームの見た目だけではなく、送信後の処理を設計できる点です。送信後アクションを組み合わせることで、メール送信、リダイレクト、投稿作成、ユーザー登録などの処理をフォーム単位で管理できます。ただし、何でも自動化すればよいわけではありません。まずは「申込を受ける」「通知する」「必要なら記録する」の3つに絞るのが現実的です。

フォームに持たせる入力項目

今回の申し込みフォームでは、次の入力項目を用意します。読者向けのラベルは日本語で分かりやすくし、内部名は後からメール本文や保存先で使いやすい英小文字にします。

入力項目を増やすと、あとで管理できる情報も増えます。ただし、最初から住所、電話番号、会社情報、請求先、参加目的、アンケートを全部入れると、ユーザーの負担が大きくなります。個人情報を多く集めるほど、保管、アクセス権、削除依頼への対応も重くなります。最初は申し込みに必要な最小限の項目から始めてください。

送信後アクションをどう設計するか

JetFormBuilderで重要なのは、フォームを送信した後です。今回の例では、送信後アクションを次の順番で考えます。

通知メールの件名は、たとえば次のようにします。

【セミナー申込】%seminar_id% / %preferred_date% / %applicant_name%

本文には、入力値をそのまま並べるだけでなく、担当者が次に見る順番に合わせます。講座名、希望日、氏名、メールアドレス、人数、メモの順にすると、担当者がメールを開いたときに確認しやすくなります。

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

申込をメールだけで受けるなら、JetEngine側の保存先は必須ではありません。ただ、複数日程のセミナー、担当者別の対応、あとから申込一覧を確認したい運用では、WordPress内に「申込データ」を持たせると管理しやすくなります。

ここではJetEngineで申込用のデータの箱を作る例にします。CPTとして作るなら、設定例は次の通りです。

保存する入力項目は、フォーム項目と近い構成にします。

JetFormBuilder側では、送信後アクションで申込データを作成する構成を考えます。フォームのapplicant_nameを申込投稿のタイトルに使い、その他の値を対応する入力項目に保存します。これにより、メールを探さなくても、管理画面の「セミナー申込」から一覧で確認できます。

ただし、申込内容を保存する場合は、個人情報の扱いを必ず確認してください。公開ページに出さないこと、管理権限を絞ること、不要になったデータの削除方針を決めることが必要です。Dynamic Visibilityで見えないようにしただけでは、十分なセキュリティ設計とは言えません。

Elementor側でどう表示するのか

Elementor側では、セミナー案内ページの構成を先に決めておきます。フォームをただ最後に置くのではなく、読者が申し込む判断をしやすい順番にします。

• 講座の概要
• 対象者
• 開催日と料金
• 講師紹介
• 申し込み前の注意
• JetFormBuilderの申し込みフォーム
• 送信後の流れ

JetEngineで講座CPTを作っている場合は、講座名、開催日、料金、受付状態をDynamic Fieldで表示できます。受付状態が「受付中」のときだけフォームを表示し、「満席」や「終了」のときはフォームを隠す構成も考えられます。これは表示条件（Dynamic Visibility）の範囲です。標準設定でできる範囲から始め、フォーム送信後の保存や通知を少しずつ足すと、運用に合わせやすくなります。

申込データを保存する前に決めること

JetFormBuilderからJetEngineの申込データへ保存する場合、最初に決めるべきなのは「保存する目的」です。メールだけでは見落としがあるから一覧で確認したいのか、担当者が対応状況を変えたいのか、開催日ごとの人数を見たいのかで、必要な項目が変わります。目的が曖昧なまま保存項目を増やすと、管理画面に不要な個人情報が残り続けます。

セミナー申込なら、最初は次の3つに絞ると扱いやすいです。1つ目は申込者を識別する情報です。氏名とメールアドレスがあれば、担当者は連絡できます。2つ目は申込対象です。どの講座の、どの日程に申し込んだのかが分からないと、メールを見ても対応できません。3つ目は対応状況です。新規、連絡済み、確定、キャンセルのような選択肢があれば、メールボックスに埋もれにくくなります。

逆に、フォームで聞きたい情報をすべて保存する必要はありません。自由記入の長い相談内容、添付ファイル、社内メモ、決済情報に近い内容は、保存先や閲覧権限を慎重に決めるべきです。この記事の例では、決済や本人確認までは扱いません。必要なら専用サービスや個別開発を検討し、JetFormBuilderだけで済ませようとしない方が安全です。

テスト時に見るポイント

フォームは見た目が完成しても、送信テストをしないと実務では使えません。最低限、管理者通知、自動返信、完了ページ、保存データの4つを確認します。管理者通知では、件名だけで何の申込か分かるかを見ます。自動返信では、申込者に次の行動が伝わるかを見ます。完了ページでは、二重送信を誘発しないかを確認します。保存データでは、文字化け、空欄、日付形式、人数の型を確認します。

テスト用の申込を3件ほど作ると、一覧管理の使いやすさも見えます。たとえば、希望日が違う申込、参加人数が2名の申込、連絡メモが長い申込を入れてみます。管理画面で並べ替えたい項目、一覧に出したい項目、詳細画面でだけ見ればよい項目が分かります。この確認をせずに本番公開すると、担当者が毎回投稿詳細を開かないと必要情報を見られない、といった小さな負担が残ります。

また、スパム対策も公開前に確認してください。フォームを公開すると、想定していない送信が来ることがあります。CAPTCHA、ハニーポット、必須項目、同意チェック、送信制限などは、サイトの規模やフォームの露出に合わせて検討します。ここでも重要なのは、JetFormBuilderを入れればすべて安全になると考えないことです。フォームは外部から入力を受ける入口なので、小さなフォームでもテストと保護が必要です。

任意で足せるCSSスニペット

フォームの機能はJetFormBuilder側で作り、見た目の細かな調整はCSSで補うと分けて考えやすくなります。たとえば、Elementorのフォーム配置セクションにseminar-entry-formというCSSクラスを付け、外観 > カスタマイズ > 追加CSS、またはElementor Custom Codeに次のCSSを追加します。

.seminar-entry-form {
  border: 1px solid #d7eee3;
  background: #f7fcf9;
  padding: 24px;
  border-radius: 8px;
}

.seminar-entry-form .jet-form-builder__label {
  color: #0b1220;
  font-weight: 700;
}

.seminar-entry-form .jet-form-builder__field {
  border: 1px solid #b9dccb;
  border-radius: 6px;
}

.seminar-entry-form .jet-form-builder__submit {
  background: #0f7a4c;
  color: #ffffff;
  border-radius: 6px;
  font-weight: 700;
}

これはフォームの見た目を整えるだけの任意スニペットです。送信処理や入力チェックをCSSでごまかすものではありません。入力値の検証、スパム対策、同意チェック、メール通知、保存先の権限は、JetFormBuilderとWordPress側の設定として確認してください。

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

JetFormBuilderは送信後アクションが強力ですが、最初から全部自動化しようとすると運用が読みにくくなります。たとえば、申込と同時にユーザー登録、会員ページ作成、決済案内、担当者振り分け、カレンダー登録、外部CRM連携まで行うと、どこで失敗したのか追いにくくなります。

最初は、管理者通知、自動返信、完了ページ、必要なら申込データ保存までに絞るのが安全です。フォームが安定してから、条件分岐や担当者別通知、講座別の保存先、申込数の集計へ進めます。

この構成が向いている人・向いていない人

この構成が向いているのは、Elementorで講座ページやサービスページを作っていて、問い合わせフォームより少し実務寄りの申込フローを作りたい人です。セミナー、相談会、資料請求、見学予約、制作相談など、送信後の確認作業があるサイトに向いています。

一方で、単純な問い合わせだけで十分なサイト、外部予約システムですでに運用が固まっているサイト、決済や本人確認が中心のサービスでは、JetFormBuilderだけで完結させようとしない方がよい場合があります。特に決済、会員情報、予約枠管理、個人情報の長期保存が絡む場合は、専用サービスやカスタム開発、セキュリティレビューも検討してください。

導入前にチェックしたい小さな設計メモ

フォームを作る前に、実際の申込を3件だけ想像してみてください。たとえば、通常の1名申込、2名での申込、質問付きの申込です。その3件を担当者がどの順番で確認するかを書き出すと、フォームに必要な入力項目と、管理画面に出したい項目が見えます。

次に、メールだけで十分な情報と、WordPress内に保存したい情報を分けます。すべてを保存すると便利に見えますが、保存した情報には管理責任が生まれます。開催日、氏名、メール、人数、対応状況は保存してもよいとしても、相談内容の全文や添付ファイルまで残す必要があるかは別問題です。個人情報を減らせるなら、減らした方が運用は軽くなります。

最後に、公開後の修正方法も決めておきます。通知先を変えたいとき、フォーム項目を増やしたいとき、申込データの表示項目を変えたいとき、誰がどこを触るのかを決めておくと、急な変更で迷いません。フォームは一度作って終わりではなく、実際の問い合わせを見ながら調整します。だからこそ、最初は小さく公開して改善できる形にしておくのが安全です。

特に自動返信メールは、公開後に読まれる文章です。申込を受け付けたこと、正式な参加確定のタイミング、キャンセル連絡先、返信までの目安を短く入れておくと、申込者も担当者も迷いにくくなります。

まとめ

JetFormBuilderは、Elementorサイトに申し込みフォームを置くだけでなく、送信後の業務フローを組み立てるための選択肢です。今回の例では、セミナー申し込みフォームを作り、管理者通知、自動返信、完了ページ、必要に応じたJetEngineの申込データ保存までを整理しました。

大切なのは、フォーム項目を増やすことではなく、申し込み後に誰が何を確認するかを先に決めることです。メールだけで足りるのか、WordPress内に申込データを残すのか、対応状況まで管理するのか。この順番で考えると、JetFormBuilderとJetEngineの役割がはっきりします。

逆に、最初から複雑な自動化を入れすぎると、テストも保守も難しくなります。まずは小さな申込フォームと通知フローを作り、運用に合わせて保存や条件分岐を足していくのが現実的です。

JetFormBuilder公式ページを見てみる