50 Best Contact Form Design Examples

ウェブサイトにお問い合わせフォームを設置することは、最も効果的な方法の1つです。 視聴者とのコミュニケーション.お客様や訪問者が連絡方法を探している理由は、テクニカルサポートから販売リクエスト、ブランドパートナーシップ、カスタマーサービスまで、さまざまです。そのためには、ユーザーが簡単に連絡できるようにしておくことが重要です。 様々なチャンネルそして、もしあなたがウェブサイトを立ち上げたり、デザインを変更したりするなら、お問い合わせフォームは次のようなものになるはずです。 最も重要な検討事項.

良いコンタクトフォームを作るには様々な方法があります。コンタクトフォームのデザインは、ブランドのスタイルガイド、ウェブサイトのテーマ、コンタクト管理プロセス、そしてコンタクトフォームの目的に応じて収集する必要のある情報量などの要素に影響されることがあります。ユニークで効果的なコンタクトフォームのデザインを開発するための最良の方法の一つは、他のウェブサイトからインスピレーションを得ることです。この記事では、多様なビジネスを展開する国際的なセレクションから生まれた、50の優れたコンタクトフォームの例を選びました。

以下のお問い合わせフォームの例は、会社名の単純なアルファベット順に並んでいますが、それ以外は何のランキングも評価もありません。

1. 3000を達成

@achieve3000

Achieve3000

Achieve3000は、教育機関向けのオンラインカリキュラムプラットフォームです。Achieve3000のウェブサイトには、テクニカルサポート用と販売用の2つの独立した問い合わせフォームがあります。目的別にお問い合わせフォームを分けることで、それぞれの受信箱に最も関連性の高いコミュニケーションを集中させ、質問や問い合わせをより効率的に適切なチームメンバーに送ることができます。

2. 灰とミルク

Ashes & Milk」は、より健康的な食事の選び方や調理法を紹介するフードブログです。オーナーのAshley Milkさんは、自分のブランドを中心にサイト全体をデザインしただけでなく、お問い合わせフォームにも個性的なアプローチをとっています。このサイトでは、「contact me」というタイトルを使って、自分がメッセージを受け取ることを明確にしています。また、フォームはシンプルできれいなレイアウトになっており、訪問者が記入しやすいようになっています。

3. アトラシアン

@atlassian

アトラシアン

アトラシアンは、JiraやTrelloなどの人気製品をリリースしている大手ソフトウェア開発会社です。フィードバックフォームは6つのセクションに分かれており、テクニカルサポート、請求書作成、製品アドバイス、キャリア、一般的なお問い合わせの中から選ぶことができます。お問い合わせページの最もユニークな点は、アトラシアンの創業者に直接フィードバックを送信できることです。

4. バンドー

@shopbando

バンドー

バンドーは、オンラインショップで豊富な商品を提供しているアパレル・ホームグッズショップです。お問い合わせページは、サイトのデザインと美的感覚にぴったり合うように、非常によくブランディングされています。標準的なお問い合わせフォームに加えて、商品の返品を依頼するための専用リンクも用意されており、プロセスが少しだけ楽になっています。

5. ビーカブル

ビーカブル

ビーカブル

Beakableは、プログラマーのIain Hamiltonのウェブサイトで、彼はデザインに素晴らしい考えと努力を注いでいます。ページのテーマは独特のレトロ感があり、ページにはたくさんのグラフィックが埋め込まれています。彼のコンタクトフォームは、パッケージに紙が入っているように見えますが、ユニークで訪問者の注意を引くコンタクトページを作るための良い例です。

6. Befunky

@befunky

BeFunky

Befunkyは、画像編集やグラフィックデザインのためのクリエイティブプラットフォームです。お問い合わせフォームの上にある「Submit a request」というヘッダーは、このフォームをオープンエンドにして、訪問者に様々なタイプのお問い合わせに使用できることを知らせています。基本的な項目(メールアドレス、件名、説明文)を除いて、このフォームで必要なのは、メッセージがどの製品に関連しているかを特定することだけです。

7. ブランドウォッチ

@Brandwatch

ブランドウォッチ

Brandwatchは、市場で最も人気のあるデジタル・コンシューマー・インテリジェンス・プラットフォームの一つです。彼らの意図は、新規および既存の顧客と密接な関係を築くことであり、お問い合わせフォームはこの目的のために最適化されています。フォームには明確なコールトゥアクションがあり、訪問者はBrandwatchチームとのミーティングを予約して、デモを受けたり具体的な要件について話し合ったりするように指示されています。

8. ブライトライツシアター

ブライトライツシアター

シカゴにあるBright Lights Theatreは、プロダクション、クラス、教育キャンプなどを提供しています。このサイトは、大胆な色使いの明るいテーマで、コンテンツを際立たせています。これは、ウェブサイト上のシンプルな問い合わせフォームにも効果的で、基本的な連絡先情報といくつかの入力フィールドが明確に表示されています。

9. BrokerNotes

ブルカーノーツ

BrokerNotes

BrokerNotes社は、英国に拠点を置く金融会社で、国内の機関に規制やコンプライアンスに関するサービスを提供しています。このお問い合わせフォームは、1つの質問から始まり、さらにいくつかの簡単なステップを経て、問い合わせを送信するというものです。このようにお問い合わせフォームを構成することで、訪問者それぞれのプロセスを簡素化することができます。

10. カベッジ

@cabedge

カベッジ

ウェブデザインとマーケティングの会社であるキャベッジは、ナッシュビルに拠点を置き、ウェブサイトを通じて様々なサービスを提供しています。他の質の高いコンタクトフォームと同様に、提供されたフィールドに入力するか、あるいは単に会社に直接メールを送るかというオプションを提供しています。これは、訪問者が最も使いやすい連絡方法を選ぶことができるという点で、常に優れた方法です。

11. カフェ・イヴォーク

@cafeevoke

カフェ・イヴォーク

オクラホマ州エドモンドのダウンタウンにある「Cafe Evoke」は、クリーンでベーシックなウェブサイトです。このデザインの良いところは、ギフトカード、ケータリング、連絡先など、ビジネスにとって最も重要なトピックへのクイックリンクが用意されていることです。また、シンプルでわかりやすいお問い合わせフォームを使用しており、誰でも簡単にフィードバックや質問をすることができます。

12. Carlos MBonilla

Carlos MBonilla

Carlos MBonillaは、コスタリカを拠点に活動するグラフィック&ウェブデザイナーです。彼のウェブサイトは、彼のパーソナルブランドとデザインの美学を表現したユニークなデザインとなっている。お問い合わせフォームは手紙のようなデザインになっていて、訪問者には無料のコンサルティングを提供しているので、見込み客のニーズをより詳しく知ることができます。

13. チョイス上映

@choicescreening

ChoiceScreening

Choice Screeningはデンバーを拠点とする企業で、透明性が高く、詳細なバックグラウンド・スクリーニング・サービスを提供しています。この会社の仕事が機密性の高いものであることを考慮して、問い合わせフォームは必要な詳細をうまく整理しています。正式な依頼をする前に、訪問者は連絡先情報を入力し、特定の種類のバックグラウンド・スクリーニングを選択しなければなりません。

14. シソンシップデザイン

シソンシップ

シチズンシップ・デザイン

Citisonship Designは、サウスカロライナ州グリーンビルに拠点を置く、ウェブサイトのデザインとブランディングを行う会社です。彼らのウェブサイトは、テーマのほとんどの要素に黒と白のシンプルな色を使ったモダンなデザインです。また、お問い合わせフォームも簡単に設置でき、いくつかのシンプルなフィールドが用意されています。

15. コブルヒル

@cobble_hill

コブルヒル

Cobble Hillは、SEO、ソーシャルメディア広告、Eメールマーケティングなどで豊富な経験を持つグロースマーケティングとデジタルデザインの会社です。レスポンシブWebサイトとシンプルな階層構造により、必要な情報を簡単に見つけ出すことができます。また、数秒で入力できるフルページのコンタクトフォームを用意しており、訪問者に簡単にコンタクトを取る方法を提供しています。

16. CreativeMob

クリエイティブ・モブ

CreativeMobは、コンテンツ・マーケティング、ウェブ開発、オンライン・マーケティング・サポートを提供する、総合的なデジタル・マーケティング・グループです。ウェブサイトのデザインにも力を入れており、お問い合わせフォームもわかりやすく、魅力的なものになっています。手紙のようなデザインのこのフォームでは、基本的な連絡先情報と、CreativeMobチームに直接届くシンプルなメッセージを入力するようになっています。

17. ダラーシェイブクラブ

ダラーシェイブクラブ

ダラーシェイブクラブ

ダラーシェイブクラブは、高品質なグルーミング用品を会員制クラブとして提供しています。ウェブサイトには、オンラインショップと、グルーミングに関する人気の高いトピックを取り上げたオリジナルコンテンツを掲載したブログがあります。全ページのお問い合わせフォームには、よくある質問に答えるインタラクティブなFAQと、FAQに掲載されていない質問がある場合にお問い合わせを送信するシンプルなボタンが用意されています。

18. コンパス

コンパス

コンパス

Compassは、仲介サービスと革新的なソフトウェア製品を顧客に提供する不動産会社です。このサイトのお問い合わせフォームは、ページ全体に表示され、一般的なサポートと移転に関する問い合わせのどちらかを選択するようになっています。移転に関するサポートがビジネスの大部分を占めているため、このトピックに独自の選択項目を設けることは理にかなっています。

19. Dewey's Pizza

デュエズピッツァ

Dewey's Pizza

Dewey's Pizzaは、オハイオ州シンシナティに本社を置き、近隣の多くの地域に店舗を展開しています。ウェブサイトは、ピザの厨房をイメージしたシンプルなデザインで、見やすいレイアウトになっています。お問い合わせフォームは、イベントのリクエストとフィードバックに分かれており、太い文字と大きなヘッダーで、目的のフォームを見つけやすく、アクセスしやすくなっています。

20. 電気パルプ

電気集塵機

電気パルプ

Electric Pulpは、ウェブデザイン、デジタルマーケティング、アプリ開発などのサービスをクライアントに提供しています。サウスダコタ州スーフォールズを拠点とするElectric Pulpは、ランディングページの下部に電話とEメールの基本的な連絡先を記載し、シンプルな問い合わせフォームも設置しています。これにより、コンテンツが一度に整理され、訪問者がページをスクロールするだけで簡単にお問い合わせフォームにアクセスできるようになっています。

21. エンビー・ラボ

@envylabs

エンビー・ラボ

Envy Labs社はソフトウェア開発会社で、顧客のためにカスタムWebアプリケーションをデザインしています。同社のウェブサイトには、訪問者にとって有益な情報を含む全ページのコンタクトフォームが用意されています。お問い合わせフォームの便利な機能のひとつに、どこでその会社のことを知ったのかを記入する欄があります。

22. FabFitFun

@fabfitfun

FabFitFun

FabFitFunは、ファッション、ライフスタイル、ビューティ製品をお客様のためにキュレーションする、サブスクリプションベースの製品会社です。ユニークな商品が入ったボックスを受け取ることは、消費者が新しいブランドを発見するための人気の方法となっており、FabFitFunは多くの異なるパートナーとの調整を必要としています。お問い合わせフォームには、カスタマーサービス、広告依頼、プレス問い合わせ、ブランドパートナーシップなどの項目が設けられています。

23. Grammarly

@grammarly

Grammarly

Grammarlyは、お客様のコミュニケーションスキルの向上をサポートするデジタルライティングアシスタントアプリケーションです。人気のあるソフトウェア製品を提供している会社なので、プレス、セールス、サポート用のコンタクトフォームを用意しています。テクニカルサポートのお問い合わせフォームでは、人気のある8つのサポートトピックから選択していただき、その後のプロセスをご案内しています。

24. HubSpot

@HubSpot

HubSpot

HubSpotは、マーケティング、セールス、サービスの各機能の専用モジュールを備えた人気のCRMプラットフォームです。ウェブサイトのお問い合わせページでは、製品やサービスに関する具体的なお問い合わせは、グローバル・セールス・チームまたは各地域のオフィスに直接ご連絡いただくようお願いしています。電話、チャット、電子メールなどのテクニカルサポートは、お客様が契約したCRMの種類によって異なります。

25. Indofolio

IndoFolio

Goal Raj氏は、IndofolioのリードUIアーキテクトであり、彼の作品を紹介するプロフェッショナルなウェブサイトです。このサイトでは、水平方向にスクロールするユニークなレイアウトを採用し、10のメインページを順に見ていきます。最後のページはコンタクトフォームで、彼の所在地である南インドを示し、いくつかのシンプルなフィールドに素早く入力して送信できるようになっています。

26. ジェス・マークス

ジェス・マークス

ジェス・マークスと夫のスティーブは、オーストラリアを拠点とするプロの写真家で、新生児、結婚式、家族の写真を専門としています。ウェブサイトでは、彼らの写真ポートフォリオと連絡先を中心に、合理的なレイアウトを採用しています。また、お問い合わせフォームに結婚式の日程を記入してもらうことで、スケジュールが合わない可能性のあるクライアントをすぐに特定し、追加の情報を必要としないようにしています。

27. ケブ・アダムソン

@KevAdamson

ケブ・アダムソン

Kev Adamson氏は、18年以上の経験を持つ英国のウェブおよびグラフィックデザイナーです。Kev Adamson氏のウェブサイトは、ユニークなデザインで、彼の最高の作品を紹介するグラフィックがたくさん埋め込まれています。お問い合わせフォームはフロントページにあり、お客様の声の横に表示されているので、彼に仕事の依頼をしたいと思っている人には、もう少し背景がわかるようになっています。

28. ライトハウス・ブルーイング

@lighthousebeer

ライトハウス・ブルーイング

ブリティッシュコロンビア州にあるLighthouse Brewing Companyは、ユニークなフレーバーのクラフトビールを提供しています。ウェブサイトでは、最も人気のあるフレーバーを紹介しており、お問い合わせページはメインメニューからワンクリックで簡単にアクセスできます。お問い合わせフォームには、お客様からのフィードバックをお待ちしていますという文言があり、お客様との親密な関係を築くためには重要な項目となっています。

29. ライオンウェイ

ライオンウェイ

Lionwaysは、イスラエルのウェブサイト制作会社で、顧客のためにカスタマイズされたユニークなサイトを構築しています。お問い合わせフォームに加えて、メインオフィスとリードデベロッパーの直通電話番号とメールアドレスを掲載しています。これにより、既存の顧客が同社に質問をしたり、潜在的な顧客がフォームに記入して新たなリクエストをしたりすることが容易になりました。

30. マーベル

@marvelapp

マーベル

Marvelは、デジタル製品のプロトタイピング、リリース、スケーリングを行うためのデジタルデザインプラットフォームです。同社は英国を拠点としており、ウェブサイトにはアプリケーションの機能を紹介する情報コンテンツが多数掲載されています。サイト上の主要なコンタクトフォームはサポートリクエスト用で、ユーザーは提供された電子メールアドレスを使ってMarvelのセールスチームに連絡することもできます。

31. メディアプロパー

メディアプロパー

メディア・プロパーは、クライアントそれぞれのニーズに合わせてカスタマイズされたオーダーメイドのウェブデザインとマーケティングサービスを提供しています。このウェブサイトは、埋め込みビデオや短いアニメーションを使用して、閲覧体験をよりダイナミックにする印象的なデザインになっています。フルページのお問い合わせフォームでは、どのデバイスからでも読みやすいフィールドが用意されており、簡単に入力して送信することができます。

32. Mooze Design

@moozedesign

Mooze Design

ウェブデザイン会社「Mooze Design」のウェブサイトは、シンプルで効果的なサイトレイアウトの好例です。すべてのコンテンツが1つのページに表示されており、カーソルを数回スクロールするだけで見ることができます。また、ページ下部にはお問い合わせフォームが設置されており、他のページに移動することなく簡単にお問い合わせをすることができます。

33. Omada Health

@omadahealth

オマダ

オマダヘルス社は、雇用主やヘルスプランを通じて、個人がより健康的な習慣を身につけるためのデジタルケアサービスを提供しています。同社は、雇用者、ヘルスプラン、会員を対象としているため、販売に関する問い合わせのための一般的な問い合わせフォームと、参加者サポートのための別のページを用意しています。これにより、ウェブサイトの訪問者が他のページに迷うことなく、適切なリクエストを見つけて送信することができます。

34. オーチャードワールド

オーチャードワールド

OrchardWorldは、イギリスにある高品質なフルーツ製品を専門とする青果会社です。このサイトでは、大胆な背景色と大きな画像を組み合わせることで、没入感のあるブラウジングを実現しています。このお問い合わせフォームは美しいレイアウトで、サイドペインに表示されているので、目につきますが、必要以上に場所をとることはありません。

35. パラベル

パラベリン

パラベル

Paravelは、デバイスにとらわれないデザイン、コンポーネント化されたシステム、コンサルティングなど、さまざまなWebベースのサービスを顧客に提供している。お問い合わせフォームには、会社のロゴと本社のあるテキサス州の旗を組み合わせたイメージが使用されており、ブランド力を高めています。また、他のサービス型デザイン会社と同様に、依頼する前にプロジェクトの予算を見積もることを求めている。

36. People Metrics

@PeopleMetrics

PeopleMetrics

PeopleMetrics社は、顧客や従業員のエクスペリエンスを開発するためのソフトウェアプラットフォームを提供するエクスペリエンスマネジメント企業です。同社のお問い合わせページへのリンクは、ウェブサイトの上部に目立つように設置されており、簡単にアクセスできるように専用のボタンが用意されています。このフォームにはCAPTCHAチェックが埋め込まれており、人間のアクセスを確認し、受信箱にスパムの問い合わせが殺到するのを防ぐのに役立っています。

37. ピクスタ

ピクスタ

ピクスタ

Pixpaは、フォトグラファーやその他のクリエイティブプロフェッショナルのための、没入型ポートフォリオサイトを作成するためのウェブデザインプラットフォームです。Pixpaのウェブサイトには、1つの問い合わせフォームがあり、ユーザーはメッセージのテーマに応じて6つの具体的なトピックから選択します。また、お問い合わせフォームには、「1営業日以内に回答する」という短いメッセージが添えられており、サイト訪問者がメッセージを迷子にすることがないように配慮されています。

38. パワー・ファクト

パワー・ファクト

Power-Factは、インドに拠点を置く電力機器のソリューションプロバイダーです。カスタマイズされたソリューションを提供しているため、ウェブサイトでは価格を表示せず、お問い合わせフォームに誘導しています。また、お問い合わせフォームには、緊急のサービスリクエストがあった場合に、メッセージの優先度を上げるオプションも用意されています。

39. ロッカティー

ロッカテッシュ

ロッカティー

Rockateeでは、Tシャツのほか、ドリンクウェアやオーナメントなどのユニークなギフトをウェブサイトで販売しています。不必要な問い合わせを避けるための最良の方法の一つは、ウェブサイトを通じてお客様にできるだけ多くのセルフサービス情報を提供することです。Rockatee社では、お問い合わせフォームの横によくある質問を掲載し、メッセージを送信する前に訪問者が質問に対する答えを直接見つけられるようにしています。

40. Scribd

@scribd

Scribd

Scribdは、雑誌、書籍、オーディオブックなどのデジタル出版物を提供する人気の購読プラットフォームです。Scribdのウェブサイトにあるお問い合わせフォームでは、コミュニケーションの種類に応じて7つのカテゴリーから選択する必要があります。これらの選択肢は、訪問者を適切なテーマに誘導し、連絡方法の詳細を指示するのに役立ちます。

41. ソーシャル・スナック

ソーシャル・スナック

ソーシャル・スナック

デジタルマーケティンググループのSocial Snackは、メインのナビゲーションバーに「お問い合わせ」タブを配置し、簡単に見つけられるようにしています。そのタブをクリックすると、読みやすいダークグレーの背景の洗練されたポップアップが開きます。各地域の連絡先情報を提供しており、フォーム自体も非常にシンプルで数秒で入力できます。

42. トリオンデザイン

@trionn_design

トリオンデザイン

Trionn Designは、インドのウェブサイトおよびブランディングのデザイン会社で、洗練されたモダンなテーマを採用しています。お問い合わせページをスクロールすると、様々なアニメーションが表示され、企業の連絡先情報がボックスに表示されます。このページの下部にあるコンタクトフォームでは、名前、会社名、Eメール、電話番号、そして訪問者の質問やコメントを入力します。

43. チューン

@tune

チューン

SaaS型マーケティングプラットフォーム「TUNE」を開発したチームは、使いやすいお問い合わせフォームを備えた魅力的なウェブサイトを見事に作り上げました。お問い合わせページには、ソフトウェアのデモや提供している追加コースへのリンクも用意されています。また、お問い合わせフォームに記入する代わりに、提供されているメールアドレスを使って営業チームやサポートチームに直接連絡することもできます。

44. ウルトラノワール

@ultranoir

ウルトラノワール

Ultranoirはフランスを拠点とするデジタルマーケティング会社で、クライアントにカスタマイズされたウェブ体験を提供しています。Ultranoir社のウェブサイトでは、その専門性が発揮されており、音声やグラフィック効果を用いてユーザーをウェブページに誘導しています。お問い合わせフォームには、一般的な質問、プロジェクト、求人への応募など、3つの選択肢が用意されています。

45. アンダーベリー

@underbelly

アンダーベリー

Underbellyは、ソルトレイクシティを拠点とするデジタルマーケティングエージェンシーです。メインメニューからコンタクトフォームにアクセスすることができ、新規プロジェクト、雇用機会、パートナーシップに関する問い合わせを簡単に行うことができます。新規プロジェクトの問い合わせでは、基本的な連絡先、予算の見積もり、そしてUnderbellyチームが解決できる具体的な問題の説明を求めるだけです。

46. Vanila.io

@vanila_io

Vanilla.io

フロリダに拠点を置くウェブデザイン会社Vanilaのウェブサイトには、同社のウェブサイトの主要な情報がすべて盛り込まれた情報満載のランディングページがあります。サービスやソフトウェア、チームに関する情報をスクロールしていくと、お問い合わせフォームが表示されます。メインのランディングページにお問い合わせフォームを埋め込むことで、お問い合わせ情報の視認性を高め、フォームへのエンゲージメントを向上させることができます。

47. 波長

右波長

波長

波長は、オーストラリアのコンサルティング会社で、政府機関や非営利団体のためのリサーチやビジネスプランを中心に活動しています。ウェブサイトのお問い合わせフォームでは、スペースを取らずに適切な量の情報を提供しています。また、お問い合わせフォームの横には、2時間の無料コンサルティングセッションに興味のある方への明確なコールトゥアクションが記載されています。

48. イエティ

@Yeticoolers

イエティ

全米で人気の高いYeti Coolersのコーポレートサイトは、アウトドアの雰囲気がよく出ています。サイトを訪れた人が簡単にアクセスできるように、ランディングページにはメールサポートやニュースレターの登録フォームへのクイックリンクを設けています。お問い合わせページをクリックすると、7つのセクションに分かれたリストが表示され、探している情報を簡単に見つけることができます。

49. Yummygum

@yummygum

Yummygum

Yummygumはアムステルダムのデジタルエージェンシーで、企業のアイデアをすぐに使える製品にするためのサポートを行っています。Yummygumのメインナビゲーション画面には、お問い合わせボタンがあり、簡単に見つけられます。このボタンをクリックすると、読みやすいポップアップが表示され、ガイド付きのお問い合わせフォームと、ソーシャルメディア、電話、Eメールの連絡先へのリンクが表示されます。

50. Zendesk

@zendesk

Zendesk

Zendeskは、あらゆる規模のビジネス向けにサービスやセールスツールを提供する、有名なカスタマーサポートプラットフォームです。サービスを提供する企業として、質の高いオムニチャネル・サポートを重視しており、お問い合わせフォームも例外ではありません。訪問者は、ウェブサイトのメインページから見えるチャットボットを使ってサポートを受けることも、セールスやテクニカルサポートの問い合わせフォームに直接アクセスしてサポートを受けることもできます。

視覚に訴える機能的なお問い合わせフォームを簡単に作成する方法をお探しですか?ShareThis は、POWR社と提携し、同社のウェブサイト用ポップアップビルダーを、ShareThis プラットフォームを通じてパブリッシャーに直接提供しています。お問い合わせフォーム フォームビルダー コーディング不要で、あなたのウェブサイトにコンタクトフォームを作成し、カスタマイズすることができます。

についてShareThis

ShareThis は、2007年以来、ソーシャルシェア、インタレスト、インテントのデータを統合することで、グローバルなデジタル行動の力を引き出してきました。300万以上のグローバルドメインにおける消費者の行動をもとに、ShareThis は、実際のデジタルデスティネーションにおける実際の人々の行動をリアルタイムに観察しています。

ニュースレターを購読する

最新のニュース、ヒント、アップデートを入手する

登録

関連コンテンツ