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でお問い合わせフォームをフローティング表示する方法(3つの方法)

多くのサイトオーナーは、サイトデザインをごちゃごちゃさせることなく、連絡先オプションへの簡単なアクセスを提供することに難しさを感じています。フローティングお問い合わせフォームは、ユーザーがサイトのどこにいても簡単に連絡を取ることができるソリューションを提供します。

私たちは、ユーザーからのフィードバックを収集し、訪問者が簡単に私たちに連絡できるようにするために、自社のサイトでこの戦略を使用してきました。幸運なことに、WordPressプラグインはあなたのサイトでも同じことができます。

この投稿では、WordPressでコンタクトフォームをフローティング表示する方法を紹介します。

Show a floating contact form in WordPress in post image

フローティングお問い合わせフォームとは?

フローティングお問い合わせフォームは、訪問者がサイト内を閲覧している間、画面の下隅やサイドパネルなどに表示されます。通常、小さなボタンまたはアイコンの外観で表示され、クリックまたはマウスオーバーすると完全なフォームに展開されます。

フローティングお問い合わせフォームを使用する利点は以下の通りです:

  • アクセシビリティ。 フォームがフロートして固定されるため、サイト訪問者はどのページからでもフォームにアクセスできます。
  • 最小限の干渉。 ユーザーエクスペリエンスを妨げる可能性のあるポップアップとは異なり、フローティングフォームは通常、目立ちながらも邪魔になりません。
  • 行動喚起。フローティングフォームが定数表示されることで、ユーザーに行動を促すことができ、コンバージョンの増加につながります。

サイトオーナーとして、カスタマーサポート、販売に関するお問い合わせ、フィードバックの収集のためにフローティングコンタクトフォームを使用することができます。

フローティングお問い合わせフォームは、サイト訪問者がサイトを閲覧しながら即座にヘルプを得たり、ページを離れることなく質問をしたり、いつでも提案を共有したりできるようにすることで、サイトのユーザーエクスペリエンスを向上させることができます。

WordPressでは、さまざまな方法でフローティングお問い合わせフォームを表示することができます。

以下のセクションでは、WordPressサイトにフローティングお問い合わせフォームを表示する3つの簡単な方法をご紹介します。以下のクイックリンクから使いたい方法を選んでください:

始めよう!

方法1:UserFeedbackを使ってWordPressにフローティングお問い合わせフォームを作る

シンプルなフローティングコンタクトフォームを簡単なカスタマイズ設定で作成したい場合、この方法が適しています。

UserFeedbackはカスタマイズ可能なフィードバックフォーム、フローティングお問い合わせフォーム、ポップアップアンケートを作成できるWordPressプラグインです。このプラグインには、サイト体験やeコマースストアのアンケートフォームなどのテンプレートや質問がビルトインされています。

さらに詳しくUserFeedbackのレビューをご覧ください。

UserFeedbackを利用することで、実際のユーザーからの意見に基づいてサイトを改善し、顧客満足度を高め、問題があれば迅速に対処することができます。

userfeedback-homepage

まず、UserFeedbackプラグインをインストールし、有効化する必要があります。プラグインのインストール方法がわからない場合は、WordPressプラグインのインストール方法をご覧ください。

あなたのサイトで UserFeedback を有効化したら、最初のアンケートフォームを作成することができます。WordPress ダッシュボードからUserFeedback ” アンケート ” 新規作成 に移動します。

UserFeedback's Add New button

そうすると、「セットアップ」セクションにたどり着く。

UserFeedbackでは、’Start from Scratch’オプションで白紙のページから始めることも、あらかじめ用意されたテンプレートを使うこともできます。このガイドでは、「サイトフィードバック」テンプレートを使用します。

テンプレートを選ぶには、そのテンプレートをクリックするだけです。

UserFeedback's Website Feedback template

注意事項 UserFeedbackの無料版もご利用いただけますが、プレミアム版にアップグレードすることで、より多くのテンプレートのアンロック、より多くの質問タイプへのアクセス、ターゲティングや行動設定の有効化などを行うことができます。このチュートリアルでは、UserFeedback Proを使用します。

次にコピーを編集しましょう。この例では、「サイトへのご意見」のラベルを「ご意見はありますか」に変更します。

次に、「質問タイプ」ドロップダウンメニューをクリックして、訪問者がこの質問に回答する方法を選択します。この例では、「個別テキストフィールド」を選択します。

その後、質問を「名前」に変更することができる。

Configuring UserFeedback's questions

次に、ユーザーのメール・アドレスのための別の質問フィールドが必要です。

少し下にスクロールして、「質問を追加」ボタンをクリックしてください。そうしたら、前のステップで行ったように、質問のタイプとタイトルを設定します。

The new question on UserFeedback's contact form

次のステップはフォームの設定です。

設定」タブでは、Google アナリティクスと MonsterInsights を使用して、フォームの表示とレスポンシブのトラッキングを有効化することができます。Google アナリティクス トラッキングを有効化] に切り替えるだけで、この機能を使用することができます。

Enable Google Analytics tracking on UserFeedback

Google アナリティクスを使ったトラッキングについてさらに詳しく知りたい方は、WordPressサイトにGoogle アナリティクスの目標を設定する方法をご覧ください。

その後、タブを下にスクロールして、ターゲティングと動作を設定するとよい。

ターゲティング」では、端末の種類とアンケートフォームを表示するウェブページを選択することができます。

端末タイプのオプションには、デスクトップ、タブレット、モバイルがあります。これらすべての端末でフォームを表示させたい場合は、3つすべてを選択することができます。

次に、フローティングフォームを表示したいページをすべて選択することができます。訪問者がサイト上のどこからでもフォームにアクセスできるように、’すべてのページ’ オプションを設定することをお勧めします。

The Targeting section in UserFeedback's Settings tab

完了したら、下にスクロールしてフォームの動作を設定しましょう。ここでは

  • 表示タイミング。ページにフォームを表示するタイミングを選択します。
  • 表示期間。訪問者にフォームを表示する頻度を設定します。
  • アンケートの実行時間。指定したページにフォームが表示される時間を指定します。
The Behavior settings for a UserFeedback form

さて、次のステップに進む準備は整った。

通知」タブでは、フォーム送信通知を受け取るメールアドレスを入力します。複数の受信者を追加することもできますが、その場合は必ずカンマで区切る必要があります。

The email recipient field in UserFeedback's Notifications tab

最後に、フォームを完成させる前に、最後にもう一度フォームをチェックする時間を取るとよいでしょう。

公開する」タブの上部に「サイトのフィードバックの要約」が表示されます。フォームの設定が正しいかどうかを確認するために、箇条書きのポイントを一つずつ見ていくことができます。

UserFeedback's form summary

問題がなければ、「公開する」セクションまでスクロールダウンしてください。

そこで、状態を’下書き’から’公開する’に変更することができます。また、’Schedule for Later’オプションをオンにして、日時を設定することで、ローンチをスケジュールすることもできます。

The Draft and Publish button on UserFeedback

完了したら、「保存して公開する」をクリックするだけで、フォームが表示されます。

これで完了です!これで、UserFeedback を使って WordPress サイトにフローティングお問い合わせフォームを表示することができました。

UserFeedback's floating contact form on a live website

方法2: WPFormsとOptinMonsterを使用してWordPressでフローティングお問い合わせフォームを作成する

フローティングコンタクトフォームのデザインをもっとコントロールしたいのであれば、この方法をお勧めします。WPFormsを使ってフォームを作成し、OptinMonsterを使ってWordPressサイトにフローティングさせます。

WPFormsはWordPressのフォームをドラッグ&ドロップで簡単に作成できるプラグインです。1,800以上のテンプレートが利用可能で、数クリックでフォームを素早くセットアップできます。さらに詳しく知りたい方は、WPFormsのレビューをご覧ください。

WPForms website

WPFormsでフォームを作成するには、まずサイトにプラグインをインストールして有効化します。さらにヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドをお読みください。

有効化した後、WordPressダッシュボードからWPForms ” 新規追加に 移動することができます。

The Add New button under WPForms in the WordPress admin area

これでフォームビルダーのインターフェースにリダイレクトされます。

そこで必要なことは、フォーム名を入力し、テンプレートを選択することだけです。この例では、お問い合わせフォームを作成し、名前を ‘お問い合わせフォーム’ とします。

The Contact Form copy in the Name Your Form field in WPForms' Setup panel

フォームに名前を付けたら、パネルをスクロールしてテンプレートを選択します。

この例では、’シンプルなお問い合わせフォーム’ オプションを使用します。作り始めるには、マウスオーバーして ‘テンプレートを使う’ をクリックするだけです。

The Use Template button for Simple Contact Form in WPForm's Setup panel

これでフォームビルダーの「フィールド」パネルにリダイレクトされます。

ここから、お問い合わせフォームを確認し、あらかじめ用意されているコンテンツを調整します。すでに問題がないようであれば、’保存’ボタンをクリックしてください。

The Save button on WPForms' form builder interface

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

フォームの作成が終わったら、フローティングフォームとして表示されるように設定を調整しましょう。

そのためには、OptinMonsterをインストールし、WordPressサイトをプラグインに接続する必要があります。

OptinMonsterは強力なリードジェネレータとポップアッププラグインです。訪問者を購読者や有料顧客に変換するためのキャンペーンを作成し、管理することができます。

OptinMonsterでメールリストを作成する方法については、詳しいガイドをご覧ください。

OptinMonster's homepage

有効化した後、WordPressダッシュボードから「OptinMonster」メニュー項目をクリックします。

ウェルカム画面が表示されますので、「既存のアカウントに接続」をクリックしてプラグインを開始します。

Connect your existing account

新しいウィンドウが開きますので、ここで「WordPressに接続」をクリックします。

OptinMonsterは、プロセスを完了させるためにあなたのアカウント詳細をお尋ねします。

Connect OptinMonster to WordPress

認証されると、最初のキャンペーンを作成するためのすべての設定が完了します。

始めるには、WordPressダッシュボードからOptinMonster ” キャンペーンに移動するだけです。

OptinMonster's Campaigns menu item

キャンペーン」に到達したら、フローティングフォームを作成・設定する準備が整いました。

キャンペーンを始めるには、「最初のキャンペーンを作成する」ボタンをクリックしてください。

OptinMonster's Create Your First Campaign button

キャンペーンの種類を選択します。

OptinMonsterには、フローティングバーを含む様々なキャンペーンタイプがあります。完璧なキャンペーンタイプのように聞こえるかもしれませんが、フローティングバーはスペースが限られています。そのため、セールスプロモーションの告知やクーポンコードの共有など、他のケースで使用したいものです。

フローティングバーの使い方についてさらに詳しく知りたい方は、WordPressでフローティングフッターバーを作成するガイドをチェックすることをお勧めします。

デザインをすっきりさせるために、WPFormsのお問い合わせフォームを追加するキャンペーンタイプを’スライドイン’にすることができます。

フローティング・スライドインは、ユーザーの画面の右下に表示されます。そのため、コンテンツが読みやすく、ウェブデザインが整理され、ユーザー体験が素晴らしいものに保たれます。

キャンペーンタイプをクリックするだけで利用できます。

OptinMonster's slide-in campaign type

次に、パネルを下にスクロールしてテンプレートを選択しよう。

テンプレートを使用するには、テンプレートブロックにマウスオーバーして「テンプレートを使用」をクリックするだけです。ここでは「ニュースレター購読者(ライト)」を選択しています。

Subscribe to Newsletter template with Use Template highlighted

キャンペーンタイプとテンプレートを選択すると、ポップアップウィンドウが外観表示されます。

キャンペーンに名前をつけます。この例ではキャンペーン名を’Floating Contact Form’とします。

名前を決めたら、「ビルド開始」をクリックします。

The pop-up window to name your OptinMonster campaign

OptinMonsterはキャンペーンビルダーにリダイレクトします。

キャンペーン構築インターフェースには2つのセクションがあります。左側はキャンペーンに追加できるすべての機能をコンテナし、右側はライブプレビューです。

詳しくは、WordPressでお問い合わせフォームをスライドアウトさせる方法のチュートリアルをご覧ください。

WPFormsのお問い合わせフォームを追加するには、左のパネルをスクロールしてWPFormsブロックを見つけます。

WPForms' block for OptinMonster's Slide in campaign type

見つけたら、WPFormsブロックを右パネルのライブプレビューにドラッグ&ドロップするだけです。

すると、「フォーム選択」のドロップダウンが表示されます。それをクリックして ‘お問い合わせフォーム’ を選択します。ライブプレビューのブロックはフォームのショートコードを読み込みます。

WPForms' dropdown on OptinMonster

エキスパートヒント キャンペーンビルダーでフォームをプレビューできなくても心配はいりません。キャンペーンを公開するとフォームが表示されます。

その後、’表示ルール’タブに移動します。このタブではフローティングお問い合わせフォームの表示タイミングやページを設定することができます。

フォームが最初の1秒から浮いて固定されるようにするには、最初の2つのドロップダウンを「ページ上の時間」と「即時性」に設定することをお勧めします。

そして、すべてのページにフォームを表示するには、次のドロップダウンを「現在のURLパス」と「任意のページ」に設定します。

Design rules configurations for showing a floating form

完了したら、「公開する」タブに向かいます。

このタブでは、まずキャンペーンの公開状態を「公開する」または「スケジュール」に変更します。

次のステップでは、「ライブ・サイト・インスペクター」機能を使って、キャンペーンがウェブページ上でどのように見えるかをテストします。サイトのURLをテキストボックスに入力し、「テスト」をクリックします。

OptinMonster's Publish tab

新しいタブに移動します。

すべてが思い通りに表示されたら、OptinMonsterキャンペーンビルダーに戻ってキャンペーンを保存することができます。

これで完成です!これでWPFormsとOptinMonsterを使ったフローティングお問い合わせフォームの作成は完了です。

WPForms and OptinMonster's floating form on a live website

方法3:無料のフローティングフォームプラグインを使ってWordPressでフローティングお問い合わせフォームを作る

最後の方法は、お問い合わせフォームページにリダイレクトするフローティングアイコンを表示する方法です。この方法は少し異なりますが、効果的です。

いくつかの無料プラグインを使用すると、WordPressサイトにフローティングコンタクトアイコンを追加することができます。人気のオプションには、Simple Floating MenuやFloat Menuなどがあります。これらのプラグインは通常、設定にURLを埋め込む必要があります。

このチュートリアルでは、Simple Floating Menuを使った方法を紹介します。プラグインのインストールにお困りの場合は、WordPressプラグインのインストール方法をご覧ください。

Simple Floating Menuプラグインの設定エリアにアクセスする前に、お問い合わせフォームを表示するページのURLをコピーしておきましょう。

これを行うには、問題のページに移動し、URLバーからURLをコピーする。

A contact page's URL on a live website

これで、WordPressダッシュボードからSimple Floating Menuを開くことができます。

プラグインの設定エリアに入ったら、フローティングフォームアイコンを有効化します。フローティングメニューの有効化’スライダーをオンにしてください。グレーから緑、またはオフからオンに変わります。

次に、「Button URL」フィールドを見つけてURLを貼り付けます。

ボタンのURLを入力したら、設定が正常に保存されたかどうかの通知が表示されるはずです。

The Simple Floating Menu plugin's settings area with the Enable Floating Menu slider

これで、あなたのWordPressサイトにフローティングアイコンが表示されるはずです。しかし、ボタンの位置や外観をさらにカスタマイズすることができます。

Button URL’フィールドの上では、初期設定のアイコンをより適切なものに変更することができます。このプラグインは何十種類ものアイコン設定を提供しているので、行き詰まりを感じたらフィルター機能を使うのが良いだろう。

ツールチップテキスト」は、サイト訪問者がフローティングアイコンにマウスオーバーしたときに表示されます。訪問者がアイコンのどこにたどり着けるか文脈を与えるために、このフィールドに入力することをお勧めします。

アイコンをクリックした後、訪問者を新規ページにリダイレクトさせたい場合は、「新しいタブで開く」フィールドのチェックボックスにチェックを入れるだけです。

画面を下にスクロールすると、フローティングアイコンの色を編集できます。あなたのブランドやサイトの個性に一致する限り、背景色、アイコン、マウスオーバー効果の色は自由に創造してください。

設定が終わったら、「設定を保存」をクリックします。

The color settings for a Simple Floating Icon's icon display

次に、「設定」タブに移動して、より多くのカスタマイズ機能を利用することができます。

このタブでは、左上、右中、右下など、サイトのどこにフォームを表示するかを選択できます。

ボタンの向きの設定もある。縦か横かを選べます。ボタンのスタイルも変更したいかもしれません。初期設定は長方形ですが、円形、三角形、星形も選べます。

Simple Floating Icon's Settings tab

カスタマイズの設定はパネルの下にあります。

フローティングアイコンのサイズ、シャドウスタイル、タイポグラフィなどを調整するだけで、よりユニークなアイコンを作ることができます。

それが終わったら、あとは進行状況を失わないようにセーブするだけだ。

Simple Floating Menu's customizations for the button, icon, and tip

さあ、あなたのサイトでフローティングアイコンがどのように見えるか見てみましょう。

参考までに、私たちのフローティング・アイコンはこんな感じです:

Simple Floating Menu on a live website

代替案サイトにチャットボットを導入する

フローティングお問い合わせフォームは、訪問者があなたに連絡するための素晴らしい方法です。しかし、ユーザーに即座にレスポンスを提供したいのであれば、代わりにチャットボットをインストールする価値があります。

チャットボットは、AIを搭載することも、サポートチームが直接対応することもできます。例えば、チャットボットのようなツールは、サイトやヘルプセンターから情報を取得し、AIを活用したレスポンスを訪問者に即座に提供することができます。

ChatBot Review: Is is the right chatbot plugin for your WordPress website?

設定方法の詳細については、WordPressでチャットボットを追加する方法のチュートリアルをご覧ください。

このガイドが WordPress のフローティングお問い合わせフォームの作成と表示にお役に立てば幸いです。次は、WordPress でよりインタラクティブなお問い合わせフォームを作成する方法と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$編集プロセスをご覧ください。

アバター

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

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

  1. Syed Balkhi

    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!

返信を残す

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