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