導入部分

この章では、Atomicフォームの概要について解説しています。
具体的な設定方法は、こちらでご確認ください。

ElementorV4からフォームの仕様が変わりました。
V4のAtomicフォームとこれまでのフォームウィジェットとは、設定方法が全く異なりますので、徹底的に解説していきます。

まず、何が変わったかと言うと、これまでは一つのウィジェットにすべての要素が含まれていましたので、レイアウトに制限がありました。
しかし、新しいフォームでは、Atomicフォームというエレメント（上図参照）が全体を包む役割を果たし、その中に単体エレメントを自由に追加・配置できるため、デザインの自由度が高まりました。

ことばで説明する前に実際の画面で見てみましょう。

旧フォームとV4のAtomicフォームの比較

Elementorの旧フォームと新しくなったElementorV4のAtomicフォームの実際の見た目の違いを見ていきます。
旧フォームは一つのウィジェットですので、すべての項目をひとつのスタイルでデザインしていくことになるので、融通がききません。
何か変化を加えるにはCSSを駆使するなどコードの知識が必要になります。
それに対して、Atomicフォームはラベルと入力エリアが別々のエレメントになっているので自由に配置することができます。

たとえば、間に「罫線」を入れたり、「段落エレメント」を入れて入力の注意事項などを入れたりできます。
また、Flexboxコンテナと組み合わせることで、「ラベルと入力欄を単一のデザインではなく、縦並びと横並びを混在にする」「チェックボックスを2列並べにする」など、ピクセル単位で自由自在にレイアウトできます。

Atomicフォームの基本設定

「Atomicフォーム」は枠組みと説明しましたが、その他のエレメントについてもその用途を解説します。

• Label（ラベル/項目名）
• Text input（1行テキスト入力）
• Text area（複数行テキスト入力）
• Radio button（ラジオボタン）
• Checkbox（チェックボックス）
• 選択（ドロップダウン選択）
• Date picker / Time picker（日付・時間選択）
• Submit button（送信ボタン）
• File Upload（ファイルアップロード）

出来ないこと

詳しく解説する前にできないことを解説します。
最後の最後に「なんだよ！それできないなら意味ないじゃねーかぁ！」とお怒りをいただくことにならないように、最初のうちにお伝えしておきます。

ステップアップフォーム

ステップアップフォームとは、たとえば、フォームの１ページ目に基本情報を入力した後、「次へ」で詳細情報を入力させるようなフォームです。
高度なフォームでは、そのステップに分岐をもたせることもできます。
ElementorV4のAtomicフォームではこのようなステップフォームを作ることはできません。

確認画面を表示させた後、送信する

日本人が好む確認画面を1枚挟んで、戻るボタンで修正するか送信するか、ユーザーに選択させる画面を表示させることはできません。

リダイレクト

送信後にサンキュページにリダイレクトさせる機能が標準で備わっていません。
JavaScriptでリダイレクトさせることはできますが、設定だけはリダイレクトはできません。

ハニーポット（スパム対策）

旧フォームにあったスパム対策（eCAPTCHA / Honeypot）は設定から消えています。
できる対策としては、Cloudflareなどがあります。

以上のできないことを理解した上でご使用ください。
では、肝心の使い方について解説していきます。
詳しくはこちらの記事で設定方法を解説しています。