この章では、新しくなったElementor V4のフォーム「Atomic Form（Atomicフォーム）エレメント」について、実際の設定画面を見ながら詳しく解説していきます。

Atomicフォームは、従来のElementorのフォームウィジェットとは構造が大きく変わっています。

フォームそのものを1つの大きなウィジェットとして編集するのではなく、Label、Input、Textarea、Checkbox、Radio Button、Select、File Upload、Submit ButtonなどのAtomic要素を組み合わせてフォームを作る仕組みです。
そのため、最初は「以前のフォームとずいぶん違うな」と感じるかもしれません。

Atomicフォームの概要や、従来のフォームと比較した場合の「できること・できないこと」については、別の章で詳しく解説しています。（新しくなったAtomicフォームを徹底解説）
特に、従来のフォームでできていたことがV4では同じようにできないケースもあります。
実際にフォームを作り始めてから「これ、できないの？」とならないように、まずはこちらの記事で仕様を確認しておくことをおすすめします。

Atomicフォームエレメントの設定方法

それでは、実際にAtomicフォームを使ってフォームを作っていきます。

まずは、フォームを設置したい場所に「Atomicフォーム」エレメントを配置します。
Atomicフォームは、フォーム全体をまとめる「親」のような役割を持っています。

フォームの送信処理やメール、送信後の状態など、フォーム全体に関係する設定は、このAtomicフォームエレメントから行います。

一方、実際の入力欄やラベル、送信ボタンなどは、Atomicフォームの中に配置されている各Atomic要素から設定します。

フォームを配置すると基本的な構成が自動で作られる

Atomicフォームを配置すると、最初からいくつかのフォーム要素が入った状態になります。

ここから、必要な項目を追加したり、不要な項目を削除したりして、自分のサイトに必要なフォームへ作り変えていきます。

Atomicフォームの構成を見ると、ラベルと入力欄がそれぞれ別の要素になっていることが分かります。

例えば、

• Label → 「お名前」
• Input → 名前を入力する欄
• Label → 「メールアドレス」
• Input → メールアドレスを入力する欄
• Submit Button → 送信ボタン

というように、それぞれの要素を組み合わせてフォームを作っていきます。

従来のフォームウィジェットと比べると少し手間が増えたようにも見えますが、その分、各要素を個別にデザイン・配置できる自由度が高いのがAtomicフォームの特徴です。

Atomicフォームの設定

Atomicフォームをサイトに設置した初期状態です。
ここからフォームの内容を設定していきますが、まずはフォーム全体の設定項目をざっくり確認しておきましょう。

フォーム名

まずはフォーム名です。

フォームを識別するための名前を設定できます。

フォームを1つしか設置しない場合は、それほど重要ではありませんが、サイト内に複数のフォームを設置する場合は便利です。

例えば、

• お問い合わせフォーム
• お見積もり依頼フォーム
• 資料請求フォーム
• メルマガ登録フォーム
• 採用応募フォーム

など、フォームごとに名前を付けておくと、後から管理しやすくなります。

ステート（State）

次にステート（State）です。

これは、フォームが現在どの状態にあるのかによって、表示する内容を切り替えるための設定です。
Atomicフォームには、

• 通常（Normal）
• 成功（Success）
• エラー（Error）

という3つの状態があります。

普通（Normal）

通常時のフォームです。
訪問者がフォームを入力している、あるいはまだ送信していない状態がこれにあたります。
普段はこの状態でフォームが表示されます。

成功（Success）

フォームの送信が正常に完了した場合に表示される状態です。
「お問い合わせを受け付けました」
「送信ありがとうございました」
などのメッセージを表示できます。

成功を選択すると、成功メッセージを構成している要素を編集できます。
例えば、メッセージを表示するDIVの背景色やパディングを変更したり、その中の段落を編集して、

お問い合わせありがとうございました。
内容を確認のうえ、担当者よりご連絡いたします。

といった文章に変更できます。
つまり、単純なテキスト設定ではなく、成功状態そのものをデザインできる訳です。

エラー（Error）

送信に失敗した場合などに表示されるエラー状態です。

こちらも成功と同様に、表示するメッセージや背景、余白、文字などをデザインできます。
この「Normal・Success・Error」という考え方は、Atomicフォームを理解するうえで重要です。

フォームの入力画面だけをデザインするのではなく、「送信前」「送信成功」「送信失敗」の3つの状態をそれぞれデザインすると考えると分かりやすいでしょう。

送信後のアクション

次に、送信後のアクション（Actions after submit）を設定します。
ここはフォームを実用的に使ううえで非常に重要な部分です。

「フォームを送信したあと、何をするのか？」を設定する場所だからです。

現在のAtomicフォームでは、主に以下の処理を設定できます。

• メール
• メールアドレス 2
• 送信データを蓄積する

公式ドキュメントでは、送信データを蓄積する（Collect submissions）を利用すると、送信された情報をWordPress管理画面から確認できる仕組みになっています。
これは旧フォームでも同様の仕様ですので、ご存知と思います。

送信データを蓄積する（Collect submissions）

フォームから送信されたデータをWordPress側に保存します。
「お問い合わせがあったことを後から管理画面で確認したい」という場合に便利です。
メールだけで管理すると、メールを削除してしまったり、担当者が見落としたりする可能性があります。

そのため、重要なフォームではメール通知と送信データを蓄積する（Collect submissions）を併用するという使い方もできます。

メール

フォームの送信内容を指定したメールアドレスに送信します。
一般的なお問い合わせフォームなら、この機能を利用することになるでしょう。

メールアドレス 2

Proでは、もう1つ独立したメール送信を設定できます。
例えば、

Email　→ サイト管理者へお問い合わせ内容を送信
Email 2　→ お問い合わせをした本人へ受付確認メールを送信

という使い方ができます。
つまり、管理者への通知とユーザーへの自動返信を分けて設定できます。

これはお問い合わせフォームでは非常に便利な機能です。

Webhookについて

Webhookを利用すると、フォームから送信されたデータを外部サービスへ渡すことができます。
Webhookとは簡単に言えば、

「フォームが送信されたら、その情報を指定したURLへ送る」

という仕組みです。
例えば、

Atomicフォーム
↓
Webhook
↓
外部サービス

という流れを作ることができます。
Webhookを受け取れるサービスであれば、フォームと外部サービスを連携できます。
例えば、

接続先	利用例
Zapier	フォーム → Google Sheets、Gmail、Slack、CRMなど
Make	フォーム → 複数のサービスを組み合わせた自動処理
n8n	自分で管理する自動化システムとの連携
Google Apps Script	フォーム → Googleスプレッドシートなど
Slack	フォーム送信をSlackへ通知
Discord	フォーム送信をDiscordへ通知
自作API・PHP	自社システムや予約システムなどへ送信
CRM・MA	顧客情報を外部システムへ登録

ここで注意したいのは、「この一覧のサービスに直接接続できる」という意味ではないことです。
Webhookは、基本的に「送信先のURL」にフォームデータを渡す仕組みです。
そのため、

Atomicフォーム → Webhook → Make

のように、Webhookを受け取るサービスを間に入れて、そこからGoogleスプレッドシートやSlackなどへ処理をつなげることができます。
ElementorのWebhookは、第三者サービスへフォームデータを渡すための仕組みとして案内されています。

今後、実際にZapier、Make、Google Apps Scriptなどと接続する方法についても、具体例を紹介していく予定です。

メール設定

次に、フォームを送信したときに送られるメールを設定します。

メールの設定では、

• 送信先
• 件名
• 本文
• Fromメール
• From名
• Reply-to
• CC
• BCC

などを設定できます。

例えば、お問い合わせフォームに「メールアドレス」という入力欄がある場合、その入力内容をReply-toに指定しておけば、受信したメールからそのまま問い合わせ者へ返信しやすくなります。

ここは少し分かりにくいところなので、FromとReply-toは別物と覚えておくとよいでしょう。

• From → メールを送信する側のアドレス
• From name → メールの送信者名
• Reply-to → 返信先として指定するアドレス

特にお問い合わせフォームでは、送信者本人のメールアドレスをFromにするのではなく、サイト側のメールアドレスをFromにして、問い合わせ者のメールアドレスをReply-toにする構成が一般的です。

メール本文をカスタマイズする

メールの件名と本文は自由に設定できます。
デフォルトでは、フォームの入力内容をまとめて取得する**[all-fields]**が利用されています。

[all-fields]を使えば、フォームに入力された項目をまとめてメール本文に入れることができます。

一方で、項目ごとにショートコードを指定すれば、メールの内容を自由に組み立てることもできます。

例えば、

お名前：[name]
メールアドレス：[email]
お問い合わせ内容：[message]

といった形です。

V4では、各フィールドの設定から利用するショートコードを確認して指定できます。

なお、ショートコードはフォームフィールドのAdvanced設定に表示されるものを使用する必要があります。Elementor公式も、フォームフィールド以外のショートコードをメール欄に入れるとサーバーエラーの原因になる可能性があると案内しています。

メールの詳細設定

さらに設定を展開すると、メールに含めるメタデータも設定できます。

メタデータには、例えば、

• 日時
• ページURL
• ユーザーエージェント
• IPアドレス
• Credit

などがあります。

ページURLは意外と便利

個人的に便利だと思うのがページURLです。
例えば、サイトのフッターにお問い合わせフォームを設置している場合、訪問者がどのページを見て問い合わせフォームを送信したのかが分かります。
複数のサービスページを持つサイトでは、

「どのサービスページからお問い合わせが来たのか」

を確認する手掛かりにもなります。

Creditについて

「Credit」は、フォームがElementorで作られたことを示す情報です。
特に必要がなければ、メールに含めない設定にしてもよいでしょう。

フォームを構成する各要素も設定が必要

ここまでが「Atomicフォームそのもの」の設定です。
ただし、ここで終わりではありません。
Atomicフォームは、複数のAtomic要素を組み合わせて作られています。

そのため、

• Label
• Input
• Text Area
• Checkbox
• Radio Button
• Select
• Date Picker
• Time Picker
• File Upload
• Submit Button

など、それぞれの要素にも個別の設定があります。
例えばInputなら、

• ラベル
• 入力タイプ
• 必須項目
• ID
• 属性

などを設定します。
File Uploadなら、

• 最大ファイルサイズ
• 許可するファイル形式
• 複数ファイルの許可
• 必須項目
• ファイルの送信方法

など、さらに細かな設定があります。
つまり、Atomicフォームを理解するには、

① フォーム全体の設定

と

② フォームを構成する各Atomic要素の設定

の2つに分けて考えると分かりやすいでしょう。

このあたりは、従来のフォームウィジェットとの大きな違いです。

Atomicフォームを使うときに覚えておきたいこと

Atomicフォームは、従来のフォームウィジェットよりも「フォームを細かい部品に分解して組み立てる」という考え方が強くなっています。
そのため、最初は設定項目が多く感じるかもしれません。
しかし、

フォーム全体 → 各フィールド → 送信後の処理 → 成功・エラー表示

という順番で考えると、かなり整理しやすくなります。
特に実際のサイト制作では、

フォームを作る
↓
入力項目を設定する
↓
必須項目を設定する
↓
送信先メールを設定する
↓
自動返信が必要ならEmail 2を設定する
↓
必要ならCollect submissionsを有効にする
↓
必要ならWebhookで外部サービスと連携する
↓
Success / Errorの表示を整える

という流れで作るとよいでしょう。

まとめ

今回は、Elementor V4のAtomicフォームエレメントの基本設定について解説しました。
Atomicフォームは、単純に「お問い合わせフォームを作るためのエレメント」というより、

複数のAtomic要素を組み合わせて、フォーム全体を構築するための土台

と考えると分かりやすいと思います。
特に重要なのは、

• フォーム名
• Normal / Success / Error
• 送信後のアクション
• Email
• Email 2
• Collect submissions
• Webhook
• メールの詳細設定

あたりです。
そして、実際のフォーム制作では、これらの設定に加えて、InputやSelect、Checkbox、File Uploadなど各フィールド側の設定も行う必要があります。
V4のフォームは、従来のフォームと比べて「デザインの自由度」が大きな特徴の一つですが、それだけではありません。
フォームの構造そのものを細かいAtomic要素に分けることで、デザインと構造をより柔軟に組み立てられるようになったことも大きなポイントです。

次の章では、実際にAtomicフォームを使って、デザインをどこまで自由に変更できるのか、実用的なお問い合わせフォームをどのように作るのかを見ていきたいと思います。