WordPressのポップアップフォームの作成方法（2つの簡単な方法）

訪問者はあなたのページにアクセスし、ページ内をスクロールして回ってはいるものの、お問い合わせフォームへの入力やメールマガジンの登録をせずに離脱していませんか？

WordPressのポップアップフォームが、その解決策になるかもしれません。サイドバーやページの下部に埋もれたフォームに訪問者が気づいてくれることを期待するよりも、ポップアップなら適切なタイミングで訪問者の目の前に表示させることができます。

コンバージョン率の高いポップアップフォームは、訪問者の10人に1人近くをコンバージョンに導いており、これは一般的な静的フォームよりもはるかに優れた成果です。このガイドでは、2つの異なる方法を使ってポップアップフォームを作成する手順を詳しく解説します！

WordPressのポップアップフォームの作成方法

チュートリアルに入る前に、ポップアップフォームがなぜ有用なのか、そして始めるために何が必要なのかを簡単に説明しておきましょう。

なぜWordPressのポップアップフォームを使うべきなのか？

訪問者がサイトから離れようとしているときや、コンテンツをしばらく閲覧しているときに、タイミングよく表示されるポップアップは、訪問者に立ち止まって関心を引くきっかけとなります。サイト運営者がよく利用している主な活用例をいくつかご紹介します：

• お問い合わせフォーム：訪問者が現在表示しているページから離れることなく、お問い合わせいただけます。
• メール配信登録フォーム：訪問者がサイトを離れる前に登録を促し、ニュースレターの購読者数を増やしましょう。
• リード獲得フォーム： リード獲得フォームのページを閲覧している見込み客から情報を収集します。
• フィードバックとアンケート：訪問者の体験が記憶に新しいうちに、簡単な質問をしてみましょう。
• ログインと登録：既存のユーザーがページを遷移することなく、すぐにアクセスできるようにします。
• イベント登録：ウェビナー、ワークショップ、新製品発表などを、ターゲットを絞ったシングルオプトインまたはダブルオプトインの登録フォームで宣伝しましょう。

最も重要なのは、タイミングと適切さです。サイトにアクセスした瞬間に表示されるポップアップは、押し付けがましく感じられます。しかし、記事の半分ほどスクロールした後や、タブを閉じようとしたまさにそのタイミングで表示されるポップアップなら、役立つと感じられるでしょう。

また、ポップアップフォームをWPFormsの「Lead Forms」アドオンと組み合わせて、コンバージョン率の高いリード獲得用レイアウトを作成することも可能です。あるいは、ポップアップ内に「Conversational Forms」を使用すれば、1回に1つの質問を表示する形式となり、ユーザーへの負担を軽減できます。

はじめにフォームの作成

ポップアップを作成する前に、WPFormsでフォームを作成します。このチュートリアルはWPForms Liteを含むどのバージョンでも動作します。

WPForms Liteは入力データをメールで送信しますが、WordPress内に保存しない点にご注意ください。後でフォームの入力データを他のプラットフォームにエクスポートしたい場合は、WPForms Proをお勧めします。

WPForms LiteとWPForms Proの違いについては、こちらの記事をご覧ください。WPFormsをインストールして有効化したら、「WPForms」»「新規追加」 に移動し、新しいフォームを作成してください 。

2,100種類以上のテンプレートが揃ったフォーム設定画面が表示されます。ポップアップフォームの場合は、簡潔でコンパクトにまとめましょう。入力項目が少ないほど、特にモバイル画面では操作の負担が軽減されます。

ここでは「Simple Contact Form」テンプレートをベースにしますが、ニュースレターの登録フォームやフィードバックフォームなど、目的に合った他のテンプレートを選んでも構いません。

WPFormsがテンプレートを読み込み、ドラッグ＆ドロップビルダーの画面に移動します。「Simple Contact Form」には「名前」、「メールアドレス」、「本文」のフィールドが含まれており、現時点ではこれだけで十分です。

ポップアップではなく、フォームをウェブサイトに直接埋め込みたい場合は、WPFormsでもその機能に対応しています。ただし、このガイドではポップアップ方式を採用します。

フォームの見た目に満足したら、保存を押してください。さて、ポップアップに移る準備ができました。OptinMonsterから始めましょう。

方法 1：OptinMonster を使ってポップアップフォームを作成する

OptinMonsterは、100万以上のサイトで利用されている人気のWordPress用ポップアッププラグインです。ポップアップ、フローティングバー、スライドイン、その他のリード獲得キャンペーンに特化しています。

OptinMonsterには、ポップアップのデザインやターゲティングルールの設定ができるドラッグ＆ドロップ式のキャンペーンビルダーが搭載されています。その後、WordPressプラグインがサイト上でのキャンペーン表示を処理します。

OptinMonsterをインストールすると、3つのキャンペーンと500回のキャンペーン表示クレジットが付いた無料アカウントが利用可能になります。これなら、最初のポップアップフォームを設定し、実際のトラフィックでテストするのに十分な量です。

より多くのキャンペーンや、離脱検知などの高度なトリガー、A/Bテストなどの機能が必要な場合は、有料プランが月額7ドル（年額一括払い）からご利用いただけます。

1.OptinMonsterをインストールする

WordPressのプラグインディレクトリからOptinMonsterプラグインをダウンロードし、サイトにインストールできます。

WordPressプラグインのインストール方法がわからない場合は、以下の手順に従って、WordPressサイトにOptinMonsterを追加してください。

2.ポップアップ・キャンペーンの作成

それでは、ポップアップキャンペーンを作成しましょう。WordPressのサイドバーメニューから「OptinMonster」»「Campaigns」をクリックしてください。

これでキャンペーン作成ページに移動し、ポップアップの目標やその他の設定を行うことができます。「最初のキャンペーンを作成」ボタンをクリックしてください。

表示される選択肢から、キャンペーンの種類として「ポップアップ」を選択してください。画面を下にスクロールしてテンプレートを選びます。テンプレートにカーソルを合わせ、「テンプレートを使用」をクリックして選択してください。

ポップアップには「Basic」キャンペーンを使うのが好きです。カスタマイズが簡単で、出発点として最適だからです。さまざまなフォームの種類や登録方法に対応できるほど柔軟性があります。

OptinMonsterでは、キャンペーンの名前を入力するよう求められます。名前を入力して、「作成を開始」をクリックしてください。このチュートリアルの目的上、私は「WordPress ポップアップフォーム」と入力しました。

キャンペーンに名前を追加すると、テンプレートが読み込まれた状態でOptinMonsterのキャンペーンビルダー画面に移動します。

このテンプレートには独自の登録用入力フィールドが用意されていますが、WPFormsの連携機能やエントリー管理機能を利用できるようにするため、それらをWPFormsのフォームに置き換えることにします。

まず、ポップアップのヘッダーテキストを編集します。ヘッダーをクリックし、このフォームの目的を訪問者に伝えるメッセージを入力してください。次に、テンプレートから既存のオプトインフィールドを削除します。各フィールドにカーソルを合わせ、ゴミ箱アイコンをクリックして削除してください。

次に、WPFormsブロックをキャンペーンエリアのヘッダーテキストのすぐ下にドラッグ＆ドロップします。OptinMonsterにはWPFormsとのネイティブ連携機能があるため、この操作は簡単に行えます。

WPFormsブロックを追加したら、それをクリックします。左側の設定ペインで、「フォームの選択」ドロップダウンを開き、先ほど作成したフォームを選択します。

すごい！最初の方法でWordPressのポップアップフォームの作成はほぼ終わりました。あとは公開するだけです！

3.ポップアップフォームをプレビューして公開する

OptinMonsterはWPFormsで作られたフォームを埋め込むためにショートコードを使用しているため、ポップアップフォームキャンペーン内でフォームのライブプレビューをすぐに見ることができません。

ただし、公開する直前にプレビューを確認することができます。プレビューを表示するには、上部のナビゲーションバーにある「公開」ボタンをクリックしてください。

この画面には「プレビュー」ボタンがあります。「プレビュー」ボタンをクリックすると、サイトのフロントエンドに移動し、訪問者が閲覧するのと同じように、画面上にフォームが表示されます。

これで、OptinMonsterはページロード時にWordPressのポップアップフォームをトリガーします。私たちの例ではこのようになります：

プレビューでは、キャンペーンを公開する前にすべてを再確認することができます。

ポップアップフォームの見た目に問題がなければ、「公開ステータス」の下にある「公開」ボタンをクリックしてください。

キャンペーンが公開されました。サイトにアクセスするすべてのユーザーにポップアップフォームが表示されるようになります。必要に応じて、WordPressのポップアップフォームの表示ルールを変更することも可能です。

OptinMonster» キャンペーンに戻ります。先ほど作成したキャンペーンを見つけて、カーソルをその上に合わせます。次に、「出力設定」オプションをクリックします。

ここでは表示ルールを設定できます。ログイン済みのユーザーのみに表示する、訪問者のみに表示する、あるいは両方に表示するといった設定が可能です。また、特定のページを含めるか除外するかを選択することもできます。

表示設定をお好みの通りに変更したら、右側の緑色の「変更を保存」ボタンを必ずクリックしてください。これで、OptinMonsterとWPFormsを使ったWordPressのポップアップフォームキャンペーンの作成は完了です！

方法 2：Popup Maker を使ってポップアップフォームを作成する

別のソリューションをお探しの場合は、Popup MakerもOptinMonsterの優れた代替手段となります。これは70万以上のサイトで利用されているWordPress用ポップアッププラグインで、4,400件以上のレビューで4.9つ星の評価を獲得しています。

Popup Makerには無料版と有料のPro版があります。無料版には、基本的なポップアップフォーム作成に必要な機能がすべて揃っています。具体的には、ビジュアルポップアップエディタ、時間遅延やクリックで開くトリガー、ページ単位のターゲティング、Cookie制御などが利用可能です。

Popup Maker Pro（年間99ドル）には、離脱意図トリガー、スクロール深度トリガー、コンバージョン分析、高度なターゲティング、スケジュール機能が追加されています。どのプランでもトラフィック制限や月額料金はかかりません。

WordPressのダッシュボードからポップアップフォームを完全に構築できるソリューションがお望みなら、次の方法をお勧めします。

1.ポップアップメーカーをインストールする

このチュートリアルでは無料版のPopup Makerで十分です。OptinMonsterプラグインほど強力ではありませんが、WPFormsと同じように動作します。

先ほどと同じように、最初にWPFormsで作成したフォームを使い、ポップアップの中に埋め込みます。

2.ポップアップメーカーでポップアップを作成する

Popup Makerプラグインでポップアップを作成しましょう。この無料のWordPressプラグインを使えば、ゼロから簡単にポップアップを作ることができます。

WordPressのダッシュボードにアクセスし、「Popup Maker」→「新しいポップアップを追加」と進めば、ポップアップの編集画面が表示されます。

この画面でポップアップの名前を入力します。この例で行ったように、オプションで表示タイトルを入力することもできます。

それでは、WPFormsのフォームを追加しましょう。ブロックエディタ内の「+」ボタンをクリックして新しいブロックを追加し、WPFormsを検索して選択します。ドロップダウンメニューから、先ほど作成したフォームを選択してください。

WPFormsブロックが表示されない場合は、代わりに ショートコード ブロックを選択し、WPFormsのショートコードを貼り付けてください（例： ). フォームIDは WPForms " すべてのフォーム.

次に、エディタの下にある「ポップアップ設定」ボックスまでスクロールしてください。ここで、トリガー、ターゲティング、表示オプションを設定します。

[トリガー] タブで、[新しいトリガーを追加]をクリックし、[時間経過 / 自動表示] を選択します。これにより、訪問者がページに一定時間滞在した後、ポップアップが表示されます。

私は通常、これを5秒（5,000ミリ秒）に設定しています。これにより、ポップアップが表示される前に、訪問者が読み始めるための少しの時間を確保できます。「追加」をクリックしてトリガーを保存してください。

各トリガーには、ポップアップが再表示される頻度を制御するCookie設定も用意されています。デフォルトの「ポップアップ閉じた時」Cookieを設定すると、訪問者がポップアップを閉じた後、1か月間はポップアップが再表示されなくなります。

「ターゲティング」タブでは、ポップアップを表示するページを設定できます。デフォルトでは、ホームページのみに表示されます。ルールを追加することで、すべてのページ、特定の投稿、カテゴリー、またはカスタム投稿タイプにポップアップを表示するように設定できます。

[表示] タブで、ポップアップの外観を設定するポップアップテーマを選択します。Popup Maker にはいくつかの組み込みテーマが用意されていますが、[Popup Maker] » [ポップアップテーマ] からカスタムテーマを作成することもできます。

3. ポップアップを公開してテストする

ポップアップの設定に問題がなければ、ページの上部までスクロールして「公開」ボタンをクリックし、WordPressのポップアップフォームを公開してください。

これで完成です！これでWordPressのポップアップフォームをプレビューして、思い通りに表示されることを確認し、それに応じて設定を調整することができます。

より多くのコンタクトフォームのポップアップを作るには、このプロセスを繰り返し、異なる投稿やページなどに表示されるように設定や表示ルールをカスタマイズすることができます。または、クリエイティブになり、WordPressのポップアップアンケートを作ることもできます。

どのプラグインを選べばいいでしょうか？

どちらのプラグインも目的を果たしますが、それぞれ異なる用途向けに作られています。判断の参考になるよう、両者を並べて比較してみました：

特徴	オプチンモンスター	ポップアップメーカー
プラグインの種類	クラウド型ビルダーを搭載したWordPressプラグイン	100% WordPressネイティブ
無料版	3つのキャンペーン、500インプレッション	ポップアップの数に制限なし、トラフィック制限なし
有料プラン	月額7ドルから（年額一括払い）	Pro：年間99ドル、Pro+：年間249ドル
フォームの統合	WPFormsのネイティブブロック	WPFormsのブロック、ショートコード、および15種類以上のフォームプラグイン
無料のトリガー	時間遅延、スクロール、クリック	時間遅延、クリック、フォーム送信
離脱意図	プロプラン（月額29ドル）	プロプラン（年額99ドル）
A/Bテスト	プラスプラン（月額19ドル）	利用不可
アナリティクス	すべてのプランに標準装備	Proプラン以上
データ保存	クラウド（OptinMonsterのサーバー）	WordPressのデータベース
アクティブなインストール数	1,000,000+	700,000+

初めてポップアップフォームを作成するWordPressサイトの運営者の方には、まずはPopup Makerの無料版から始めることをお勧めします。ただし、離脱意図検知型ポップアップやA/Bテストが必要な場合は、高度な機能の面ではOptinMonsterの方が優れています。

WordPressのポップアップフォームに関するベストプラクティス

• わかりやすい見出しを付けましょう：ポップアップが表示されてから、その表示が邪魔にならないと納得してもらうまでの時間は約2秒しかありません。「週刊WordPressのヒントを受け取る」は、「ニュースレターを購読する」よりも効果的です。訪問者に、具体的に何が得られるのかを明確に伝えましょう。
• トリガーのタイミングを慎重に設定しましょう。ユーザーがページにアクセスした瞬間にポップアップを表示してはいけません。5～10秒の遅延を設けるか、スクロールトリガー（ページの50%をスクロールした後）を使用することで、訪問者がまずコンテンツと向き合う時間を確保できます。離脱意図トリガーは、訪問者がすでにページを離れようとしている時にのみ発動するため、効果的です。
• モバイルではフォームを簡潔に：ウェブトラフィックの半分以上はスマートフォンやタブレットから発生しています。ポップアップフォームの入力項目は最大2～3つに抑えましょう。多くの場合、名前とメールアドレスのみで十分です。追加情報は、フォローアップメールや専用のフォームページにある詳細なフォームを通じて、後からいつでも収集することができます。
• Cookieルールを使って表示頻度を制御する：どのページでも、訪問するたびに同じポップアップが表示されるほど、訪問者をすぐに離脱させてしまうものはありません。OptinMonsterもPopup Makerも、Cookieルールを設定できるため、ポップアップを「1セッションにつき1回」「1週間に1回」、あるいは「1回限り」に制限することができます。
• 目立つ閉じるボタンを設置する：訪問者がポップアップを閉じられるよう、常に明確な手段を用意してください。コントラストの強い「×」ボタンや「いいえ、結構です」といったリンクは、信頼感を醸成します。非表示の閉じるボタンで強制的に操作させようとすると、コンバージョン向上よりもブランドイメージを損なう結果となります。

WordPressのポップアップフォームに関するよくある質問

WordPressでのポップアップフォームの作成に関するよくある質問への回答を以下にまとめました。

WordPressのポップアップフォームを無料で作成できますか？

はい。このガイドで紹介する両方の方法は、無料ツールで実現できます。WPForms Liteは無料ですし、OptinMonsterでは3つのキャンペーンと500インプレッションが利用できる無料アカウントが提供されています。また、Popup Makerの無料版では、ポップアップの数に制限がなく、トラフィック制限もありません。一切費用をかけずに、完全に機能するポップアップフォームを作成することができます。

WordPressでボタンをクリックしたときにポップアップフォームを表示するにはどうすればよいですか？

Popup Makerでは、「クリックで開く」トリガー（無料版でも利用可能）を使用します。CSSクラス（例： popmake-123（ここで「123」はポップアップのIDです）を任意のボタンやリンクに追加すると、クリックした際にポップアップが開きます。OptinMonsterでは、これと同様の機能を「MonsterLinks」と呼び、クリックすると特定のキャンペーンを開く特別なリンクを作成できます。

Elementorでポップアップフォームを作成するにはどうすればよいですか？

Elementor Proには、ポップアップビルダーが標準で搭載されています。ポップアップテンプレートを作成し、任意のフォームウィジェット（WPFormsを含む）を追加して、表示条件やトリガーをElementorエディター内で直接設定することができます。Elementorの無料版をご利用の場合は、Popup Makerなどの別のポップアッププラグインを、お使いのフォームビルダーと組み合わせて使用する必要があります。

WordPress用のポップアッププラグインで一番のおすすめはどれですか？

ご要望や予算によって異なります。詳しい比較については、おすすめのWordPressポップアッププラグインガイドをご覧ください。OptinMonsterとPopup Makerは、最も人気のある2つのプラグインであり、まずはこれらから試してみることをお勧めします。

次は、フォームからのコンバージョンを向上させましょう

WordPressのポップアップフォームの作成方法がわかったところで、フォームのコンバージョン率を向上させる他の方法についても調べてみてはいかがでしょうか。実際に成果につながるフォームを作成するためのヒントを得るには、リードジェネレーションフォームの事例を紹介したガイドをご覧ください。

今すぐWordPressフォームを作成

フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。

この記事がお役に立ちましたら、Facebookや X（旧Twitter）で当サイトをフォローして、その他の無料のWordPressチュートリアルやガイドもぜひご覧ください。