JetFormBuilderとJetEngineでフォーム送信から投稿を作る方法

フォームから申し込みを受けるだけなら、Elementorのページにフォームを置くだけでも始められます。けれども、申し込みが増えてくると「メールを探す」「担当者へ転記する」「対応状況を別シートに書く」という作業が少しずつ重くなります。

この記事では、JetFormBuilderの送信後アクションを使い、フォーム送信からJetEngineのデータの箱（CPT）へ「申込データ」を1件作る流れを解説します。例にするのは、セミナー案内ページの申し込みフォームです。送信された内容をWordPress内の下書き投稿として保存し、管理者があとから対応状況を確認できる形にします。

この構成は、問い合わせ・セミナー申込・資料請求・掲載申請のように、送信後の確認作業があるサイトに向いています。JetFormBuilderの公式ページでフォーム機能の全体像を確認してから進めると、入力項目と送信後アクションの役割がつながりやすくなります。

JetFormBuilder公式ページを見てみる

この記事で分かること

• フォーム送信をWordPress投稿として保存する考え方
• JetEngineで用意する申込用のデータの箱と入力項目
• JetFormBuilderの投稿追加・更新アクションの設定例
• Elementor側で申込導線と管理用一覧をどう見せるか
• メール通知だけで済ませる場合との違い
• 個人情報と運用が複雑になりすぎる境界

まず何を作るのか

今回作るのは、セミナー案内ページに置く申し込みフォームです。ユーザーが名前、メールアドレス、希望日、参加人数、メモを入力して送信すると、JetFormBuilderが送信後アクションを実行します。その中で、管理者への通知メール、申込者への控えメール、そしてJetEngineで作った申込用CPTへの投稿作成を行います。

完成イメージは次のような流れです。

• Elementorで作った講座ページに申し込みフォームを置く
• フォーム送信後、管理者と申込者へメールを送る
• 同じ送信内容から、申込データを投稿として保存する
• 管理画面または限定ページで、申込一覧と対応状況を確認する

静的なElementorページだけで作る場合、申し込み後の情報はメールか外部フォームサービスに分かれます。最初はそれで十分でも、開催日ごとに人数を見たい、担当者が対応済みにしたい、キャンセル連絡の履歴を追いたい、という段階で管理が散らかります。JetEngineに保存先を作っておくと、WordPress内で一覧化できるため、運用の見通しがよくなります。

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

先に作るのは、申込を保存するためのデータの箱（CPT）です。ここでは、公開記事として見せるための投稿ではなく、管理用の記録として扱います。名前は分かりやすく、次のようにします。

入力項目は、JetEngineのカスタムフィールドとして分けます。1つの長いメモ欄に全部入れると、あとから日付や対応状況で絞り込めません。運用で見る項目は、最初から別々の入力項目にしておくのがコツです。

申込講座は、講座自体もJetEngineのデータの箱にしているなら、講座データと関連づけると便利です。まだ講座ページが静的なElementorページだけなら、最初は「Elementor実践講座」「WordPress基礎講座」のような選択肢を作っても構いません。大事なのは、最初から完璧な予約システムにしないことです。まずは申込を管理できる最小構成で作り、必要になったら講座CPTや関連づけに広げます。

フォーム側の入力項目を作る

JetFormBuilder側では、ユーザーが入力する項目を作ります。管理用の対応状況はユーザーに入力させないため、フォームには出しません。フォームに置くのは、申込者が入力する情報だけです。

JetFormBuilderは、フォーム項目をブロックとして追加し、送信後アクションを組み合わせる作り方です。ここで重要なのは、フィールド名をJetEngine側の保存先とそろえることです。完全に同じ名前でなくてもマッピングできますが、最初は同じにしておく方がミスを減らせます。

投稿を追加・更新するアクションで保存する

送信内容を投稿として保存する中心設定が、投稿を追加・更新する送信後アクションです。これはフォームの値を使って、新しい投稿を作る、または既存投稿を更新するためのアクションです。今回の例では、新規の申込データを1件作ります。

設定としては、次の順番で考えます。

Field Mapの例は次の通りです。

投稿タイトルは、管理画面で一覧を見たときに分かる形にします。名前だけだと同姓同名で迷うことがあります。講座名と希望日も入れたくなりますが、タイトルが長くなりすぎると一覧性が落ちます。最初は「氏名 / 希望日」くらいにして、詳細は入力項目で確認する方が扱いやすいです。

申込データを公開状態で作らないことも大切です。申し込みには個人情報が含まれます。公開ページとして見せる用途ではないため、管理者だけが確認できる状態にします。WordPressの権限、管理画面のアクセス範囲、バックアップ、削除依頼への対応は、サイトごとに別途決めてください。

メール通知も同時に作る

投稿保存だけに頼ると、担当者が管理画面を見に行くまで気づけません。実務では、Send Emailの送信後アクションも一緒に使います。管理者宛てと申込者宛ての2つを分けると、文章を調整しやすくなります。

管理者向けメールの件名例は次の通りです。

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

本文には、講座、希望日、名前、メール、人数、メモ、管理画面で確認する案内を入れます。申込者向けの控えメールには、受付完了、確認予定、問い合わせ先、キャンセル時の連絡方法を短く入れます。ただし、メールに個人情報を詰め込みすぎる必要はありません。担当者が詳しく見る情報は、WordPress内の申込データで確認する設計にしておくと安全です。

Elementor側でどう表示するのか

表側のElementorページでは、まず講座ページの下部にフォームを置きます。フォーム上部には、申し込み前に確認してほしい日程、対象者、参加費、注意事項を配置します。フォーム直前に長い説明を置きすぎると入力に進みにくいため、詳細説明はページ中盤、フォーム周辺は確認項目に絞ります。

管理者向けには、申込一覧ページを作ることもできます。JetEngineの一覧テンプレート（Listing）で1件の申込カードを作り、Listing Gridで並べます。カードには、名前、希望日、申込講座、人数、対応状況を表示します。一般公開しないページなら、管理者だけが見られる場所に置きます。

一覧テンプレートの構造例です。

• 上部: 希望日を大きく表示する
• 中央: 申込者名、講座名、人数を表示する
• 下部: 対応状況をラベルとして表示する
• 右側または下部: 管理画面で編集するリンクを置く

対応状況の表示には、表示条件（Dynamic Visibility）を使うと、未対応のときだけ赤系の注意ラベル、対応済みのときだけ落ち着いたラベルを出す、といった見せ方ができます。ただし、表示条件は見た目の出し分けであって、権限管理そのものではありません。見せてはいけないデータは、そもそも公開ページへ出さない設計にしてください。

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

この構成にすると、申し込みがメールだけに閉じなくなります。管理画面で申込データを一覧できるため、担当者が「未対応だけを見る」「希望日ごとに確認する」「申込講座で絞る」といった運用をしやすくなります。

たとえば、セミナーが月に1回ならメール管理でも足りるかもしれません。しかし、複数日程、複数講座、複数担当者になると、メールだけでは抜け漏れが起きやすくなります。JetEngine側にデータがあれば、あとから絞り込み検索、担当者別一覧、講座詳細ページとの関連づけにも広げられます。

一方で、最初から予約システム、決済、会員マイページ、キャンセル処理、残席管理まで全部作ろうとすると、設計が急に重くなります。JetFormBuilderとJetEngineでかなりの業務フローを組めますが、セキュリティ設計や個人情報管理まで自動で解決するわけではありません。まずは申込を受けて管理する範囲に絞り、必要な拡張を段階的に足してください。

必要なら足せる小さな見た目調整

フォームの機能はJetFormBuilderの設定で作ります。コードは必須ではありません。ただ、Elementor側でフォーム周辺を見やすくしたい場合は、入力欄と送信ボタンの余白、角丸、ボタン色を少し整えると、申し込み導線が分かりやすくなります。

調整するなら、フォーム全体の余白を少し広げる、入力欄の枠線を淡いグリーンにする、送信ボタンを濃いグリーンにする、エラー文を読みやすくする、くらいに留めます。これは見た目を整えるだけの話です。入力チェック、スパム対策、同意チェック、保存先の権限設定は、JetFormBuilderとWordPress側で別に確認してください。

ここから先は慎重にした方がいいこと

特に注意したいのは、次の点です。

• 本番サイトへ入れる前に、検証サイトでフォーム送信を何度も試す
• 申込データを一般公開しない
• 管理者以外が見られるページにメールアドレスやメモを出さない
• スパム対策や同意チェックを省略しない
• 集める個人情報を最小限にする
• CPTやフィールド名を途中で変える前にバックアップを取る
• メールだけ、投稿保存だけ、外部管理だけのどれで運用するかを先に決める

JetFormBuilderとJetEngineは、Elementorユーザーが静的ページから一歩進むための強い組み合わせです。ただし、業務システムを丸ごと置き換えるものではありません。顧客データや予約データを扱うなら、プライバシーポリシー、アクセス権、保存期間、削除依頼の対応まで含めて考える必要があります。

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

向いているのは、Elementorでページ制作はできていて、フォーム送信後の確認作業をWordPress内で管理したい人です。セミナー申込、資料請求、掲載申請、イベント参加受付のように、送信後に担当者が確認する流れがあるサイトでは効果が出やすいです。

向いていないのは、最初から大規模な予約管理、決済、会員権限、複雑な承認フローまで必要な案件です。その場合は、JetFormBuilderとJetEngineだけで急いで組むより、要件整理、セキュリティ設計、必要な専用プラグインや外部サービスの検討から始めた方が安全です。

まとめ

JetFormBuilderとJetEngineを組み合わせると、フォーム送信を単なるメール通知で終わらせず、WordPress内で管理できる申込データに変えられます。今回の例では、セミナー申し込みフォームからseminar_entryという申込CPTを作り、お名前、メール、希望日、参加人数、対応状況を保存する流れを作りました。

ポイントは、最初から全部を自動化しないことです。まずは「入力する」「通知する」「投稿として保存する」「担当者が確認する」までを安定させます。そこから必要に応じて、講座CPTとの関連づけ、絞り込み検索、担当者別一覧、会員向け表示へ広げていくと、静的なElementorページから無理なく動的な業務ページへ進めます。

JetFormBuilder公式ページを見てみる