### [ElementorポップアップにWPFormsを追加する方法](https://wpforms.com/docs/how-to-add-wpforms-to-an-elementor-popup/) **公開日:** 2023年11月23日 **著者:** Umair Majeed **抜粋:** Elementorのポップアップにフォームを追加する方法を学びます。Elementor Proが必要です。 **コンテンツ:** WordPressフォームをElementorのポップアップに追加したいですか？サイトでElementor Proを実行している場合は、組み込みのポップアップツールを使用してフォームを表示したい場合があります。 このチュートリアルでは、ElementorポップアップをWPFormsで設定して使用する方法を説明します。 **要件:** Elementorポップアップビルダーは、[Elementor Pro](https://elementor.com/pro/)でのみ利用可能です。 Elementor Proをお持ちでなく、それでもポップアップフォームを作成したい場合は、[ポップアップフォームの作成方法](https://wpforms.com/docs/how-to-create-a-popup-form-with-wpforms/)ガイドをご覧ください。 --- 開始する前に、WordPressサイトに[WPFormsをインストールして有効化](https://wpforms.com/docs/install-wpforms-plugin/)し、[ライセンスキーを確認](https://wpforms.com/docs/verify-wpforms-license/)してください。 ## ポップアップの作成 Elementorで新しいポップアップを作成するには、WordPress管理エリアのサイドバーにある**テンプレート » ポップアップ**に移動します。次に、緑色の**新規ポップアップを追加**ボタンをクリックします。 これにより、ポップアップの名前を付けられるオーバーレイが開きます。この例では、テンプレートに**お問い合わせ**という名前を付けます。 次に、緑色の**テンプレートを作成**ボタンをクリックします。 ## フォームの埋め込み 次に、Elementorのテンプレートライブラリが表示される別のオーバーレイが表示され、ポップアップ用の既製のテンプレートを選択できます。 この例では、テンプレートライブラリを終了するために**X**ボタンをクリックし、ポップアップをゼロから手動で構築します。 メインのテンプレートビルダーから、左側のサイドバーにあるウィジェットで**WPForms**ウィジェットを検索します。次に、それをクリックしてビルダーにドラッグします。 WPFormsウィジェットをポップアップに追加したら、既存のフォームを埋め込むか、新しいフォームを作成できます。 ### 既存のフォームの埋め込み WPForms Elementorウィジェットには、埋め込みたい既存のフォームの名前を選択できるドロップダウンメニューがあります。 このフォームに変更を加えたい場合は、サイドバーの**選択したフォームを編集**リンクをクリックすることで、ポップアップビルダーから直接行うことができます。 これにより、WPFormsフォームビルダーが表示されるポップアップが開き、フォームを編集して保存できます。 ### 新規フォームの作成 ポップアップ用の[新しいフォームを作成](https://wpforms.com/docs/creating-first-form/)したい場合は、左側のパネルにある**+ 新規フォーム**ボタンをクリックします。 これにより、WPFormsフォームビルダーが表示されるポップアップが開き、フォームの名前を付け、テンプレートを選択し、カスタマイズを開始できます。 ビルダーを閉じる前に、必ずフォームを保存してください。新しいフォームに変更を加えたい場合は、左側のサイドバーにある**選択したフォームを編集**リンクをクリックして、フォームビルダーを再度開きます。 **注:** フォームの作成にヘルプが必要な場合は、[最初のフォームの作成方法](https://wpforms.com/docs/creating-first-form/)ガイドをご覧ください。また、既製のフォームテンプレートを使用したい場合は、[Elementorマルチステップフォームテンプレート](https://wpforms.com/templates/elementor-multi-step-form-template/)もご確認ください。 ### フォームのカスタマイズ フォームをポップアップに追加したら、Elementorビルダーの**スタイル**タブから、ウェブサイトの外観に合わせて表示を調整することもできます。 スタイルタブでは、CSSの知識がなくても、フォームフィールド、ラベル、ボタンのスタイルを調整できます。 詳細については、[フォームのカスタマイズ方法](https://wpforms.com/docs/how-to-add-wpforms-to-an-elementor-page/#customize-form)ガイドをご覧ください。 ### AJAXフォーム送信の有効化 既存のフォームをポップアップに追加する場合でも、新しいフォームを作成する場合でも、[AJAXフォーム送信](https://wpforms.com/docs/how-to-enable-ajax-form-submissions/)が有効になっていることを確認することをお勧めします。これにより、送信後にポップアップが閉じたり、フォームの[確認メッセージ](https://wpforms.com/docs/setup-form-confirmation-wpforms/)が非表示になったりするのを防ぐことができます。 AJAX送信は、すべての新規フォームでデフォルトで有効になっています。ただし、ポップアップビルダーのサイドバーにある**選択したフォームを編集**リンクをクリックし、フォームビルダーの**設定 » 一般**に移動することで、このオプションがオンになっていることを再確認できます。 次に、**高度な設定**セクションで、**AJAXフォーム送信を有効にする**設定がオンになっていることを確認します。 フォームビルダーを閉じる前に、変更を保存してください。 ### オーバーレイでのクローズ防止の有効化 フォームを選択して埋め込んだら、ファイルアップロードフィールドまたは日付/時刻フィールドが含まれている場合にフォームが閉じないように、ポップアップのオプションを設定する必要があります。 下部Elementorメニューバーの歯車アイコンをクリックして、ポップアップの設定を開きます。**高度な設定**タブで、**オーバーレイでのクローズ防止**オプションをオンにします。 ポップアップの設定が完了したら、画面左下隅にある**公開**ボタンをクリックします。 ## ポップアップ設定の設定 Elementorがポップアップを公開する前に、**条件**、**トリガー**、**高度なルール**の設定を行う必要があります。これらのオプションは、ポップアップビルダーで**公開**ボタンをクリックすると表示されます。 この例では、ポップアップをサイト全体に表示するように条件を設定します。 また、ポップアップのトリガーを**ページ読み込み時**設定に設定します。 これにより、ユーザーがどのページにアクセスしても、読み込み時にポップアップが表示されます。 この例では高度なルールを追加しません。ポップアップの設定が完了したら、**保存して閉じる**ボタンをクリックします。 **注:** 各ポップアップ設定の詳細については、[Elementorの完全なドキュメント](https://elementor.com/help/popups/)をご覧ください。 これでポップアップが公開されます。サイトのフロントエンドにアクセスして表示できます。 これで、WordPressフォームをElementorポップアップに追加できるようになりました。 次に、ユーザーがフォームを完全に完了しなくてもリードをキャプチャする方法を学びたいですか？[フォーム放棄アドオン](https://wpforms.com/docs/how-to-install-and-use-form-abandonment-with-wpforms/)のガイドを必ず確認してください。 **カテゴリ:** 拡張機能、機能拡張 ---