フォームは、シンプルなお問い合わせフォームから複雑なマルチステップ登録フローまで、どのウェブサイトにも欠かせないものです。Elementor Proには、別のフォームプラグインを必要としない多くのケースで使用できる組み込みのフォームウィジェットが含まれています。このガイドでは、Elementor Proを使用してお問い合わせフォーム、登録フォーム、マルチステップフォームを作成する方法と、メールマーケティングやCRMサービスとの統合オプションについて説明します。
このチュートリアルにはElementor Proが必要です。Elementorの無料版にはフォームウィジェットが含まれていません。
Elementorフォームウィジェットの概要
Elementorフォームウィジェットは、以下のフィールドタイプをサポートしています：
| フィールドタイプ | 使用例 | 備考 |
|---|---|---|
| テキスト | 名前、会社、件名 | 1行のテキスト入力 |
| メール | メールアドレスの収集 | メール形式の検証を含む |
| テキストエリア | メッセージ本文、コメント、説明 | 行数を設定できる複数行テキスト |
| 電話 | 電話番号 | モバイルで数字キーボードを表示 |
| 数値 | 数量、予算、評価 | 最小/最大/ステップの検証 |
| URL | ウェブサイトのアドレス | URL形式の検証 |
| 選択 | ドロップダウン選択（国、カテゴリ） | 単一または複数選択 |
| ラジオ | オプションからの単一選択（サービスの種類） | ドロップダウンなしで表示されるオプション |
| チェックボックス | 複数選択（興味、サービス） | 複数選択が可能 |
| 日付 | 予約日、イベント日 | ネイティブの日付ピッカー |
| 時間 | 予約のスケジューリング | 時間選択コントロール |
| ファイルアップロード | 履歴書、文書、画像の提出 | 設定可能なファイルタイプとサイズ制限 |
| 承認 | 利用規約、GDPR同意 | リンク付きの必須チェックボックス |
| 隠し | トラッキングデータ（ページURL、リファラー） | ユーザーには表示されない |
| reCAPTCHA | スパム保護 | v2チェックボックスまたはv3不可視 |
| ハニーポット | スパム対策（人間には見えない） | ボットを捕まえる隠しフィールド |
お問い合わせフォームの作成
ステップ1: フォームウィジェットを追加
- Elementorエディターで任意のページを開く
- ウィジェットパネルで"フォーム"を検索
- フォームウィジェットをレイアウトにドラッグ
- デフォルトのフォームには名前、メール、メッセージフィールドが含まれています
ステップ2: フォームフィールドを設定
標準的なお問い合わせフォームには、以下のフィールド設定が適しています：
- 名前（テキストフィールド、必須）– プレースホルダー: "あなたの名前"
- メール（メールフィールド、必須）– プレースホルダー: "[email protected]"
- 件名（テキストフィールド、任意）– プレースホルダー: "どのようにお手伝いできますか？"
- メッセージ（テキストエリアフィールド、必須）– プレースホルダー: "あなたのプロジェクトについて教えてください…", 行数: 5
- reCAPTCHAまたはハニーポットによるスパム保護
ステップ3: 送信後のアクションを設定
"送信後のアクション"セクションで、ユーザーがフォームを送信したときに何が起こるかを設定します： For related information, see our guide on Elementor complete guide.
- メール: フォームデータをあなたのメールアドレス（または複数のアドレス）に送信
- リダイレクト: 送信後にユーザーを感謝のページに送信
- ポップアップ: 確認ポップアップを表示
- Webhook: フォームデータを外部URLに送信（Zapier、Make、カスタムAPI）
- Mailchimp / ConvertKit / Drip: メールマーケティングリストに購読者を追加
- Slack: Slackチャンネルに通知を送信
- Discord: Discord Webhookに通知を送信
ステップ4: フォームのスタイルを設定
スタイルタブで、視覚的な外観をカスタマイズします： For related information, see our guide on Elementor templates and kits.
- フォームレイアウト
- フィールドの配置: フル幅で積み重ねるか、インラインで並べる（横並び）
- フィールドスタイリング: ボーダー、背景色、パディング、ボーダー半径、フォーカス状態の色
- ラベルスタイリング: フォントファミリー、サイズ、色、スペーシング
- ボタンスタイリング: 背景色、テキスト色、ボーダー、ホバー効果、フル幅オプション
- メッセージ: 成功およびエラーメッセージの色とタイポグラフィ
マルチステップフォームの作成
マルチステップフォームは、すべてのフィールドを一度に表示するとユーザーが圧倒される長いフォーム（登録、申請、調査）に便利です。Elementor Proはマルチステップフォームをネイティブにサポートしています。 For related information, see our guide on creating landing pages with Elementor.
ステップの設定方法
- ページにフォームウィジェットを追加します
- フォームフィールドリストで、フィールドのグループ間に"ステップ"フィールドタイプを追加します
- 各ステップフィールドは「次へ」と「前へ」ボタンを持つ新しいステップを作成します
- 例の構造:
- ステップ1: 名前、メール、電話（個人情報）
- ステップ2: 会社、予算、タイムライン（プロジェクト詳細）
- ステップ3: メッセージ、ファイルアップロード（追加情報）
マルチステップフォームは、ユーザーがどのステップにいるかを示す進捗インジケーターを表示します。これにより、認識される複雑さが減少し、すべてのフィールドを一度に表示する場合と比較して完了率が向上します。
ユーザー登録フォームの作成
Elementor Proは、別のプラグインなしでWordPressユーザー登録フォームを作成できます:
- フォームウィジェットを追加し、フィールド（ユーザー名、メール、パスワード）を設定します
- 「送信後のアクション」で"登録"アクションを追加します
- 各フォームフィールドを対応するWordPressユーザーフィールドにマッピングします
- 新しい登録のデフォルトユーザー役割を設定します
- オプションで、登録後にユーザーをアカウントページにリダイレクトします
注意: WordPressはデフォルトで新しいユーザーを承認するために管理者を必要とします。ユーザーが自由に登録できるようにしたい場合は、設定 → 一般 → メンバーシップで変更できます。
メールマーケティングサービスとの統合
Elementor Proは、人気のあるメールマーケティングプラットフォームと直接統合します:
サービス 統合タイプ 設定手順 Mailchimp ネイティブ（組み込み） APIキーを追加 → リストを選択 → フィールドをマッピング ConvertKit ネイティブ（組み込み） APIキーを追加 → フォームを選択 → フィールドをマッピング ActiveCampaign ネイティブ（組み込み） API認証情報を追加 → リストを選択 → フィールドをマッピング Drip ネイティブ（組み込み） APIトークンを追加 → アカウントを選択 → フィールドをマッピング GetResponse ネイティブ（組み込み） APIキーを追加 → キャンペーンを選択 → フィールドをマッピング MailerLite ネイティブ（組み込み） APIキーを追加 → グループを選択 → フィールドをマッピング HubSpot Webhook経由 Zapier/Makeとの接続をWebhookアクションで作成 各統合のプロセスは、Elementorの統合設定にサービスのAPIキーを入力し、次にフォームの「送信後のアクション」としてサービスを選択します。フォームフィールドをサービスのフィールドにマッピングすると、フォームが送信されたときに自動的に購読者が追加されます。
スパム保護戦略
お問い合わせフォームはスパムボットを引き寄せます。Elementor Proは、いくつかのスパム防止オプションを提供します:
- Google reCAPTCHA v3: ユーザーの操作なしに提出物のスコアを付ける目に見えないスパム検出。ほとんどのフォームに推奨
- reCAPTCHA v2: 「私はロボットではありません」チェックボックス。より目立ちますが、フォームの完了率を下げる可能性があります
- ハニーポットフィールド: ボットが記入する目に見えないフィールド。フィールドにデータが含まれている場合、提出は拒否されます。ユーザーの操作は不要です
- 受け入れフィールド: 必須のチェックボックス（GDPR同意、利用規約の受け入れ）で、ボットの抑止にも役立ちます
reCAPTCHA v3とハニーポットフィールドを組み合わせて使用することをお勧めします。これにより、目に見える影響なしに2層のスパム保護が提供されます。
ユーザーエクスペリエンス。
Elementorフォームと専用フォームプラグインの比較
機能 Elementorフォーム Gravity Forms WPForms ビジュアルビルダー Elementorエディター内 別のドラッグ＆ドロップ 別のドラッグ＆ドロップ 条件付きロジック 基本（フィールドの表示/非表示） 高度 高度 支払い統合 PayPalボタン Stripe、PayPal、Square Stripe、PayPal、Square 計算 いいえ はい はい（Pro） マルチステップ はい はい はい ファイルアップロード はい はい はい エントリ管理 Elementorの送信を通じて 完全なエントリマネージャー 完全なエントリマネージャー ページビルダーが必要 はい（Elementor Pro） いいえ いいえ Elementorフォームは、コンタクトフォーム、ニュースレターのサインアップ、シンプルな登録フォームには十分です。支払い処理、高度な条件付きロジック、または洗練されたエントリ管理を必要とする複雑なフォームには、Gravity FormsやWPFormsのような専用フォームプラグインがより適しています。
よくある質問
Elementor ProなしでElementorフォームを使用できますか？
いいえ。フォームウィジェットはElementor Pro専用です。無料版のElementorでフォームが必要な場合は、Contact Form 7（無料）、WPForms Lite（無料）、またはGravity Forms（プレミアム）のような別のフォームプラグインを使用してください。
Elementorフォームの送信はどこに保存されますか？
フォームの送信はWordPressデータベースに保存され、管理パネルのElementor → 送信の下でアクセスできます。送信内容を表示、エクスポート（CSV）、削除することができます。また、送信はEmailアクションで設定したメールアドレスにも送信されます。
Elementorフォームはファイルアップロードを受け付けますか？
はい。フォームにファイルアップロードフィールドタイプを追加します。受け入れるファイルタイプ（PDF、JPG、PNG、DOCXなど）と最大ファイルサイズを設定できます。アップロードされたファイルはWordPressメディアライブラリに保存され、フォーム送信にリンクされます。
Elementorフォームに条件付きロジックを追加するにはどうすればよいですか？
Elementor Proは基本的な条件付きロジックをサポートしています：他のフィールドの値に基づいてフィールドを表示または非表示にします。フィールド設定で「条件付き」を有効にし、条件を設定します（例：「私はビジネスです」というラジオボタンが選択されたときのみ「会社」フィールドを表示）。高度な条件付きロジック（計算、マルチレベル条件）が必要な場合は、専用フォームプラグインがより適しているかもしれません。
Elementorでポップアップフォームを作成できますか？
はい。Elementorでポップアップテンプレートを作成し、その中にフォームウィジェットを追加し、トリガー条件（クリック、スクロール割合、退出意図、時間遅延）を設定します。これは、ニュースレターのサインアップ、リードマグネット、およびメインページレイアウトにフォームを追加せずにプロモーションオファーを提供するのに便利です。
Elementorフォームでスパムを防ぐにはどうすればよいですか？
Google reCAPTCHA v3（目に見えない）をHoneypotフィールドと組み合わせて二重保護を使用します。これにより、実際のユーザーに対して摩擦を加えることなく、自動化されたボットをブロックします。スパムの多いフォームには、受け入れフィールド（必須チェックボックス）を第三のレイヤーとして追加することを検討してください。
フォームビルダーを使ったElementor Proを入手
フォームウィジェット、テーマビルダー、WooCommerceビルダー、100以上のProウィジェットにアクセスできます。追加のプラグインなしで視覚的にフォームを構築します。
Elementor Proを閲覧 →
