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

お問い合わせフォームページデザイン12のベストプラクティス(例付き)

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

お問い合わせフォームページのデザインを改善したいですか?

優れたお問い合わせフォームページのデザインは、より多くのユーザーからのお問い合わせを促し、コンバージョンを高めます。

この投稿では、優れたお問い合わせフォームページのベストプラクティスと、その有用性をご紹介します。

Best practices of contact form page design

なぜ良いお問い合わせフォームページが重要なのか?

お問い合わせフォームページは、すべてのサイトに必要不可欠です。個人的なブログであれ、ビジネスサイトであれ、お問い合わせフォームページがあれば、ユーザーはいつでもあなたのサイトにアクセスすることができます。

ソーシャルメディアとは異なり、お問い合わせフォームではユーザーが個人的にコミュニケーションをとることができるため、信頼感が生まれ、セールスにつながる。

多くのサイトオーナーは、問い合わせページにあまり注意を払っていないことが多い。ほとんどの人はお問い合わせフォームを追加するだけで、あとは忘れてしまいます。

もしあなたのサイトのお問い合わせページから十分なリードを獲得できていないのであれば、コンバージョンのためにお問い合わせページを最適化する方法をご紹介しますので、読み進めてください。

WordPressでお問い合わせフォームページを作るには?

WordPressには、お問い合わせフォームページがビルトインされていません。お問い合わせフォームを作成し、お問い合わせページに追加するには、お問い合わせフォームプラグインが必要です。

WPFormsの使用をお勧めします。私たちのチームは、WordPressのための最も初心者に優しいお問い合わせフォームプラグインになるように作成しました。WPFormsの無料バージョンはWordPress.orgの公式プラグインディレクトリで入手できます。

ステップバイステップの詳しい説明は、WordPressでお問い合わせフォームを作成する方法をご覧ください。

お問い合わせフォームを作成したところで、コンバージョンを高めるのに役立つお問い合わせフォームページデザインのベストプラクティスを見てみましょう。

1.お問い合わせフォームが機能しているか確認する。

WordPressのホスティングサービスでは、メール機能の設定が不十分で、お問い合わせフォームプラグインがメール通知を送信できないことがよくあります。

WPFormsのプロバージョンを使用している場合、WordPressの管理エリア内でフォームのエントリーを見ることができます。しかし、もしあなたが無料のお問い合わせフォームプラグインを使用しているのであれば、フォームが機能していないことに気づくことはないでしょう。

WordPress サイトにお問い合わせフォームを追加したら、テスト送信を行い、正しく動作していることを確認することが重要です。

メール通知が届かない場合は、WordPressがメールを送信しない問題の解決方法をご覧ください。

Make sure email notifications are working

2.お問い合わせフォームの不要なフィールドを避ける

お問い合わせフォームにはいくつでもフィールドを追加することができます。しかし、お問い合わせフォームにフィールドを追加するたびに、ユーザーがフィールドを埋めるのに時間がかかるようになります。

そのため、お問い合わせフォームのフィールドは最小限にとどめ、ユーザーの質問をより理解するのに役立つフィールドのみを追加することをお勧めします。

長いフォームを作成しなければならない場合は、この投稿の最後にある、フォームからの離脱を減らすためのボーナスヒントをチェックする必要があります。

Keep it short and simple

(出典:ニール・パテル)

3.ユーザーがあなたに連絡すべき理由を説明する。

お問い合わせフォームのページは、ユーザーを招き入れ、歓迎するものでなければなりません。挨拶、そして歓迎のメッセージは、より丁寧で親切に見せることができます。ユーザーにどのような質問に対応できるかを伝えましょう。

Contact form welcome message

(出典:マイケル・ハイアット)

部門ごとに異なるページがある場合は、ユーザーを適切な方向に誘導しましょう。例えば、既存のカスタマイザーはサポートに、ゲストブロガーは執筆フォームに誘導することができます。

Point users in the right direction
(出典:OptinMonster)

4.代替連絡方法のプロバイダー

お問い合わせページにお問い合わせフォームを追加することは、ユーザーにとって最も便利な方法です。しかし、別の連絡方法を追加することで、ユーザーが自分に最適な方法を決めることができます。

メール、WhatsApp、電話番号を連絡先として追加できます。

Add alternate ways to contact
(出典:ZURB)

5.ソーシャルメディアのプロフィールを追加する

ほとんどのユーザーは個人的に連絡を取りたがりますが、FacebookやTwitterで連絡を取りたがるユーザーもいます。

お問い合わせフォームのページにソーシャルメディアボタンを追加することで、ユーザーがあなたに連絡する代替手段として利用することができます。

Add links to your social media profiles

(出典:レトロポートフォリオ)

6.住所と地図の追加

地図上に住所と場所を追加することは、オンラインビジネスに対するユーザーの信頼を高めるのに役立つ。

たとえ実店舗やオフィスがなくても、ユーザーはあなたがどこにいるかを知ることで安心する。

Add map and location on your contact form page

(出典:LEDbow)

異なる都市や国に複数の拠点がある場合は、そのすべてを追加することで、お問い合わせフォームページがより便利になります。

Add locations
(出典:ザ・チェイス)

7.FAQとリソースへのリンクの追加

しばらくすると、ユーザーの多くが同じような質問をしていることに気づくでしょう。FAQsセクションを追加することで、時間を節約し、コンタクトページで直接質問に答えることができます。

Add FAQs to your contact page
(出典:スマート・パッシブ・インカム)

8.フォーム確認ページの最適化

お問い合わせフォームを送信すると、ほとんどのプラグインではユーザーに確認メッセージを表示したり、別のページにリダイレクトしたりすることができます。

ユーザーをリダイレクトすることで、人気コンテンツや割引コードの提供など、最も役立つリソースをユーザーに見せることができます。

Optimize your form confirmation page
(出典:Orbit Media)

9.ユーザーにメールリストに参加してもらう

ユーザーは、フォームに入力する際にメールアドレスを追加する必要があります。チェックボックスを追加して、メールリストへの参加をお願いすることもできます。

すでにメールリストを作成していない場合は、メールリストを作成することが非常に重要である理由についてのガイドを参照してください。

Email signup
(出典:WPBeginner)

10.チームの写真を追加する

お問い合わせページにチームメンバーやスタッフの写真を追加することで、より親しみやすく、歓迎されたページになります。お問い合わせフォームページの後ろには、質問に答えてくれる本物のスタッフがいるのだと、訪問者を安心させることができます。

Introduce your team members on contact form page
(出典:ブークワイルド)

11.お問い合わせフォームページを魅力的にする

お問い合わせフォームのページは地味である必要はありません。オフィスや店舗、サポートチームの写真を追加して、企業文化や価値観を反映させることができます。

Add photos to make your contact page more engaging
(出典:デジタル・テレパシー)

12.コンタクトページのデザインに工夫を凝らす

あなたは、さまざまなサイトの多くの問い合わせページが、シンプルで非常に予測可能なレイアウトに従っていることに気づいているかもしれません。それは目的にかなっていますが、あなたはそれを目立つ機会として使うことができます。

多くのプレミアムWordPressテーマには、フォーム用のスタイルがビルトインされています。カスタム CSS を追加するか、CSS Hero のようなプラグインを使用することで、これらのスタイルをカスタマイズできます。

お問い合わせフォームページのレイアウトは、ドラッグ&ドロップで作成できるページビルダープラグインを使用することをお勧めします。そうすることで、コードを書くことなく、よりクリエイティブになれる柔軟性が生まれます。

Contact page templates in Beaver Builder

(出典:ビーバービルダー)

ボーナス:フォームの放棄を減らす

複数ページのフォームや多くのフィールドを持つフォームを作成すると、コンバージョン率が低下する危険性があります。多くの場合、ユーザーはフォームに疲れ、全てのフォームを完了する前に離脱してしまいます。

フォーム疲れと戦うために、WufooやWPFormsのような多くの高度なフォームビルダーにはフォーム放棄アドオンが付属しています。これはフォームからの部分的な入力をキャプチャするのに役立ちます。

簡単に言えば、トラフィックを増やすことなく、より多くのリードを獲得することができる。

WordPressお問い合わせフォームとページのエキスパートガイド

お問い合わせページを作成するためのベストプラクティスはおわかりいただけたと思いますが、WordPressのお問い合わせフォームやページに関連する他のガイドもご覧ください。

この投稿が、優れたお問い合わせフォームページデザインのベストプラクティスを学ぶのにお役に立てば幸いです。また、ランキングを向上させるためのステップバイステップのWordPress SEO ガイドや、専門家が選んだ最高の 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

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

  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. magnaa says

    Excellent article – some great tips about contact form pages that I’ll be implementing! I think sounding more human is key. Gives everything a more authentic and enjoyable experience.

  3. natalie says

    Thanks for the article, I would like to do your point number 9, see my attachment; Can you explain how to add that tick box please.

    thanks
    natalie

  4. Graham says

    Great article guys, and I appreciate the example you have shared as well. Having created plenty of contact pages over the past 10 years, some fresh inspiration and good ideas are always welcomed!

  5. Sven Kox says

    Nice article, thanks. I added a few new ones to my knowledge.
    One more tip: keep the field for the message big enough.
    It is not inviting if you have to write your message in a tiny window.

  6. Keely Worth says

    Excellent article – some great tips about contact form pages that I’ll be implementing! I think sounding more human is key. Gives everything a more authentic and enjoyable experience.

返信を残す

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