あなたのサイトのポップアップに WordPress のフォームを追加したいですか?ポップアップにフォームを表示することで、より多くのリードを生成し、ビジネスの売上を向上させることができます。
このチュートリアルでは、WPFormsとOptinMonsterを使ってポップアップフォームを作成する方法を紹介します。
始める前に、WPFormsがWordPressサイトにインストールされ、有効になっていることを確認してください。
OptinMonsterのインストール
まず、ポップアップやその他のマーケティングソリューションを作成するための強力なWordPressプラグイン、OptinMonsterをインストールします。
プラグイン " 新規追加に進み、検索バーでOptinMonsterプラグインを検索します。
次に、「今すぐインストール」ボタンをクリックしてプラグインをインストールします。
OptinMonsterプラグインをインストールしたら、有効化をクリックしてプラグインを有効にします。
注：WPBeginner's Guide toInstall WordPress Pluginsをご参照ください。
あなたのサイトをOptinMonsterに接続する
OptinMonsterプラグインを有効にすると、セットアップウィザードを介してOptinMonsterにサイトを接続するように求められます。OptinMonsterのアカウントをお持ちの場合は、[既存のアカウントに接続]をクリックして続行します。
表示された新しいダイアログで、Connect To WordPressをクリックする。
OptinMonsterは、ログインするとすぐにあなたのサイトに自動的に接続します。
フォームの作成
OptinMonsterをインストールしたら、次はポップアップフォームの設定です。まずは新規フォームを作成しましょう。
この例では、シンプルな問い合わせフォームテンプレートを使ってフォームを作成します。これを行うには、WPForms " 新規追加 に進みます。次に、テンプレートを使用ボタンをクリックしてシンプルなコンタクトフォームテンプレートを選択します。
フォームのプレビューエリアにドラッグ＆ドロップしてフィールドを追加することができます。
フォームからフィールドを削除するには、そのフィールドにカーソルを合わせて赤いゴミ箱アイコンをクリックします。
フォームの編集が終わったら、必ず「保存」ボタンをクリックして変更を保存してください。
フォームを保存した後、設定タブでさらなるカスタマイズが可能です。
フォームが送信されたときにメールを受け取りたい場合は、フォーム通知の設定ガイドをご覧ください。また、フォームの確認設定を行うこともできます。
注:いくつかのWPFormsフィールドはOptinMonsterのポップアップと互換性がありません。サイト上で公開する前に、ポップアップでフォームをプレビューしてテストすることをお勧めします。
OptinMonsterでポップアップを作成する
フォームの準備ができましたので、ポップアップの作成を開始します。始めるには、OptinMonster " キャンペーンに行き、新規追加をクリックします。
テンプレート画面に移動します。デフォルトでは、OptinMonsterはキャンペーンタイプとしてポップアップを選択します。
利用可能なカテゴリの中からポップアップテンプレートを選択するか、あなたの意図するスタイルに最も近い検索語を入力してください。
使用するテンプレートを選択し、「Use Template」ボタンをクリックします。
次に、キャンペーン作成ダイアログでキャンペーン名を選択し、作成開始ボタンをクリックしてポップアップのカスタマイズに移ります。
次に、あなたのポップアップがOptinMonsterアプリで開き、そこであなたの好きなようにキャンペーンをカスタマイズすることができます。
注：OptinMonsterのキャンペーンに関する詳細は、キャンペーンのデザインに関するドキュメントをご覧ください。
WPFormsブロックの埋め込み
OptinMonsterのポップアップにフォームを追加するには、左のサイドバーでWPFormsブロックを見つけてください。検索ボックスでWPFormsを検索することもできます。
次に、WPForms ブロックをクリックしてポップアップの表示したい場所にドラッグします。次に、フォーム選択ドロップダウンリストで以前に作成したフォームを選択します。
注意：ドロップダウンリストにフォームが表示されない場合は、サイトがOptinMonsterに接続されていることを確認してください。
ポップアップの設定が完了したら、「保存」ボタンをクリックして変更を適用します。
ポップアップフォームを公開する
ポップアップの設定がすべて完了したら、いよいよ公開です。これを行うには、まず「公開」タブをクリックする必要があります。
次に、Publish Statusの下にあるPublishボタンをクリックします。
これでポップアップがあなたのサイトに登場します。
ポップアップフォームをプレビューする
ポップアップがまだ公開されていない場合は、ステップに従ってフォームを公開し、プレビューボタンをクリックしてください。
注意:プレビューはポップアップが少なくとも1回公開された後にのみ利用できます。
これにより、新しいタブでサイトが読み込まれ、フォームが埋め込まれたポップアップが表示されます。
このポップアップをライブにする準備ができていない場合は、プレビューが終了したら、公開ステータスを 下書きにリセットしてください。
注：ドラフトモードでOptinMonsterキャンペーンをプレビューしようとすると、フォーム全体ではなくWPFormsショートコードが表示されます。これは正常で予期された動作です。フォーム全体を見るにはキャンペーンを公開する必要があります。
よくある質問
以下では、WPFormsでポップアップフォームを作成する際によくある質問にお答えします。
ポップアップで使用するフォームを変更したら、ショートコードしか表示されなくなりました。どうすればいいですか？
ポップアップに表示するフォームを変更した場合、上記のプレビュー方法が機能しなくなることに気づくでしょう。代わりに、ポップアップをプレビューすると、フォームのショートコードだけが表示されます。
この問題を解決するには、キャンペーンの公開ステータスを一時的に変更する必要があります。例えば、公開ステータスが 下書きに設定されている場合、公開に変更します。
フォームがリフレッシュされ、OptinMonster ポップアップ内に正しく読み込まれます。まだポップアップを公開する準備ができていない場合は、プレビューが終わったときに公開ステータスが下書きに設定されていることを確認してください。
ポップアップ・フォームをGoogle Sheetsと連携させることはできますか？
はい。WPFormsはGoogle Sheetsとシームレスに統合できます。この統合はGoogle Sheetsアドオンで可能です。
注：フォームをスプレッドシートに接続するには、Google Sheetsアドオンをインストールして有効化する必要があります。
アドオンをインストールし、Googleアカウントに接続すると、フォームフィールドをスプレッドシートの列にマッピングできるようになります。
フォームとGoogle Sheetsの連携については、Google Sheetsアドオンのチュートリアルをご覧ください。
以上です！これでWPFormsでポップアップフォームを作成する方法がわかりました。
次に、フォームを公開する前にテストしたいとお考えですか？弊社のフォームテストチェックリストをご覧ください。