WordPressにスライドアウトコンタクトフォームを追加する方法（簡単なチュートリアル）

WordPressウェブサイトを訪問した人が連絡してこないのは、フラストレーションがたまることがあります。ページを閲覧したり、数分間読んだりしても、お問い合わせフォームに送信が届かないのです。

多くの場合、訪問者が連絡を取りたくないわけではありません。ただ、簡単で魅力的な方法が見つからないだけなのです。

そこで、スライドアウトコンタクトフォームが大きな違いを生むことができます。訪問者が必要としているときに、体験を中断することなく、そっと横から表示され、ヘルプを提供します。

このガイドでは、信頼性が高くテスト済みの方法を使用して、WordPressサイトにスライドアウトコンタクトフォームを追加する方法をステップバイステップでご紹介します。🧑‍💻

WordPressにスライドアウトのお問い合わせフォームを追加する理由 💭

スライドアウトコンタクトフォームは、訪問者が現在見ているページを離れることなく、簡単に連絡を取れるようにします。横からそっとスライドインして注意を引き、ユーザーが必要なときにすぐに簡単なメッセージを送信できるようにします。

多くの小規模ビジネスオーナーは、訪問者がそれを使用し、ビジネスを成長させるのに役立つことを期待して、お問い合わせページを追加しています。

しかし実際には、ほとんどの人は連絡を取ることなく離れてしまいます。そのため、人気のあるウェブサイトでは、コミュニケーションを容易にするためにコンタクトポップアップ、スライダー、またはフローティングボタンが使用されているのがわかります。

これらのアニメーション化されたインタラクティブなオプションは、コンタクトフォームに注意を引き、サイトをよりインタラクティブで親しみやすいものにします。これにより、カジュアルな訪問者をより簡単に実際のリードや顧客に変えることができます。

それでは、WordPressでスライドアウト連絡先フォームを作成する方法を共有します。このガイドでカバーするすべてのことの簡単な概要を以下に示します。

• WordPressにスライドアウトのお問い合わせフォームを追加する
• ステップ1：WordPressでお問い合わせフォームを作成する
• ステップ2：OptinMonsterでスライドアウトキャンペーンを作成する
• ステップ3：WordPressでスライドアウトコンタクトフォームを表示する
• FAQ：WordPressにスライドアウトお問い合わせフォームを追加する方法
• WordPressフォーム使用のためのボーナスリソース

さあ、始めましょう。

WordPressにスライドアウトのお問い合わせフォームを追加する

このチュートリアルでは、WPFormsが必要です。これは、簡単かつ強力であるため、市場で最高のWordPressお問い合わせフォームプラグインです。

ℹ️ 注： WPFormsは、お問い合わせフォームを含むWPBeginnerのすべてのフォームを強化しています。使いやすく、カスタマイズ性が高く、新しいAIツールにより、これまで以上に迅速にフォームを作成できます。

仕組みが気になる方は、WPFormsのレビューをご覧ください。その全機能をご確認いただけます。

このチュートリアルを進めるには、プレミアム機能（条件付きロジック、高度な連携など）が必要ない場合は、WPFormsの無料版のお問い合わせフォームプラグインを使用できます。

次に、フォームをOptinMonsterと連携させます。これは最も強力なコンバージョン最適化ソフトウェアであり、放棄されたウェブサイト訪問者を顧客に変えるのに役立ちます。

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

まず、WPFormsプラグインをインストールして有効化する必要があります。WordPress管理画面から、プラグイン » 新規追加 に移動して開始してください。

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

検索結果で、「今すぐインストール」をクリックし、次に「有効化」をクリックしてプロセスを完了します。

詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、新しいコンタクトフォームを作成するために WPForms » 新規追加 ページにアクセスする必要があります。これにより、WPFormsビルダーインターフェースが起動します。

ページの上部にある連絡フォームの名前を入力してください。

その後、「Simple Contact Form」テンプレートの上にマウスカーソルを合わせ、「Use Template」ボタンをクリックする必要があります。

WPFormsは、シンプルなコンタクトフォームテンプレートに基づいて新しいフォームを作成します。

フォームビルダーの右ペインにフォームのプレビューが表示されます。フィールドをクリックして編集したり、左側の列から新しいフォームフィールドを追加したりできます。

ステップバイステップの説明については、WordPressコンタクトフォームの作成方法に関するガイドを参照してください。

フォームの編集が完了したら、「Save」ボタンをクリックして変更を保存してください。

次に、上部にある「埋め込み」ボタンをクリックして、フォームの埋め込みコードを取得する必要があります。

これにより、フォームを埋め込む いくつかの方法が表示されるポップアップが表示されます。「ショートコードを使用」リンクをクリックして、ショートコードをコピーするだけです。次のステップで必要になります。

ステップ2：OptinMonsterでスライドアウトキャンペーンを作成する

次に、最初のステップで作成したお問い合わせフォームを表示するスライドアウトキャンペーンを作成します。

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

ℹ️ 注記: WPBeginner では、ポップアップ、スライドイン、バナーを通じて限定セールを宣伝するために OptinMonster を使用しています。これは、エンゲージメントを促進し、簡単にメールリストを増やすことができる多用途なツールです。

もっと知りたいですか？ OptinMonster の完全なレビューをチェックして、その機能をご覧ください。

まず、OptinMonster アカウントを取得しましょう。彼らのウェブサイトで、「今すぐ OptinMonster を入手」ボタンをクリックし、プランを選択して、登録プロセスを完了してください。

これが完了すると、OptinMonster ダッシュボードにリダイレクトされます。

次に、WordPress ダッシュボードで プラグイン » 新規プラグインを追加 に移動して、OptinMonster プラグインをインストールします。

次に、検索機能を使用して OptinMonster プラグインをすばやく見つけます。

見つけたら、「今すぐインストール」ボタンをクリックし、次に「有効化」をクリックします。

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

有効化すると、OptinMonsterセットアップウィザードが自動的に開始されます。これにより、新しいアカウントを作成したり、既存のアカウントに接続したりできます。

OptinMonsterアカウントを作成または接続した後、新しいオプトインキャンペーンを作成できます。

単純に OptinMonster » Campaigns ページに移動し、「Add New」ボタンをクリックします。まだキャンペーンがない場合は、「Create Your First Campaign」ボタンをクリックすることもできます。

OptinMonsterは、さまざまな種類のダイナミックキャンペーンを提供しています。

このチュートリアルでは、「Slide-in」キャンペーンを使用します。

キャンペーンタイプとして「スライドイン」を選択してクリックしてください。

次に、テンプレートを選択する必要があります。OptinMonsterは、いくつかの既製のテンプレートを提供しています。

このチュートリアルでは、「Canvas」を選択する必要があります。

検索機能を使って簡単に見つけ、マウスを重ねると表示される「テンプレートを使用」ボタンをクリックしてください。

テンプレートを選択するとすぐに、キャンペーンの名前を入力するように求められます。これにより、OptinMonsterダッシュボードでキャンペーンを簡単に見つけることができます。

次に、「ビルド開始」ボタンをクリックします。

これで、OptinMonsterがキャンペーンビルダーインターフェースをロードします。

右側にキャンペーンのライブプレビューが表示され、左側のメニューにさまざまなブロックが表示されます。

WPFormsブロックを見つけて、プレビューエリアにドラッグアンドドロップするだけです。

これで、WPFormsブロックがテンプレートに表示され、左側に設定が表示されます。

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

これにより、WPFormsのお問い合わせフォームショートコードをブロックに貼り付けることができます。チュートリアルで先にコピーしました。

これで、フォームの他のブロックを削除またはカスタマイズできます。

例えば、画像をクリックして左側の設定を使用することで、画像を変更できます。

または、ブロックの上にマウスカーソルを合わせて「ゴミ箱」アイコンをクリックすることで、簡単に削除することもできます。

このチュートリアルでは、オプトインから他のブロックを削除し、WPFormsブロックのみを残します。

必要であれば、背景をクリックして、左側の設定パネルからオプションの色、グラデーション、または画像を選択することもできます。

次に、オプトインが表示されるタイミングと方法を設定するために、ページ上部の「表示ルール」タブをクリックする必要があります。

画面下部にある「条件」タブを確認してください。ここでは、デフォルト設定で5秒後にどのページにもオプトインが表示されます。これはほとんどのウェブサイトで機能するはずです。

次に、ページ下部にある「Actions」タブをクリックします。

デフォルトでは、オプトインが表示される際にアニメーションやサウンドはありません。「Animate with MonsterEffects」ドロップダウンから「Slide In (Left)」などのオプションを選択できます。

表示ルールの設定が完了したら、設定を保存するために上部にある「保存」ボタンをクリックし、次に「公開」ボタンをクリックする必要があります。

次の画面で、公開ステータスを「公開」に変更する必要があります。これにより、WordPressブログまたはウェブサイトでオプトインが利用可能になります。

ステップ3：WordPressでスライドアウトコンタクトフォームを表示する

連絡先フォームとスライドアウトキャンペーンの両方を作成したので、ウェブサイトに表示する準備ができました。

右上にある「X」アイコンをクリックして、公開ステータスページを閉じることができます。これで、「WordPress出力設定」とオプトインの「表示とステータス」を設定できるページが表示されるはずです。

「表示とステータス」セクションを下にスクロールすると、通常はキャンペーンを「全訪問者とログイン中のユーザー」に表示させたいはずです。ただし、「訪問者のみ」や「ログイン中のユーザーのみ」のオプションもあります。

それが完了したら、設定を保存するために「変更を保存」ボタンをクリックする必要があります。

これでウェブサイトにアクセスして、スライドアウト連絡先フォームが機能しているのを確認できます。

FAQ：WordPressにスライドアウトお問い合わせフォームを追加する方法

WordPressにスライドアウト連絡先フォームを追加する方法がわかったので、ユーザーがよく尋ねる一般的な質問をいくつか見てみましょう。

スライドアウトボックスの理想的なサイズはどれくらいですか？

通常、幅400〜600ピクセル、高さ300〜400ピクセルが適しています。ページをあまり覆わずに目立つ必要があります。

スライドアウト、ポップアップ、オーバーレイの違いは何ですか？

スライドアウトは側面からスライドインし、ポップアップは中央に表示され、オーバーレイは画面全体を覆います。スライドアウトは通常、それほど邪魔になりませんが、各オプションはエンゲージメントを高めるのに役立ちます。あなたのサイトのスタイルに最適なものを選択してください。

ポップアップフォームの優れた代替手段はありますか？

よりスムーズで邪魔にならないユーザーエクスペリエンスのために、インラインフォーム、フローティングバー、またはスライドアウトフォームを使用できます。

WordPressフォーム使用のためのボーナスリソース

この記事がWordPressにスライドアウト連絡先フォームを追加する方法を学ぶのに役立ったことを願っています。

WordPressフォームに関するその他のガイドも参照してください。

• WordPressでフローティングお問い合わせフォームを表示する方法
• WordPressでコンタクトフォームポップアップを追加する方法
• お問い合わせフォームページの設計におけるベストプラクティス（例付き）
• WordPressで問い合わせフォームを使ってメールリストを増やす方法
• WordPressで問い合わせフォームのスパムをブロックする方法

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