訪問者が連絡を取りたいと思っても、方法がわからないのではないかと心配したことはありませんか？
WordPressの1つのページに隠されたお問い合わせフォームは、簡単に見落とされます。潜在的な顧客は、質問したり、フィードバックを共有したり、購入したりせずに離れてしまう可能性があります。これは、機会損失や、あまり親切ではないユーザーエクスペリエンスにつながる可能性があります。
良いニュースは、簡単な解決策があることです。訪問者が閲覧中に追従するフローティングお問い合わせフォームを追加することです。そうすれば、探すことなくいつでも連絡を取ることができます。
これは、邪魔にならずにエンゲージメントを高め、信頼を築く簡単な方法です。さらに良いことに、コーディングスキルは必要ありません。適切なプラグインを使用すれば、数回のクリックで設定できます。
このガイドでは、WordPressサイトにフローティングお問い合わせフォームを追加する3つの簡単な方法を説明します。
フローティングお問い合わせフォームとは何ですか？なぜそれを使用するのですか？
フローティングお問い合わせフォームは、訪問者がWordPressサイトを閲覧中に、画面上に（たとえば、下隅やサイドパネルに）表示されたままになります。通常、クリックまたはホバーすると展開される小さなボタンまたはアイコンとして表示されます。
WordPressサイトにフローティングお問い合わせフォームを設置するメリットをいくつかご紹介します。
- アクセシビリティ。フォームはフローティングして固定されるため、サイト訪問者はいつでもどのウェブページからでもアクセスできます。
- 最小限の干渉。 ユーザーエクスペリエンスを中断させる可能性のあるポップアップとは異なり、フローティングフォームは通常、目立ちながらも邪魔になりにくいです。
- 行動喚起。常に表示されるフローティングフォームは、ユーザーにエンゲージメントを促すリマインダーとなり、コンバージョン率の向上に役立ちます。
ウェブサイトの所有者は、フローティングお問い合わせフォームをカスタマーサポート、営業に関するお問い合わせ、フィードバック収集に使用できます。
訪問者が閲覧中にすぐにヘルプを得たり、ページを離れることなく質問したり、いつでも提案を共有できるようにすることで、よりスムーズで楽しいユーザーエクスペリエンスを作り出すことができます。
私たちの経験では、フローティングフォームを追加すると、訪問者は連絡先ページを探す必要がなくなるため、エンゲージメントが大幅に向上します。
幸いなことに、WordPressではさまざまな方法でフローティング連絡先フォームを簡単に追加できます。次のセクションでは、設定するための3つの簡単な方法を説明します。
さあ、始めましょう！
方法1：UserFeedbackを使用してWordPressでフローティングお問い合わせフォームを作成する
シンプルなカスタマイズオプションを備えた簡単なフローティングお問い合わせフォームを作成したい場合は、この方法が最適です。
UserFeedbackは、カスタマイズ可能なフィードバックフォーム、フローティングお問い合わせフォーム、ポップアップアンケートを作成できる最高のWordPressフィードバックプラグインです。ウェブサイトエクスペリエンスやeコマースストアのアンケートフォーム用の組み込みテンプレートや質問が含まれています。
UserFeedback を使用することで、実際のユーザーの入力に基づいてウェブサイトを改善し、顧客満足度を高め、問題を迅速に対処することができます。
🛑 開始する前に：ツールの名前はUserFeedbackですが、名前とメールアドレスをコードを書かずにフローティングウィジェットから直接取得できるため、お問い合わせフォームにも最適です。
デフォルトのスライドアウトデザインにより、複雑なポップアップ構成を必要とせずに連絡先フォームを追加するための、非常に軽量で邪魔にならない方法となっています。
WPBeginnerでは、実際にUserFeedbackを自社のウェブサイトで使用し、素晴らしい経験をしました。プラグインの詳細については、UserFeedbackの完全レビューをご覧ください。
まず、UserFeedbackプラグインをインストールして有効化しましょう。プラグインのインストール方法がわからない場合は、WordPressプラグインのインストール方法に関するガイドに従ってください。
📝 注：まずはUserFeedbackの無料版から始めて、どのように機能するかを確認してください。ただし、このチュートリアルではUserFeedback Proを使用します。これにより、より多くのテンプレート、追加の質問タイプ、ターゲティングオプション、その他のプレミアム機能にアクセスできます。
UserFeedback をウェブサイトに有効化したら、最初のアンケートフォームを作成できます。
WordPressダッシュボードから、UserFeedback » Surveys » Create Newに移動します。
これを行うと、「セットアップ」セクションが表示されます。
UserFeedback では、「最初から始める」オプションで空白のページから開始することも、既製のテンプレートを使用することもできます。このガイドでは、「ウェブサイトのフィードバック」テンプレートを使用します。
テンプレートを選択するには、それをクリックするだけです。
次に、コピーを編集しましょう。この例では、「ウェブサイトのフィードバック」というラベルを「フィードバックはありますか？」に変更します。
次に、「質問タイプ」ドロップダウンをクリックして、訪問者がこの質問にどのように回答できるかを選択します。この例では、「単一テキストフィールド」を選択します。
その後、質問を「名前」に変更できます。
次に、ユーザーのメールアドレス用の別の質問フィールドが必要になります。
少し下にスクロールして、「質問を追加」ボタンをクリックします。
それが完了したら、前のステップで行ったように質問タイプとタイトルを設定してください。
次のステップは、フォームの設定を構成することです。
「設定」タブでは、Google Analytics と MonsterInsights を使用して、フォームの表示回数と応答のトラッキングを有効にできます。
「Googleアナリティクス トラッキングを有効にする」をオンにするだけで、この機能を使用できます。
📝 注：Googleアナリティクスを使用したトラッキングについてさらに詳しく知りたい場合は、WordPressサイトでGoogleアナリティクスの目標を設定する方法に関するガイドをお読みください。
その後、タブを下にスクロールして、ターゲティングと動作を設定することをお勧めします。
「ターゲティング」セクションでは、デバイスタイプとアンケートフォームが表示されるウェブページを選択できます。
デバイスの種類のオプションには、デスクトップ、タブレット、モバイルが含まれます。これらのすべてのデバイスにフォームを表示したい場合は、3つすべてを選択できます。
次に、フローティングフォームを表示したいすべてのページを選択できます。訪問者がウェブサイトのどこからでもフォームにアクセスできるように、「すべてのページ」オプションを選択することをお勧めします。
完了したら、下にスクロールしてフォームの動作を設定しましょう。ここでは、以下を設定します。
- 表示タイミング。 フォームがページに表示されるタイミングを選択します。
- 表示期間。 フォームが訪問者に表示される頻度を定義します。
- アンケート実行時間。 指定されたページにフォームが表示される期間を指定します。
参考までに、当社の設定は次のとおりです。「表示タイミング：即時」、「表示期間：ユーザーフィードバックアンケートが完了するまで常に」、「アンケート実行時間：無期限」。
これで、次のステップに進む準備ができました。
「通知」タブで、フォーム送信通知を受け取るメールアドレスを入力します。
複数の受信者を追加できますが、それぞれを区切るにはカンマを使用する必要があります。例：john@example.com,jane@example.com。カンマの後にスペースを追加しないように注意してください。これにより、メール配信エラーが発生する場合があります。
最後に、最終決定する前に、もう一度フォームを確認する時間を取っておくと良いでしょう。
「公開」タブの上部には、「ウェブサイトフィードバックの概要」が表示されます。箇条書きを一つずつ確認して、フォームの設定が正しいかどうかを確認できます。
すべて問題がなければ、「公開」セクションまで下にスクロールできます。
そこでは、ステータスを「下書き」から「公開」に変更できます。
または、「後でスケジュール」オプションをオンにして日付と時刻を定義することで、公開をスケジュールすることもできます。
完了したら、「保存して公開」をクリックするだけでフォームが表示されます。
それで終わりです！
UserFeedback を使用して、WordPress ウェブサイトにフローティングお問い合わせフォームを正常に表示しました。
方法 2: WPForms と OptinMonster を使用して WordPress でフローティングお問い合わせフォームを作成する
フローティングお問い合わせフォームのデザインをより細かく制御したい場合は、この方法が最適です。WPForms でフォームを作成し、OptinMonster で WordPress サイトにフローティングさせます。
WPFormsは、シンプルなドラッグアンドドロップインターフェイスを備えた、WordPress向けの最高のお問い合わせフォームビルダーです。2,000以上のテンプレートとAI搭載ツールにより、数回のクリックでWordPressフォームを作成できます。
WPBeginnerでは、WPFormsを使用してユーザーの連絡先、フィードバック、移行リクエストを収集しています。このプラグインを気に入っている理由については、WPFormsの詳細レビューをご覧ください。
WPFormsでフォームを作成するには、まずウェブサイトにプラグインをインストールして有効化する必要があります。さらにヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをお読みください。
📝 注意: このチュートリアルでは、WPFormsの無料版を使用できます。より高度な機能が必要な場合は、WPForms Proで、テンプレートライブラリ全体、高度なフィールド、スマート条件付きロジックなどにアクセスできます。
有効化したら、WordPressダッシュボードから WPForms » 新規追加 に移動できます。
これにより、フォームビルダーのインターフェイスにリダイレクトされます。
そこでは、フォーム名を入力し、テンプレートを選択するだけです。この例では、連絡先フォームを作成し、「連絡先フォーム」と名付けましょう。
フォームに名前を付けたら、パネルを下にスクロールしてAIでフォームを作成するか、テンプレートを選択できます。
Proライセンスをお持ちの場合、WPForms AIはフォームを迅速に作成するのに役立ちます。必要なものを説明するだけで済みます。フィールドを手動で追加する代わりに、AIが数秒でそれを行います。
シンプルなユーザー登録フォーム、インタラクティブな求人応募フォーム、または詳細なアンケートが必要な場合でも、WPForms AIはプロセスを迅速化します。
ただし、このガイドでは、「シンプルな連絡先フォーム」テンプレートを使用します。
作成を開始するには、テンプレートボックスにカーソルを合わせて「テンプレートを使用」をクリックします。
これにより、フォームビルダーの「フィールド」パネルにリダイレクトされます。
ここから、連絡先フォームを確認し、事前作成されたコンテンツを調整することをお勧めします。すべてがすでに良好に見える場合は、そのまま「保存」ボタンをクリックできます。
詳細な手順については、お問い合わせフォームの作成方法に関するステップバイステップガイドをご覧ください。
フォームの作成が完了したら、フローティングフォームとして表示されるように設定を調整します。
これには、WordPress向けの最高のリード獲得プラグインであるOptinMonsterをインストールする必要があります。
このツールは、訪問者を購読者や有料顧客に転換するためのキャンペーンを作成および管理するのに役立ちます。OptinMonsterを使用してメールリストを作成する方法に関する詳細ガイドを確認できます。
WPBeginnerでは、OptinMonsterを使用してポップアップやヘッダーバナーを通じて特別オファーを宣伝しています。このソフトウェアの詳細については、OptinMonsterの全レビューをご覧ください。
📝 注意: このチュートリアルに従うために、OptinMonsterの無料版を使用できます。ただし、OptinMonster Proでは、テンプレートライブラリ全体や、離脱インテントポップアップなどの高度なターゲティング機能が利用可能になります。
有効化すると、WordPressダッシュボードから「OptinMonster」メニュー項目をクリックできます。
次にウェルカム画面が表示され、プラグインの利用を開始するために「既存のアカウントを接続」をクリックできます。
新しいウィンドウが開き、ここで「WordPressに接続」をクリックできます。
OptinMonsterは、プロセスを完了するためにアカウントの詳細を要求します。
確認が完了すると、最初のキャンペーンを作成する準備が整います。
開始するには、WordPress管理エリアから OptinMonster » Campaigns に移動するだけです。
「Campaigns」に入ったら、フローティングフォームを作成および設定する準備ができています。
開始するには、「最初のキャンペーンを作成」ボタンをクリックするだけです。
次に、キャンペーンタイプを選択します。
OptinMonsterには、フローティングバーを含むさまざまなキャンペーンタイプがあります。
完璧なキャンペーンタイプのように聞こえるかもしれませんが、フローティングバーには、複数のフォームフィールドを快適に表示するための十分な垂直スペースがありません。そのため、セールプロモーションの告知やクーポンコードの共有など、他のケースに使用したいと思うでしょう。
フローティングバーの使用方法について詳しく知りたい場合は、WordPressでスティッキーなフローティングフッターバーを作成する方法に関するガイドを確認することをお勧めします。
デザインをきれいに保つために、WPFormsコンタクトフォームを追加するためのキャンペーンタイプとして「スライドイン」を選択できます。
フローティングスライドインは、ユーザーの画面の右下隅に表示されます。これにより、訪問者はリダイレクトされることなくWPFormsのお問い合わせフォームを直接ページ上で入力でき、スムーズなユーザーエクスペリエンスが生まれます。
キャンペーンタイプをクリックするだけで使用できます。
次に、パネルを下にスクロールしてテンプレートを選択しましょう。
テンプレートを使用するには、テンプレートブロックにカーソルを合わせて「テンプレートを使用」をクリックするだけです。ここでは、「ニュースレター登録（ライト）」を選択します。
キャンペーンタイプとテンプレートを選択すると、ポップアップウィンドウが表示されます。
キャンペーンに名前を付けるだけです。この例では、キャンペーン名を「フローティングお問い合わせフォーム」とします。
名前を決めたら、「ビルドを開始」をクリックできます。
OptinMonster はキャンペーンビルダーにリダイレクトします。
キャンペーン構築インターフェースには 2 つのセクションがあります。左側にはキャンペーンに追加できるすべての機能が含まれ、右側はライブプレビューです。
詳細については、WordPressでスライドアウトのお問い合わせフォームを追加する方法に関するチュートリアルをご覧ください。
WPForms お問い合わせフォームを追加するには、左側のパネルを下にスクロールして WPForms ブロックを見つけます。
見つけたら、WPForms ブロックを右側のパネルのライブプレビューにドラッグアンドドロップするだけです。
次に、「フォームの選択」ドロップダウンが表示されます。それをクリックして「お問い合わせフォーム」を選択できます。ライブプレビューのブロックにフォームのショートコードが読み込まれます。
🧑💻 専門家のアドバイス: キャンペーンビルダーでショートコードが表示されても、実際のフォームが表示されない場合は心配しないでください。これは正常な動作であり、WordPressは公開時にこのコードを最終的なお問い合わせフォームに自動的に変換します。
その後、「表示ルール」タブに移動することをお勧めします。このタブでは、フローティングお問い合わせフォームの表示タイミングとページを設定できます。
フォームが最初から浮いて固定されるようにするには、最初の 2 つのドロップダウンを「ページ上の時間」と「即時」に設定することをお勧めします。
次に、フォームをすべてのページに表示するには、以下のドロップダウンを「現在のURLパス」および「任意のページ」に設定できます。
完了したら、「公開」タブに移動できます。
このタブでは、まずキャンペーンの公開ステータスを「公開」または「スケジュール」に変更する必要があります。
次のステップは、「ライブサイトインスペクター」機能を使用して、キャンペーンがウェブページでどのように表示されるかをテストすることです。これを行うには、サイトのURLをテキストボックスに入力して「テスト」をクリックするだけです。
これにより、新しいタブにリダイレクトされます。
すべてが希望どおりに見える場合は、OptinMonsterキャンペーンビルダーに戻ってキャンペーンを保存できます。
これで完了です！WPFormsとOptinMonsterを使用して、フローティング連絡フォームを正常に作成しました。
方法3：無料プラグインを使用してWordPressでフローティング連絡先ボタンを作成する
この方法では、お問い合わせフォームページにリダイレクトされるフローティングアイコンを表示できます。前の方法のようにポップアップでお問い合わせフォームのフィールドを表示するわけではありませんが、ユーザーを直接お問い合わせページに誘導する、非常に目立つ無料の代替手段となります。
いくつかの無料プラグインを使用すると、WordPressサイトにフローティング連絡アイコンを追加できます。人気のあるオプションには、Simple Floating MenuやFloat Menuがあります。これらのプラグインは通常、設定にURLを埋め込む必要があります。
このチュートリアルでは、Simple Floating Menuを使用してこれを行う方法を説明します。プラグインのインストールにヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをお読みください。
この方法を使用するには、まずサイトに標準のお問い合わせページが必要です。まだ作成していない場合は、先に進む前にWordPressでお問い合わせフォームを作成する方法に関するガイドを確認してください。
ページが準備できたら、Simple Floating Menuプラグインの設定エリアにアクセスする前に、問い合わせフォームを表示しているページのURLをコピーしましょう。
これを行うには、該当するページに移動し、URLバーからURLをコピーします。
次に、WordPressダッシュボードからSimple Floating Menuを開くことができます。
プラグインの設定エリアに入ったら、フローティングフォームアイコンを有効にしたいはずです。これは、「フローティングメニューを有効にする」スライダーをオンにすることで行えます。すると、グレーから緑に、またはオフからオンに変わります。
次に、「ボタンURL」フィールドを見つけて、URLを貼り付けます。
ボタンURLを入力すると、設定が正常に保存された場合の通知が表示されるはずです。
これで、フローティングアイコンがWordPressウェブサイトで公開されます。ただし、ボタンの位置と外観をさらにカスタマイズできます。
「ボタンURL」フィールドの上で、デフォルトのアイコンをより関連性の高いものに変更できます。このプラグインには数十個のアイコンオプションが用意されているため、行き詰まった場合はフィルター機能を使用することをお勧めします。
「ツールチップテキスト」は、サイト訪問者がフローティングアイコンにカーソルを合わせたときに表示されます。アイコンがどこに移動するかを訪問者に伝えるために、このフィールドに入力することをお勧めします。
次に、アイコンをクリックした後に訪問者を新しいページにリダイレクトしたい場合は、「新しいタブで開く」フィールドのチェックボックスをオンにするだけです。
画面を下にスクロールすることで、フローティングアイコンの色を編集できます。背景、アイコン、ホバーエフェクトの色は、ブランドやウェブサイトの個性に合う限り、自由にクリエイティブにしてください。
完了したら、「設定を保存」をクリックします。
次に、さらにカスタマイズ機能については、「設定」タブに移動できます。
このタブでは、フォームをサイトのどこに表示したいかを選択できます。たとえば、左上、中央右、または右下などです。
ボタンの向きの設定もあります。縦向きまたは横向きを選択できます。
ボタンのスタイルを変更したい場合もあります。デフォルトの形状は長方形ですが、丸形、三角形、さらには星形を選択することもできます。
パネルでさらにカスタマイズ設定を見つけることができます。フローティングアイコンのサイズ、影のスタイル、タイポグラフィなどを自由に調整して、よりユニークにしてください。
完了したら、進捗を失わないように保存するだけです。
これで、フローティングアイコンがウェブサイトでどのように表示されるかを確認できます。
参考までに、フローティングアイコンは次のようになります。
代替方法：ウェブサイトでチャットボットを使用する
フローティング問い合わせフォームは、訪問者があなたに連絡できるようにするための優れた方法ですが、通常は非同期です。つまり、訪問者はメッセージを残し、メールでの返信を待ちます。
ユーザーに即時、リアルタイムで応答を提供したい場合は、代わりにチャットボットをインストールすることを検討する価値があるかもしれません。
チャットボットはAI搭載であるか、サポートチームが直接対応することができます。
たとえば、ChatBotのようなツールは、ウェブサイトやヘルプセンターから情報を取得し、訪問者にAI駆動の応答を即座に提供できます。これにより、日常的な質問の最大80％を即座に処理し、エンゲージメントを高めることができます。
設定方法の詳細については、WordPressにチャットボットを追加する方法のチュートリアルをご覧ください。ソフトウェアの詳細については、ChatBotの全レビューをご覧ください。
WordPressのフローティングお問い合わせフォームに関するFAQ
ここでは、フローティングコンタクトフォームの設定とカスタマイズに関する最も一般的な質問への回答をご紹介します。
フローティングコンタクトフォームを作成するのに最適なプラグインは何ですか？
シンプルでオールインワンのソリューションをお探しなら、UserFeedbackが最適です。セットアップとカスタマイズが簡単になるように設計されており、コーディングなしでシンプルなフローティングフォームに最適です。
フォームの外観と動作をより細かく制御するには、WPFormsとOptinMonsterを組み合わせることを検討してください。
WPFormsは、2,000以上のテンプレートと多くのAIツールを備えた、ユーザーフレンドリーなドラッグアンドドロップビルダーを提供します。OptinMonsterは、高度なターゲティングオプションとデザインの柔軟性を追加し、フォームを表示したいときに正確に表示できるようにします。
フローティングコンタクトフォームのデザインをカスタマイズできますか？
もちろんです。3つの方法すべてでカスタマイズが可能です。サイトのブランディングに合わせて、色、テキスト、配置をカスタマイズできます。
OptinMonsterは、高度なデザインオプションとターゲティングルールを提供し、カスタマイズをさらに一歩進めます。これにより、フローティングフォームキャンペーンのあらゆる詳細を特定のニーズに合わせて微調整できます。
フローティングお問い合わせフォームは私のウェブサイトを遅くしますか？
いいえ、全く問題ありません。このガイドで紹介されているプラグインは、適切にコーディングされており、パフォーマンスが最適化されています。非同期でロードされるため、ページのメインコンテンツのロードをブロックしません。これにより、サイトでの高速でスムーズなユーザーエクスペリエンスを維持できます。
WordPressフォームに関する追加リソース
このガイドがお役に立ち、サイトにフローティングお問い合わせフォームを追加できたことを願っています。設定が完了したら、フォームをさらに活用するための、これらの他の役立つ記事もチェックすることをお勧めします。
- WordPress にフォームを埋め込む方法
- WordPressフォームのカスタマイズとスタイリング方法
- WordPressでよりインタラクティブなフォームを作成する方法
- WordPressフォーム使用の究極ガイド
- おすすめのオンラインフォームビルダー（専門家による選定）
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
モイヌディン・ワヒード
クライアントの一人からフローティングコンタクトフォームの作成を依頼されましたが、当時は作成できませんでした。
解決策を探しましたが、無駄でした。
このチュートリアルガイドのおかげで、簡単にフローティングコンタクトフォームを作成できます。
ユーザーはこのタイプのフォームを好みます。なぜなら、ユーザーエクスペリエンスへの妨げが最小限またはまったくないからです。
ホバーするかクリックするだけでフォームが展開し、簡単に詳細を入力できます。
すでにwpformsとoptin monsterを使用しているので、この組み合わせは素晴らしい効果を発揮するでしょう。
イジー・ヴァネック
ウェブサイトの所有者にとって、連絡先情報を適切かつ明確に見える場所に配置することは非常に重要です。ユーザーがすぐに連絡先情報を見ることができれば、問い合わせフォームを利用する可能性が高くなります。WP FormsとOptinMonsterを一緒に使用できる可能性に非常に興味がありました。両方のプラグインを持っているので、私にとってこれを達成する最良の方法です。フォームとフローティングウィンドウの両方を作成しましたが、うまくいっています。CSSを使用してフォームの外観をカスタマイズする方法はまだわかりませんが、WP Formsのウェブサイトで見つけられると確信しています。ガイドをありがとう。