21 ベストお問い合わせページ (例) 2023

公開: 2023-01-13

最高のお問い合わせページをチェックして、自分で最高のものを作成するためのインスピレーションを得たいですか?

ウェブサイトやブログに最適な連絡先セクションを作成する方法はたくさんあります。

いくつかの「ルール」はありますが、やりたいことに制限はありません。

たとえば、連絡先フォームは一般的な方法ですが、クリック可能な電子メールと電話番号のみを追加することもできます.

さらに、あなたの場所を表示するためのGoogleマップの統合は便利ですが、完全な住所のみを追加するものもあります.

あなたのやり方でやってください！

しかし、これらの例は間違いなくあなたの旅に役立つでしょう.

お問い合わせページの印象的な例

1.カルト

ビルド: Uncode テーマ

最初に、このページをより高級に見せる暗いデザインに気付くでしょう。さらに、「Say Hello!」とてもキャッチーで、Cult の連絡先ページとよく合います。

驚いたことに、彼らは連絡フォームを使用していませんが、クリック可能な電子メールと電話番号、および Google マップの場所へのリンクがあります。

注:クールなアニメーションを使用して、お問い合わせページにいることを訪問者に知らせます。

ところで、広範な Uncode テーマのレビューをお見逃しなく。

2.ヤミーガム

構築: Dato CMS

Yummygum のページは軽くてクリエイティブですが、それでもミニマルな外観を目指しています。タイトルテキスト、彼らがあなたのためにそこにいるという簡単な説明、対照的な背景色の連絡先フォームがあります。

さらに、一般的なお問い合わせフォームを使用する代わりに、Vince に直接アクセスすることもできます。これにより、より個人的な体験が生まれます。

Google マップの代わりに、カスタム 3D マップを使用して場所を紹介しています。

注:チームメンバーの 1 人の連絡先の詳細を追加して、お問い合わせプロセスをより個人的なものにしてください。

3. チャールズ

で構築: ギャツビー

チャールズは、連絡先ページにも暗いデザインを使用しています. また、複数のオフィスがあるため、3 つのセクションに分割し、各オフィスのビジネスと連絡先の詳細 (「地図で見る」など) を示しました。

一方、フッターは軽く、ページにダイナミックな印象を与えます。

注：複数のオフィスも運営している場合は、チャールズの戦略をコピーしてください。

4. ブランドフェア

ビルド: Yii

Brandaffair には、ホバー効果アニメーションを備えたキャッチーなヒーローイメージと、メニューリンクとソーシャルアイコンを備えた透明なヘッダーがあります。

連絡先ページの後半は 3 つのセクションで構成されています。 Google マップ、お会いして提案してください。

注:お問い合わせページは楽しくてプロフェッショナルなものにして、退屈すぎないようにしてください。

5. ベースキャンプ

で構築: Squarespace

Basecamp は、連絡先/サポートページでシンプルさと独自性をうまく組み合わせています。彼らは、タイトルと追加のテキストを使用して、どれだけ早くあなたに返信するかについての情報を使用します (本当に 6 分?!)。

お問い合わせフォームにはドロップダウン付きの複数のフィールドがあるため、メッセージは適切な部門の手に届きます。

注:件名の選択/連絡の理由のドロップダウンを使用して、電子メールを分析します。

より素晴らしい Squarespace Web サイトの例をご覧ください。

6.バンブル

で構築: Squarespace

Bumble は複数のリンクと連絡先オプションを使用しているため、ユーザーエクスペリエンスが向上しますが、同時に生活がずっと楽になります。なんで？ヘルプは支援者、PR 対 PR 担当者、広告対広告担当者などに行きます。

また、連絡先フォームがポップアップで開くので、ユーザーは現在のページを離れる必要がありません。

注:ユーザーに複数の連絡先オプションを提供して、適切な部門にクエリを送信します。

7.マーベル

で構築:ギャツビー

Marvel のお問い合わせページでは、明るい背景にブルーのディテールが使用されており、ブランドとうまく調和しています。折り目の上に連絡フォームがあるので、簡単にアクセスできます。

さらに、販売、サポート、プレスキット情報など、特定の何かを探しているすべての人のための 2 番目の連絡先セクションもあります。

注:スクロールせずに見える位置に連絡先フォームを追加して、ユーザーがスクロールして検索する必要がないようにします。

8.坂東

構築: Shopify

Bando は、シンプルなデザインのクールで楽しい連絡先ページを運営していますが、ビジュアルとテキストによって創造性が追加されています。

件名を書くことは常に最も難しいことであるため、このフォームではトピックの選択にドロップダウンを使用しています。

また、電話番号や営業時間も表示されます。しかし、彼らはまた、連絡先ページを使用して、ニュースレターの購読フォームに忍び込みます。

注:連絡先ページはメールの収集にも役立つことを忘れないでください。

9. ドーナツタイム

構築: Shopify

連絡先フォームの代わりに、Donut Time には 4 つのセクションがあり、クリック可能な 4 つのメールがあるため、人々と簡単に直接連絡を取ることができます。

さらに、彼らは追加のセクションを使用して機会をつかみ、メールと引き換えに割引を提供します.

注:お問い合わせページであっても、フォームを介して訪問者に割引コードを提供してください。

10. インパクト

構築: Hubspot CMS

Impact のユニークな点は、連絡先ページでビデオを使用していることです。このビデオは、連絡先フォームに対処し、フィールドに記入することで、より快適に感じられるようにします。

さらに、見栄えを良くするために、アコーディオンを備えた FAQ セクションもあります。

注:ホームページでビデオを使用して、人々が手を差し伸べた後に次に何が起こるかを知らせませんか。

11.サバイケイト

構築: Webflow

この連絡先ページには 2 つのセクションがあります。スクロールせずに見える領域には、タイトル、テキスト、および簡単な連絡先フォームが含まれています。また、Survicate はスクロールしなければ見えない領域を別の機会として利用し、行動を促す (CTA) ボタンを使用して 3 ステップのプロセスを説明しています。

注:連絡先ページでは、単純な「販売」要素を使用してください。

最高の Webflow Web サイトのリストをぜひご覧ください。