8つの美しいお問い合わせフォームの例+それらをWebサイトに追加する方法

お問い合わせフォームのデザインを釘付けにするための5つのヒント

実際の連絡フォームの例に入る前に、簡単に迂回して、優れた連絡フォームを作成する理由について説明しましょう。 この迂回路は、次のセクションで各連絡フォームの例がうまくいくことを説明する段階を設定します。

連絡フォームを持っている可能性が高いのは、他の人に記入してもらいたいからです。 では、どうすればより多くの人にそれを使用してもらうことができますか？ ここにいくつかのベストプラクティスがあります…

1.フォームの目的を明確に伝えます

あなたが忙しいビジネスやウェブサイトを持っているなら、あなたは異なる用途のために複数の連絡フォームを持っているかもしれません。 たとえば、次のようになります。

• 販売お問い合わせフォーム

• カスタマーサポートフォーム

• オンライン注文フォーム

• コールバックリクエストフォーム

• NS。

これを処理するための2つの基本的なアプローチがあり、以下の実際の連絡フォームの例で両方を確認できます。

1. 別のフォーム。 ユースケースごとに個別のフォームを作成し、各フォームの機能を正確に明確にするテキストを追加します。

2. ドロップダウンフィールド。 フォームの上部にさまざまなユースケースを一覧表示するドロップダウンフィールドを追加し、お問い合わせフォームを適切な場所に自動的にルーティングします。

いずれにせよ、フォームラベルと周囲のテキストを使用して、各連絡フォームの目的を訪問者に完全に明確にします。

2.より多くの変換のためにフォームの長さを制限します（ただし、品質を忘れないでください）

すべてが同じであれば、データは、連絡フォームが長いほど提出が少ないことを示唆しているようです。

たとえば、HubSpotは40,000を超えるランディングページを分析し、コンバージョン率とフォームフィールドの数の間に明確な相関関係があることに気づきました。

ピークコンバージョン率は約3フィールドです。 変換率は、フラットになる前に、8つのフォームフィールドまで着実に低下します。

ソース

さらに逸話的なことに、MarketoはHub​​Spotと同様の結果で3つのフォームをテストしました。

• 5つのフィールド— 13.4％のコンバージョン率

• 7つのフィールド— 12.0％のコンバージョン率

• 9フィールド— 10.0％のコンバージョン率

もちろん、単に連絡フォームの送信を増やすことはあなたの本当の目標ではないかもしれません。そのため、フォームのフィールド数を最小限に抑えるほど簡単ではありません。

たとえば、フィールドを減らすことでより多くの提出物を受け取ることができますが、参入障壁が非常に低いため、それらの提出物はそれほど高品質ではない可能性があります。

全体として、大まかな目安として、不要なフィールドをすべて削除しますが、フォームを短縮するためだけに重要な情報を収集するフィールドを削除しないでください。特に、その情報がリードの資格を得るのに役立つ場合はそうです。

3.スマートマイクロコピーを使用してフィールドを説明します

お問い合わせフォームに標準の「名前、メール、メッセージ」フィールド以外のものがある場合、訪問者を混乱させるリスクがあります。

たとえば、「予算」フィールドがある場合、その予算が何のためにあるのかが不明確になる可能性があります。 プロジェクト全体ですか？ 特定の部分だけですか？

このような混乱を避けるために、お問い合わせフォームに「マイクロコピー」を追加できます。

マイクロコピーは基本的に、フォームフィールドを明確にするためにフォームフィールドに付随する小さな説明テキストです。 たとえば、以下の[支払い量]フィールドを見てください（この例も後で表示されます）。

4.さまざまな形式を試してください

ほとんどの人がお問い合わせフォームについて考えるとき、彼らはあなたがほとんどのウェブサイトで見るのと同じ基本的な埋め込みフォームを思い描きます。 ただし、他のユーザーが簡単に連絡できるようにしたい場合は、ポップアップや通知バーなど、さまざまな表示方法を試してみるとよい場合があります。

たとえば、サイトの横にフローティングの連絡先ボタンがあると、サポートの連絡先フォームに最適です。 これにより、ユーザーは問題が発生したらすぐに連絡することが非常に簡単になり、連絡先ページを検索する必要がなくなります。

5.次のステップを人々に伝え、期待を設定する

送信を押すと、お問い合わせフォームのデザインは完成しません。

より良いユーザーエクスペリエンスを提供するには、次に何が起こり、どのくらいの時間がかかるかを正確に人々に伝えたいと思います。 例えば…

• すべてのお問い合わせに対応しますか、それとも一部のみに対応しますか？

• 応答するのにどれくらい時間がかかりますか？

• メールやその他の方法で返信しますか？

明確な期待を設定すれば、訪問者は何が起こっているのか、そしてあなたのフォームが機能しているかどうかさえ不思議に思うことはありません。

実際のウェブサイトからの8つの素晴らしいお問い合わせフォームの例

ベストプラクティスがわかったところで、実際のコンタクトフォームのデザインをいくつか見て、自分自身に刺激を与え、これらのベストプラクティスの実際を示しましょう。

1.ストライプ

Stripeの販売連絡フォームは、少し余分な情報を収集することで、連絡フォームがより適格なリードを生成できる場合があることを示す好例です（ベースラインのコンバージョン率が少し低下する可能性がある場合でも）。

Stripeは、標準の情報フィールドに加えて、Paymentsボリュームフィールドを追加して、各リードの潜在的な品質をよりよく理解できるようにします。

それ以外にも、次のような優れたデザインの選択肢がいくつかあります。

• 社会的証明—側面にあるこれらのロゴは、Stripeを使用して成功しているすべてのビジネスを表示することにより、社会的証明を追加します。

• マイクロコピー—「支払い量」という用語は少し紛らわしいかもしれないので、Stripeはフィールドに入力する方法を説明するいくつかの役立つマイクロコピーを追加します。

• 目的— Stripeは、このフォームが販売に関する問い合わせ専用であることを明確に示しています。 これにより、サポートやその他の販売以外の用途に使用しようとする人がいないようにします。

2. Getsitecontrol

ここGetsitecontrolでは、お問い合わせフォームのデザインを少し異なる方法で処理します。

訪問者が移動する必要のある専用の「お問い合わせ」ページを作成するのではなく、その場でポップアップを開く「お問い合わせ」リンクを含めるだけで、ページを再読み込みする必要はありません。

これは人々にとって本当に便利です。なぜなら彼らは…

• サイトの任意のページからお問い合わせフォームにアクセスし、

• 彼らがしていることを中断することなくメッセージを送信します（このブログ投稿を読むなど）。

Getsitecontrolお問い合わせフォームはシンプルで簡単に記入できます。 さらに、GetsitecontrolブログをチェックするためのCTAとともに、フォームを送信した後の次のステップを明確に伝えます。

3.キンスタ

Kinstaには、ページをリロードしなくても、ユーザーを適切な連絡フォームに自動的に案内する単一の「お問い合わせ」ページがあります。

Kinstaは、最も人気のある5つの連絡先リクエストを一覧表示します。

1. 価格または計画

2. 機能または技術情報

3. 移行または関連する質問をリクエストする

4. ゲスト投稿、スポンサー投稿、またはバックリンクリクエスト

5. 他に何か

ユーザーが目標を選択すると、Kinstaはパーソナライズされた連絡フォームまたはメッセージを表示します。

これにより、Kinstaは、訪問者に無関係なフィールドを負担させることなく、必要な情報を正確に収集できます。

たとえば、Kinstaは、価格設定またはプランの連絡フォームで、ホストしようとしているWebサイトと訪問者の数を理解するためのフィールドを追加しますが、これらのフィールドは「その他」フォームには表示されません。

Kinstaはまた、「1営業日以内に連絡を取ります」という明確な期待をトップに掲げています。

4.選択スクリーニング

チョイススクリーニングには長いお問い合わせフォームがあります。 一見すると、フォームのコンバージョン率が低下すると思われるかもしれません。 そして、それは一種の真実です—選択肢のスクリーニングは、間違いなく、短いフォームの場合よりも少ないフォーム送信を受け取ります。

しかし、なぜそれが問題ないのか、そしてなぜこれが優れた連絡フォームの例であるのかについて話しましょう。

Choice Screeningは、非常に専門的な企業間スペースで機能します。 彼らは、フォームの送信だけでなく、長年の顧客になる資格のあるリードを獲得しようとしています。

詳細なサービスリストと多くのチェックボックスを備えたこのフォームは、まだ何が欲しいのかわからない人々を排除し、顧客になる可能性が高い資格のあるリードのみを通過させます。

Choice Screeningは、このお問い合わせフォームを使用して潜在的な顧客をスクリーニングしていると言えます。

5. Joel Klettke /ビジネスカジュアルコピーライティング

Joelはプロのコピーライターなので、彼の連絡フォームのデザインとコピーが適切に機能することは間違いありません。

Joelのフォーム自体は単純で、標準フィールドに加えて、個人の予算に合わせていくつかの追加の適格フィールドがあります。 ただし、これをこのような優れた連絡先フォームの例にしているのは、フォームの横で行われているすべてです。

そのテキストの中で、ジョエルは期待を設定し、彼のリードを修飾するという素晴らしい仕事をしています。 彼はまた、彼の最低料金について話し合うことによって、意図的に低予算の顧客を追い払っています。 Joelはこれらの言及を削除して、より高い先行コンバージョン率を得ることができますが、そうすると、実際には適格なリードの割合が低くなり、Joelの時間を無駄にすることになります。

6.ニールパテル

Neil Patelは、世界で最も人気のあるデジタルマーケティングWebサイトの1つを運営しているため、彼が多くの連絡フォームを送信していることを確信できます。

これらの提出物を適切な場所にルーティングできるように、ニールには「チャットしたい」ドロップダウンがあり、事前に設定された一連のオプションから選択できます。 彼はまた、プレースホルダーボックスでいくつかのマイクロコピーを使用して、メッセージを短く、要点を絞るように人々に呼びかけています。

これは単純ですが、連絡先フォームのデザインに必要なのは単純な場合もあります。

7.フォーカスラボ

わかりました、これは楽しくて気まぐれで、すべてのビジネスで確実に機能するとは限りません。 しかし、クリエイティブスペース（Focus Lab）にいる場合は、このような気まぐれなコンタクトフォームのデザインを作成することで、既成概念にとらわれずに考えることができることを示すことができます。

Focus Labは、従来のフォームを作成するのではなく、訪問者が既存の段落に情報を入力するというMadLibsスタイルのアプローチを使用しています。 このアプローチを使用することにより、Focus Labは、従来のコンタクトフォームのデザインのような印象的な外観なしに、より多くの情報（目標や予算など）を収集することもできます。

8. CAMICB

CAMICBは、Community Association Managers International Certification Boardの略で、米国の地域自治会に認定を提供しています。

CAMICBお問い合わせフォームの注目すべき点は、ハイブリッドポップアップ/「お問い合わせ」ページアプローチを使用していることです。 ユーザーが[お問い合わせ]ページにアクセスすると、CAMICB Webサイトは、訪問者がメッセージを送信できる簡単なポップアップ連絡フォームを即座に開きます。

たった3つのフィールドで、CAMICBはその形を短くそして要点に保ちます。 次に、ポップアップアプローチにより、完全にフォームに焦点が当てられる、気を散らすことのない優れたインターフェイスが作成されます。

これにより、可能な限り摩擦のない問い合わせを送信できます。

さらに簡単にするために、CAMICBは、ユーザーがフッターでアクセスできるスライドアップの連絡フォームも表示します。

独自のカスタマイズ可能なお問い合わせフォームのデザインを作成する方法

これらの8つの連絡フォームの例を参照すると、これらの原則を独自の連絡フォームのデザインに適用する方法について、たくさんのアイデアが浮かんできます。

開始したい場合は、[Getsitecontrol]（/ Feedback-popup /を使用すると、すぐに稼働させることができます。

ほとんどのコンタクトフォームソリューションとは異なり、Getsitecontrolでは、フォームの4つの柔軟な位置と数十のテンプレートから選択できます。 CAMICBやGetsitecontrolWebサイトで見たような従来のポップアップを作成できます。 または、スライドイン、通知バー、ボタンなどで物事を揺るがすことができます。

適格な提出物を取得するために必要な数（または少数）のフィールドを追加できます。また、訪問者がフォームに入力するのに役立つマイクロコピーを挿入することもできます。

今すぐGetsitecontrolにサインアップすると、わずか数分で有効な連絡フォームを入手できます。