AI要約
WordPressフォームをElementorポップアップに追加しますか？サイトでElementor Proを実行している場合は、組み込みのポップアップツールを使用してフォームを表示したい場合があります。
このチュートリアルでは、WPFormsを使用してElementorポップアップを設定および使用する方法を説明します。
要件：Elementorポップアップビルダーは、Elementor Proでのみ利用可能です。
Elementor Proをお持ちでなく、それでもポップアップフォームを作成したい場合は、お問い合わせフォームのポップアップを作成するガイドをご覧ください。
開始する前に、WordPressサイトにWPFormsをインストールして有効化し、ライセンスキーを確認してください。
ポップアップの作成
Elementorで新しいポップアップを作成するには、WordPress管理エリアのサイドバーにあるテンプレート » ポップアップに移動します。次に、緑色の新規ポップアップを追加ボタンをクリックします。
これにより、ポップアップの名前を付けられるオーバーレイが開きます。この例では、テンプレートにお問い合わせという名前を付けます。
次に、緑色のテンプレートを作成ボタンをクリックします。
フォームの埋め込み
次に、ポップアップ用の事前作成済みテンプレートを選択できるElementorのテンプレートライブラリが表示された別のオーバーレイが表示されます。
この例では、テンプレートライブラリを終了し、ポップアップを手動でゼロから構築するために、Xボタンをクリックします。
メインのテンプレートビルダーから、左側のサイドバーのウィジェットでWPFormsウィジェットを検索します。次に、それをクリックしてビルダーにドラッグします。
WPFormsウィジェットをポップアップに追加したら、既存のフォームを埋め込むか、新しいフォームを作成できます。
既存のフォームの埋め込み
WPForms Elementorウィジェットには、埋め込みたい既存のフォームの名前を選択できるドロップダウンメニューがあります。
このフォームに変更を加えたい場合は、サイドバーの選択したフォームを編集リンクをクリックすることで、ポップアップビルダーから直接行うことができます。
これにより、WPFormsフォームビルダーが表示されたポップアップが開き、フォームを編集して変更を保存できます。
新規フォームの作成
ポップアップ用の新しいフォームを作成したい場合は、左側のパネルにある+新規フォームボタンをクリックします。
これにより、WPFormsフォームビルダーが表示されたポップアップが開き、フォームに名前を付け、テンプレートを選択してカスタマイズを開始できます。
ビルダーを閉じる前に、必ずフォームを保存してください。新しいフォームに変更を加えたい場合は、左側のサイドバーにある選択したフォームを編集リンクをクリックして、フォームビルダーを再度開いてください。
注：フォームの作成方法については、最初のフォームの作成方法ガイドをご覧ください。また、事前作成済みのフォームテンプレートを使用したい場合は、マルチページElementorフォームテンプレートもご確認ください。
フォームのカスタマイズ
ポップアップにフォームを追加したら、Elementorのビルダーのスタイル タブから、ウェブサイトの外観に合わせてその表示を微調整することもできます。
スタイルタブでは、CSSの知識がなくても、フォームフィールド、ラベル、ボタンのスタイルを調整できます。
詳細については、フォームのカスタマイズに関するガイドをご覧ください。
AJAXフォーム送信のオン
既存のフォームをポップアップに追加する場合でも、新しいフォームを作成する場合でも、AJAXフォーム送信が有効になっていることを確認することをお勧めします。これにより、送信後にポップアップが閉じたり、フォームの確認メッセージが非表示になったりするのを防ぐことができます。
AJAX送信は、すべての新しいフォームでデフォルトで有効になっています。ただし、ポップアップビルダーのサイドバーにある選択したフォームを編集リンクをクリックし、フォームビルダーで設定 » 一般に移動して、このオプションがオンになっていることを再確認できます。
次に、高度な設定セクションで、AJAXフォーム送信を有効にする設定がオンになっていることを確認してください。
フォームビルダーを閉じる前に変更を保存してください。
オーバーレイでの閉じる防止の有効化
フォームを選択して埋め込んだ後、ファイルアップロードまたは日付/時刻フィールドが含まれている場合にフォームが閉じないように、ポップアップのオプションを設定する必要があります。
ポップアップの設定を開くには、下部にあるElementorメニューバーの歯車アイコンをクリックします。高度な設定タブで、オーバーレイでのクローズを防止オプションをオンにします。
ポップアップの設定が完了したら、画面左下にある公開ボタンをクリックします。
ポップアップ設定の構成
Elementorがポップアップを公開する前に、条件、トリガー、および高度なルールの設定を設定する必要があります。これらのオプションは、ポップアップビルダーの公開ボタンをクリックすると表示されます。
この例では、ポップアップをサイト全体に表示するように条件を設定します。
また、ポップアップのトリガーをページ読み込み時設定に設定します。
これにより、ユーザーはページを訪れたときに、それが読み込まれるとすぐに、どのページにいてもポップアップが表示されます。
この例では高度なルールを追加しません。ポップアップの設定を構成したら、保存して閉じる ボタンをクリックします。
注意: 各ポップアップ設定が何をするかについて詳しく知りたい場合は、Elementorの完全なドキュメントをご覧ください。
その後、ポップアップが公開されます。サイトのフロントエンドにアクセスして表示できます。
これで完了です！ElementorポップアップにWordPressフォームを追加できるようになりました。
次に、ユーザーがフォームを完全に完了しなくても、リードをキャプチャする方法を学びたいですか？フォーム放棄アドオンのガイドを必ず確認してください。