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

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

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

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

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

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

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

お問い合わせフォームのポップアップにより、訪問者はブラウジングを中断したり、お問い合わせページを探したりすることなく、簡単にあなたに連絡できるようになります。

これは、WordPressサイトには、ユーザーが質問、フィードバック、またはサポートリクエストを送信するための簡単な方法が必要だからです。しかし、お問い合わせフォームが1つのページにしか存在しない場合、多くの訪問者が見つけられない可能性があります。そして、これはしばしばリードの損失につながります。

お問い合わせフォームのポップアップは、訪問者がサイト上のどのページからでもワンクリックでお問い合わせフォームを開けるようにすることで、この問題を解決します。現在表示しているページを離れることなく、すぐに連絡できます。

また、訪問者を他のサイトに誘導するのではなく、あなたのウェブサイトに留めておくのに役立ちます。さらに、これらのポップアップを使用してメールアドレスを収集し、メールリストを成長させることもできます。

このガイドでは、WordPressでお問い合わせフォームを作成し、ポップアップに追加する方法を説明します。

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

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

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

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

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

無料および有料のオプションが多数ありますが、WPFormsは市場で最高のWordPressフォームビルダーであるため、WPFormsの使用をお勧めします。AIツール、ドラッグ＆ドロップビルダー、および事前作成済みのフォームテンプレートのおかげで、最も初心者フレンドリーでもあります。

WPBeginnerでは、ウェブサイトで連絡フォーム、年次ユーザー調査、サイト移行フォームを表示するために、実際にそれを使用しています。

プラグインに関する当社の経験の詳細については、WPFormsの完全なレビューをご覧ください。

開始するには、WPFormsのウェブサイトにアクセスし、「Get WPForms Now」ボタンをクリックします。次に、手順に従ってアカウントを作成し、購入を完了してください。

チェックアウト後、WPFormsアカウントダッシュボードに移動し、そこでプラグインのライセンスキーを見つけることができます。

ここから、WordPressダッシュボードからWPForms » Add Newに移動します。

次の画面で、検索バーを使用して WPForms プラグインをすばやく見つけます。

検索結果に表示されたら、「Install Now」をクリックし、次に「Activate」をクリックします。

ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

WPForms Pro を購入した場合、ライセンスキーを有効にする必要があります。WPForms » 設定 に移動し、該当するフィールドにキーを入力して、「キーの検証」をクリックしてください。

ここから、お問い合わせフォームを作成する準備が整いました。

WordPress のダッシュボードから WPForms » 新規追加 に移動してください。

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

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

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

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

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

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

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

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

ステップバイステップの説明については、お問い合わせフォームの作成方法に関するガイドをご覧ください。

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

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

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

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

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

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

WPFormsでは、デフォルトの確認タイプとして「メッセージ」を使用します。これは、フォームが送信された直後に感謝のメッセージを表示します。それ以外に、「ページの表示」と「URLへの移動（リダイレクト）」オプションがあります。

ただし、ポップアップの場合は、この「メッセージ」設定を維持することをお勧めします。ポップアップを操作しているときにユーザーを別のページにリダイレクトすると、時々唐突に感じられることがあります。

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

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

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

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

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

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

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

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

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

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

サインアップ後、OptinMonsterのアカウントダッシュボードにアクセスします。後ほどWordPressにアカウントを接続するため、このタブを開いたままにしておいてください。

次に、ウェブサイトに無料のOptinMonsterプラグインをインストールして有効化する必要があります。このプラグインは、ウェブサイトとOptinMonsterアカウント間のコネクタとして機能します。

WordPressダッシュボードで、プラグイン » プラグインを追加に移動します。

次の画面で、検索バーを使用して「OptinMonster」を検索します。

次に、「今すぐインストール」と「有効化」をクリックして、正しく有効化します。

詳細については、WordPressプラグインのインストール方法に関するガイドに従ってください。

プラグインが有効になると、セットアップウィザードが表示されます。

「既存のアカウントを接続する」ボタンをクリックしてください。

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

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

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

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

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

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

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

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

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

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

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

その後、左側のブロック設定で「フォームの選択」ドロップダウンメニューをクリックします。

リストから、以前に作成したコンタクトフォームを選択するだけです。フォームがリストに表示されない場合は、「ショートコードを手動で追加」を選択し、ステップ1でコピーしたショートコードを貼り付けることができます。

WPFormsコンタクトフォームのショートコードをブロックに入力してください。ショートコードを紛失した場合は、WPFormsの埋め込み設定ページに戻ってショートコードをコピーできます。

ショートコードを追加しても、テンプレートにコンタクトフォームのプレビューが表示されないことに注意することが重要です。これは正常であり、キャンペーンが公開されるとコンタクトフォームが表示されます。

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

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

特定のリンクまたはボタンをクリックしたときにのみポップアップが表示される、MonsterLink (クリック時) のターゲティングの使用をお勧めします。これにより、訪問者は自分で操作でき、自動的に開くポップアップよりもはるかに邪魔になりません。

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

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

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

<a href="https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/" target="_blank" rel="noopener noreferrer">Subscribe Now!</a>

完全なHTMLコードは必要ありません。URLのみが必要です。したがって、https://で始まるリンクテキストをコピーできます。

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

https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/

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

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

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

次に、MonsterLinkのURLを追加します。ボタンブロックをクリックして選択し、ツールバーのリンクアイコンをクリックします。以前にコピーしたURLを貼り付けて、「Enter」を押すだけです。

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

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

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

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

さまざまなアニメーションやサウンド設定を自由に試してみてください。完了したら、「次のステップ」ボタンをクリックします。

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

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

これで、キャンペーンを公開し、お問い合わせフォームのポップアップを公開する準備が整いました。

これを行うには、上部にある「公開」タブに移動します。次に、「プレビュー」ボタンをクリックして、公開前にポップアップがどのように表示されるかを確認してください。

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

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

OptinMonster » キャンペーンに移動し、「ステータス」ドロップダウンメニューをクリックします。次に、「保留中」から「公開」に変更できます。

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

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

これで完了です！

WordPressで連絡先フォームのポップアップを正常に作成しました。さらに良いことに、連絡先フォームにアクセスしやすく、邪魔にならない方法で作成しました。

ポップアップ登録を増やすためのボーナスのヒント

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

登録を最大化するには、邪魔なポップアップではなく、役立つ関連性の高いポップアップを作成することに重点を置くべきです。

これらの戦略を組み合わせることで、押し付けがましく感じさせることなく、注目を集め、オーディエンスとつながり、行動を促すポップアップを作成できます。

詳細と例については、サインアップを250%増やすためのポップアップ心理学の活用方法に関するガイドをご覧ください。

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

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

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

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

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

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

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

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

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

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

動画チュートリアル

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

WordPress フォームガイドを見る

この記事が、WordPressで問い合わせフォームのポップアップを追加する方法を学ぶのに役立ったことを願っています。

次に、以下のガイドも確認することをお勧めします。

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

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