Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでお問い合わせフォームのポップアップを追加する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressサイトにお問い合わせフォームのポップアップを表示する簡単な方法をお探しですか?

お問い合わせフォームは訪問者とのコミュニケーションに最適です。お問い合わせフォームをポップアップに設置することで、カスタマイザーがあなたの商品やサービスについて、より簡単にお問い合わせできるようになります。

この投稿では、WordPressでお問い合わせフォームのポップアップを追加する方法を紹介します。

How to add a contact form popup in WordPress

なぜお問い合わせフォームポップアップを使うのか?

WordPressのサイトや ブログには、ユーザーが質問やフィードバック、問題を問い合わせるためのお問い合わせフォームが必要です。

しかし、お問い合わせフォームが個別ページにしかなければ、見つけてもらうのは難しい。

その結果、ユーザーは問い合わせをする前にサイトを離れてしまい、潜在的なリードやコンバージョンを失う可能性があります。

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

表示中のページを閉じる必要がないため、サイトに滞在してもらうことができます。また、お問い合わせフォームのポップアップを使ってメールリストを増やすこともできます。

そのため、まずお問い合わせフォームを作成し、それをポップアップに設置してウェブページに表示する必要があります。WordPressでお問い合わせフォームを作成し、ポップアップに追加する方法をご案内しますのでご安心ください。

動画チュートリアル

Subscribe to WPBeginner

書面による指示を希望される方は、このまま読み進めてください。

WordPressお問い合わせフォームの作り方

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

無料・有料のオプションが多数ありますが、WPFormsが最も良い設定ですので、WPFormsを使用することをお勧めします。

WPFormsは初心者に優しいフォームプラグインで、ドラッグ&ドロップでWordPressにお問い合わせフォームを作成できます。また、プリビルドフォームテンプレートと多くのカスタマイズ設定を提供しています。

このチュートリアルでは、WPForms Lite版を使用します。WPFormsLite版は無料で、コンタクトフォームのテンプレートを提供しているからです。

しかし、あなたはより多くの機能をアンロックするために、そのプレミアムバージョンを使用することもできます。例えば、WPForms Proは1,800以上のフォームテンプレート、より多くのカスタマイザーオプション、強力なアドオンを提供し、あなたは追加のトランザクション手数料なしでオンライン決済を収集することができます。

まず始めに、WPForms Liteプラグインをインストールして有効化する必要があります。WordPressプラグインをインストールする方法については、ステップバイステップのガイドを参照してください。

プラグインを有効化したら、お問い合わせフォームを作成する準備ができました。WordPress ダッシュボードからWPForms ” 新規追加にアクセスするだけです。

Add a new form

その後、WPFormsはフォームの名前を入力し、テンプレートを選択するように要求します。

シンプルお問い合わせフォーム」テンプレートを選択します。

The WPForms Simple Contact template

次に、ドラッグ&ドロップビルダーを使ってフォームにフィールドを追加します。

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

A contact form template

WPFormsではお問い合わせフォームの各フィールドのカスタマイズも可能です。

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

Edit each field in the contact form

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

一般設定では、フォームの名前を変更したり、送信ボタンのテキストを変更したり、スパム対策を有効化したりすることができます。

Editing the WPForms settings

次に、通知設定オプションに進みます。初期設定では、通知はWordPressサイトに設定されている管理者メールに送信されます。

ただし、お問い合わせフォームの通知は、お好きなメールアドレスに送信することができます。複数のメールで通知を受け取りたい場合は、それぞれのメールをカンマで区切ってください。

メールの件名には、WPFormsは先に入力したフォーム名を使用します。ただし、件名のテキストは好きなように編集できます。

Edit notification settings

その後、確認オプションをクリックしてください。

WPForms は ‘Message’ を初期設定の確認タイプとして使用し、フォーム送信時に訪問者に感謝のメッセージを表示します。

Edit form confirmation settings

ただし、ユーザーがフォームに入力した際に、メッセージタイプを変更したり、サイトの特定のページにリダイレクトさせたりすることは可能です。

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

Embed your form

次に、「保存」ボタンの隣にある「埋め込み」オプションをクリックします。

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

Click the use a shortcode link

リンクをクリックするとすぐに WPForms がお問い合わせフォームのショートコードを表示します。次のステップでポップアップにお問い合わせフォームを追加する方法を紹介しますので、このタブ/ウィンドウを開いておくことをお勧めします。

WordPressサイトにお問い合わせフォームポップアップを追加する

お問い合わせフォームのポップアップを作成するには、WordPressのポップアッププラグインが必要です。

OptinMonsterはWordPressのための最高のリードジェネレータとコンバージョン最適化プラグインですので、OptinMonsterの使用をお勧めします。120万以上のサイトがこの強力なツールを使用しています。

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

まず、OptinMonsterのサイトにアクセスしてアカウントにサインアップする必要があります。サイトにアクセスし、「今すぐOptinMonsterを取得する」ボタンをクリックしてください。

OptinMonster

次に、あなたのサイトに無料のOptinMonsterプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法をご覧ください。

プラグインが有効化されると、セットアップウィザードが表示されます。既存のアカウントに接続する」ボタンをクリックしてください。

Connect your existing account

ポップアップウィンドウが表示され、OptinMonsterがあなたのアカウントに接続するように要求します。

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

Connect OptinMonster to WordPress

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

OptinMonster ” キャンペーンにアクセスし、「最初のキャンペーンを作成」ボタンをクリックすることから始めることができます。

Create first OptinMonster campaign

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

お問い合わせフォームのポップアップを作成するので、キャンペーンタイプとして「ポップアップ」を選択します。

Choose a campaign type and template

その後、下にスクロールしてポップアップのテンプレートを選択します。OptinMonsterは、あなたのポップアップのための75以上の魅力的で非常にコンバージョン率の高いデザインを提供しています。

お好きなテンプレートをお選びください。次に、キャンペーン名を入力し、「ビルド開始」ボタンをクリックします。

Enter a name for your campaign

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

左側のメニューに様々なブロックが表示されます。WPForms’ブロックに向かい、あなたのテンプレートにドラッグ&ドロップしてください。

Add the WPForms block in popup

その後、左メニューのブロック設定から「フォーム選択」ドロップダウンメニューをクリックし、「ショートコードを手動で追加」オプションを選択する必要があります。

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

Enter contact form shortcode

注意すべき重要な点は、ショートコードを追加してもテンプレートにお問い合わせフォームのプレビューが表示されないことです。

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

See contact form shortcode

次に、上部にある「表示ルール」タブで、ポップアップをサイトに表示するタイミングを選択できます。

初期設定では、OptinMonsterはページ上の時間が5秒になったときに設定し、ポップアップはどのページにも表示されます。

ただし、表示ルールの設定を変更したり、異なるトリガーやターゲティングオプションを選択することは可能です。

MonsterLink(クリック時)ターゲティングを使用することをお勧めします。こうすることで、訪問者がリンクやボタンをクリックしたときにポップアップが外観されます。

Select MonsterLink display rule

その後、「MonsterLinkコードをコピー」ボタンをクリックして、サイト上のテキスト、画像、ボタンに追加することができます。

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

Copy the MonsterLink code

MonsterLinkのコードは、HTMLでは次のようになります:

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

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

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

例えば、サイトにお問い合わせボタンを追加したいとします。まず、ページや投稿を編集し、WordPressエディターに移動します。次に、上部にある(+)プラス記号をクリックし、「ボタン」ブロックを追加します。

Add a button block

その後、ボタンのテキストを入力し、リンクアイコンをクリックします。

モンスターリンクのURLをボタンに追加します。

Enter the MonsterLink in the button

WordPressの投稿またはページを公開します。これで、お問い合わせボタンにモンスターリンクが追加されます。

次に、OptinMonsterキャンペーンに戻って設定を完了します。

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

Complete display rules setup

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

設定に満足したら、「次へ」ボタンをクリックしてください。

Setup additional display rule settings

その後、OptinMonsterは表示ルールの設定の概要を表示します。

これにより、キャンペーンがサイトにいつ外観されるかを正しく設定することができます。

View display rules summary

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

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

キャンペーンの外観に満足したら、「公開する状態」を下書きから公開に変更します。

Change the publish status

OptinMonsterキャンペーンビルダーを終了し、WordPressダッシュボードからもキャンペーンの状態を確認することができます。

右側の「状態」ドロップダウンメニューをクリックし、状態を「保留」から「公開する」に変更するだけです。

Change the campaign status

変更を保存するのを忘れないでください。

次に、先ほどMonsterLinkで作成したお問い合わせボタンにアクセスし、お問い合わせフォームのポップアップを実際に見てみましょう。

Contact form popup preview

この投稿がWordPressでお問い合わせフォームのポップアップを追加する方法を学ぶのにお役に立てば幸いです。また、最適なサイトビルダーの選び方や、中小企業に最適な給与計算ソフトの比較もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

28件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Isaac says

    This is nice, but can you explain/show how to do this without OptinMonster? I don’t want to have to buy a second plugin just to show a form in a popup. This should be do-able with WP Forms and a free lightbox plugin.

  3. Ruben says

    Before buying I want to ask, can I have two call-to-action buttons in a popup? I want two buttons one for downloading my app from App Store and second from Play Store.

  4. Jhorene says

    Hello,

    Before I buy Optinmonster, can you tell me if it is fully mobile responsive to have a form inside the canvas popup?

    Thank you.

    Regards,
    Jhorene

  5. Mike Whaling says

    Is there a way to do this in the new version of Optin Monster? This worked great when I was using the local WP plugin, but it doesn’t seem to recognize the Gravity shortcode now that I’ve switched over to the new OM.

    Any tips or suggestions?

  6. Silvan says

    could this work as well in a WordPress navigation? I’m having some trouble adding the data-optin-slug bit via the WP menu system.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。