AI要約
ウェブサイトのコンタクトフォームデザインのインスピレーションをお探しですか？簡単な調整で、希望どおりのオンラインフォームを作成できます。
この記事では、クールなコンタクトフォームデザインの例をいくつか紹介し、ウェブサイトで作成するための役立つヒントを提供します。
また、フォームのレイアウトを変更するための非常に便利なノーコード方法も紹介します。準備はいいですか？始めましょう！
盗める8つのコンタクトフォームデザイン
それでは、クールな例と、それらをサイトでインスピレーションを得て再現するために使用される主要な戦術を見ていきましょう。
1. WPForms
WPFormsのコンタクトページから始めたいと思います。これは、SaaS製品、プラグインウェブサイト、その他の小規模ビジネスにとって優れた例だと考えています。
このページの最上部は2つの部分に分かれています。1つは技術的な質問がある既存のお客様向け、もう1つは販売前のお問い合わせ向けです。
こちらも読む： フォームフィールドの複製を訪問者に許可する方法
このコンタクトフォームが際立っていると思う理由
コンタクトフォームはすぐに表示されず、「基本的な質問があります」セクションの下にある「フォームを完了する」ボタンをクリックしたときにのみ表示されます。
このデザインにより、ページサイズが最小限に抑えられ、新規の見込み客が主にフォームを使用することが保証されます。これは販売前セクションからのみアクセスできるためです。
この戦略は、ユーザーを適切なセクションに迅速に誘導し、ビジネスと連絡を取る個人の両方にとってプロセスを合理化するのに役立ちます。
ページの最下部には、WPForms VIP Circleに参加するように訪問者を招待するソフトなコールアウトもあり、これは、連絡フローを混雑させることなく、コミュニティへの参加を促すための、プレッシャーの少ない良い方法です。
このように連絡先ページを作成する方法
- ポップアップコンタクトフォーム：特定のボタンをクリックしたときにのみポップアップ表示されるコンタクトページをデザインします。これにより、ページがすっきりと保たれ、インタラクションが必要になるまで他の要素が強調されます。
- カスタマーサポート向けナレッジベース：WordPressサイトにウィキまたはナレッジベースを実装します。これは、既存のお客様向けのセルフヘルプエリアとして機能し、一般的な質問や問題に対処します。
- テンプレートの使用：フィードバック、マーケティング、ビジネスオペレーションなど、さまざまな目的で2,100以上のWordPressフォームテンプレートから選択します。これらのテンプレートは、プロフェッショナルな見た目と機能的なフォームを迅速にセットアップするのに役立ちます。（特別な状況では、これらの隠しWPFormsテンプレートも試してください）。
- フォームの翻訳：英語以外の話者や多言語のオーディエンスに対応するウェブサイトの場合、WPFormsを使用すると、多様な言語ニーズに対応するためにコンタクトフォームを簡単に翻訳できます。
2. Stripe
Stripeのセールスコンタクトページに焦点を当てることにしました。これは、ビジネスの問い合わせを効率的に処理する専門的なコンタクトページの良い例だからです。
コンタクトフォームを短く見せるために、Stripeはコンタクトページでマルチステップフォームを使用しており、これによりフォームの放棄率が確実に低下します。
このお問い合わせページが際立っていると思う理由
このコンタクトフォームがユニークなのは、Stripeのセールスチームに関連する情報の収集に焦点を当てていることです。最初に仕事用メールアドレスと国/地域を尋ねて情報をキャプチャするマルチステップフォームアプローチを使用しています。
続行ボタンをクリックすると、Stripeの問い合わせフォームは、貴社とStripeがどのように役立つかを十分に理解することを目指します。
事業規模、収益、統合ニーズについて質問することで、問い合わせを最も適切な担当者にルーティングできるようになります。
このように連絡先ページを作成する方法
- WPFormsリードフォームアドオン：ページ分割フィールドまたはリードフォームアドオンを使用して、フォームを個別のセクションに分割します。
- 関連情報に焦点を当てる：営業チームにとって最も役立つ潜在顧客に関する情報を検討してください。
- シンプルに保つ：フォームフィールドが多すぎてユーザーを圧倒しないでください。リードを絞り込むために必要な必須情報のみを質問してください。
- 明確なラベルと指示：各フィールドに明確で簡潔なラベルを使用し、混乱を避けるために必要な指示を提供してください。
3. Legalia
Legalia Corpの「お問い合わせ」ページの連絡先フォームは、同社とクライアント間のシームレスなコミュニケーションを促進するために設計された、よく考えられたインターフェイスです。
このページで際立っているのは、左側に場所の明確さを提供するための地図、右側に構造化された連絡先フォームを備えたマルチカラムレイアウトです。
このコンタクトフォームが際立っていると思う理由
マルチカラムレイアウトの使用は、フォームを2つの異なるセクションにきれいに分割するため、特に効果的です。
これにより、ユーザーは地理的な情報と連絡先フィールドを視覚的に分離できます。これは興味深いアプローチです。
地図を含めることで、会社を簡単に見つけることができるだけでなく、ビジネスの正当性とアクセシビリティも高まると思います。
フォーム自体も非常にわかりやすく、ユーザーを圧倒することなく必須情報を求めています。
このように連絡先ページを作成する方法
- レイアウトの計画：まず、ユーザーインターフェイスとデザインの美学のバランスをとるレイアウトを決定することから始めます。分割レイアウトは、同じページに情報を保持しながら、さまざまな情報タイプを視覚的に分離するのに非常に効果的です。
- 地図の組み込み：あなたのビジネスに物理的な場所がある場合は、連絡先ページに地図を埋め込むことで、ユーザーの信頼を大幅に高め、場所を見つけるプロセスを簡素化できます。Googleマップなどのツールを使用して簡単に統合できます。
- フォームの簡素化：潜在的な連絡先を思いとどまらせないように、フォームフィールドを最小限に抑えてください。名前、メールアドレス、簡単なメッセージボックスなど、最も重要な情報のみをリクエストしてください。これは非常に十分だと思います。
4. Search Engine Journal
Search Engine Journalの「お問い合わせ」ページの連絡先フォームは、さまざまなユーザーのニーズに対応する包括的な機能により際立っています。
このフォームには、セキュリティのためのキャプチャ、ファイルアップロードオプション、クエリのカテゴリ分けなどの高度な機能が組み込まれています。
このコンタクトフォームが際立っていると思う理由
私が指摘したいのはカテゴリ分けです。SEJは、広告について書いているのか、技術的な問題について書いているのか、それ以外について書いているのかを事前に尋ねます。
その単一のドロップダウンはおそらく、メッセージがいずれかの受信トレイに届く前にルーティングが行われるため、チームのトリアージ時間を大幅に節約するでしょう。
CAPTCHAは、スパムの量を減らすという、退屈だが不可欠な仕事をしています。そうでなければ、SEJのようなトラフィックのあるサイトはボットに攻撃されます。
そして、ファイルアップロードフィールドは、パブリッシャーが受け取る可能性のあるスクリーンショット、ピッチデッキ、場合によっては記事の下書きなどの提出に本当に役立ちます。
このように連絡先ページを作成する方法
- セキュリティ機能の実装: WPFormsを使用したCAPTCHAのようなセキュリティ対策を含め、サイトをスパムや悪用から保護し、コミュニケーションの整合性を維持するのに役立ちます。
- ユーザーエクスペリエンスに焦点を当てる:ユーザーを念頭に置いてフォームを設計します。混乱を避けるために、ナビゲートが簡単で、フィールドに明確にラベルが付けられ、指示がわかりやすいことを確認してください。ユーザーのクエリのカテゴリ分けには、ドロップダウンフィールドを使用してください。
- ファイルアップロードフィールドを追加する: 問い合わせてくる人に、問い合わせにフィールドを添付する機会を与えたい場合は、WPFormsを使用してフォームにファイルアップロードフィールドを追加することができます。これは非常に使いやすいです。
WordPressフォームにCAPTCHAを設定しましょう！:)
5. Marvel
Marvelは、連絡先フォームに右側に画像付きのマルチカラムレイアウトを使用しているソフトウェアデザイン会社です。デザインはクリーンでモダンで、ユーザーが必要な情報に手間なくアクセスできることを保証します。
このコンタクトフォームが際立っていると思う理由
マルチカラムデザインが、この連絡先フォームを本当に際立たせ、すっきりとしたゆったりとした感覚を与えています。
これにより、ユーザーはページをすばやくスキャンし、大量のテキストをふるいにかけることなく、必要なものを正確に見つけることができます。
フォームの右側にある画像は、見た目が美しいだけでなく、Marvelのビジネスにも関連しており、デザインへのコミットメントを示しています。
このように連絡先ページを作成する方法
- マルチカラムレイアウト:まず、ユーザーインターフェイスとデザインの美しさを両立させるレイアウトを決定します。マルチカラムレイアウトは、同じページに情報を保持しながら、さまざまな情報タイプを視覚的に分離するのに非常に効果的です。
- 戦略的な画像の使用:ブランドを反映し、ページの目的に関連する画像を選択します。連絡先フォームに画像を追加すると、全体的により魅力的でインタラクティブに見せることができます。
6. Medium
Mediumの連絡先エクスペリエンスは興味深いものです。なぜなら、それは実際には連絡先フォームではないからです。まずヘルプセンターであり、必要なものが見つからない場合にのみ、リクエストを送信するオプションが表示されます。
ページには、人気のヘルプトピック、検索、FAQへの直接リンクが表示されます。まず、どのようなヘルプが必要かをカテゴリ分けできます。
このお問い合わせページが際立っていると思う理由
Mediumの連絡先ページには通常、ユーザーが問い合わせをカテゴリ分けできるドロップダウンメニューまたはチェックボックスが含まれています。多くのヘルプセンターでは、フォーム送信を許可する前に、よくある質問や関連記事へのリンクが提供されています。
しかし、ページにおける主な欠点は、Mediumには問い合わせフォームがないことです。これは、サポートチームに緊急に連絡する必要があるユーザーにとっては、不満の原因となります。
このように連絡先ページを作成する方法
- セルフヘルプオプションを組み込む： 連絡先ページをナレッジベースと統合します。ユーザーの選択や入力に関連する記事やFAQへのリンクを提供し、問い合わせを解決できる可能性があります。
- それでもフォームを表示する： サポートが必要な実際のケースが諦めてしまうほど、フォームを奥深くに埋めないでください。「それでもヘルプが必要です」という目立つリンクを一番下に表示するのは、安全弁のようなものです。
7. White Frontier
White Frontierはスイスのクラフトビール醸造所で、その連絡先ページでは背景画像の上に透明なフォームを重ねています。シンプルな白いボックスに収まらない連絡先フォームが必要な場合は、このパターンを参照してください。
このお問い合わせページが際立っていると思う理由
透明なフォームは、ページのブランドのビジュアルパーソナリティを維持します。巨大な灰色のフォームコンテナのために、背景の写真を失うことはありません。ライフスタイル、ホスピタリティ、食品・飲料、またはブランドイメージが重視されるあらゆる分野では、それが重要です。
背景画像は、読みやすいテキストをサポートする必要があります。そうでないと、フォームが読めなくなります。White Frontierは暗くしたビールの写真を使用しており、白いフォームラベルに十分なコントラストを与えて読みやすくしています。このパターンを忙しい写真にコピーする場合、読みやすくするためにはオーバーレイが必要になります。
このように連絡先ページを作成する方法
- CSSでスタイルを設定： WPFormsでは、ブロックエディターから直接、コンテナ、背景、フィールドのスタイルを調整できます。CSSは不要です。完全にカスタムな外観については、CSSでフォームをスタイリングする初心者向けガイドをご覧ください。
- テキストをサポートする背景を選択する： 低コントラストの写真、またはダークオーバーレイが適用された写真のいずれかです。モバイルでテストしてください。モバイルでは、背景は通常デスクトップとは異なる方法でトリミングされます。
- スタイルを保存して再利用する： スタイル設定を調整したら、ブロックエディターが生成したCSSをコピーして、サイト上のすべてのフォームで再利用し、デザインの一貫性を保ちます。
8. HubSpot
HubSpotの連絡先ページでは、同じページで複数の連絡方法を提供しています。営業フォーム、営業チャット、電話番号、およびサポートナレッジベースへのリンクです。
これは、購入者と既存顧客でニーズが大きく異なり、どちらのグループにも後回しにされていると感じさせたくない場合に適切なパターンです。
このお問い合わせページが際立っていると思う理由
HubSpotは、まず連絡をルーティングの問題として扱います。ページは、実行したいこと（営業に話す、サポートに話す、デモを入手する、リソースを見つける）で整理されており、各オプションには明確な行動喚起があります。すべての人に役立つことを装った単一の巨大なフォームはありません。
営業チャットは営業フォームの横に配置されており、一部の購入者は詳細な問い合わせを入力したいと考えており、一部の購入者はコミットする前に簡単な質問をしたいと考えていることを静かに認識しています。両方を提供することは冗長ではなく、スペクトルをカバーしています。
小規模なビジネスにとっては、これはやりすぎかもしれません。しかし、その原則はスケールダウンできます。小さなサイトであっても、連絡フォームが読み込まれる前に、「購入したい」と「購入したものに関するヘルプが必要」を区別することで、どちらのフローもより良いものになります。
WordPressで再現する方法
- タブまたはグループ化されたチャンネル：タブ付きブロックまたはCTAカードのシンプルなグリッドを使用して、訪問者が自分のパスを選択できるようにします。各カードは独自のフォームまたはページに移動します。
- 意図別の異なるフォーム：営業担当者向けの営業担当者向けフォームと、注文番号や製品名が含まれるサポートリクエストフォームを用意します。それらをマージしないでください。
- フォームの近くに代替手段を表示：電話番号、メールアドレス、チャットリンク。一部の訪問者は常にフォームをスキップすることを好みます。代替手段を提供することで、フォームの送信を損なうことなく、フラストレーションを軽減できます。
お問い合わせフォームのデザインをカスタマイズする方法
開始する前に、WPFormsがWordPressサイトにインストールおよびアクティブ化されており、ライセンスが確認されていることを確認してください。
次に、新しいフォームを作成し、そのフォームをページまたは投稿に追加します。ブロックエディターでは、フォームをクリックしてWPFormsブロックの追加のスタイリングオプションを開きます。
WPFormsブロックの設定でCSSを記述することなく、カラーテーマ、フォームフィールド、ラベル、ボタン、コンテナ、および背景スタイルを変更できます。
- テーマ設定で定義済みのカラーテーマを選択することで、フォームのフィールド、ラベル、ボタン、コンテナ、および背景のスタイルを変更できます。
- フィールドスタイルセクションでは、フォームフィールドのサイズ、境界線、境界線の太さ、境界線の半径、および色を調整するオプションがあります。
- ラベルスタイルセクションでは、フォームラベルのサイズと色を変更できます。利用可能なサイズオプションには、小、中、大があります。
- ボタンのスタイルでは、ボタンのサイズ、色、境界線、境界線の太さ、境界線の半径、および境界線のスタイルを変更できます。
- コンテナのスタイル設定では、フォームのコンテナの周りの境界線の色、影、パディング、スタイル、サイズ、および半径を変更できます。
- 背景スタイル設定では、フォームの背景画像と色を制御して、フォームにブランドの雰囲気を与えることができます。
連絡フォームのスタイル設定が完了したら、詳細タブをクリックします。ここでは、追加したすべてのスタイルを含むCSSコードをコピーできます。
新しいフォームを作成するたびに、コードスニペットを貼り付けるだけで、フォームのデザインは前のフォームのスタイルを使用します。
同様に、既製のテンプレートを使用してメール通知をデザインすることもできます。これは、すべてのコミュニケーションチャネルでブランドをレベルアップするための優れた方法です。
すべてのデバイスで完璧な明瞭さと応答性を確保するために、メール（およびウェブサイト）に適切なサイズのロゴを追加してください。
お問い合わせフォームのデザインに関するよくある質問
お問い合わせフォームのデザインは、私が最もよく尋ねられるトピックの1つです。ここでは、繰り返し尋ねられる質問への回答を示します。
優れたお問い合わせフォームのデザインとは？
優れたお問い合わせフォームのデザインは、訪問者が許容できる最小限のフィールドに抑え、すべての入力を明確にラベル付けし、サイトの他の部分と調和し、送信ボタンをわかりやすい場所に配置します。視覚的なスタイルは、その周囲の構造的な選択よりも重要度が低いです。
お問い合わせフォームにはいくつのフィールドが必要ですか？
ほとんどの中小企業のお問い合わせフォームでは、3〜5フィールドが最適です。「名前」、「メールアドレス」、「メッセージ」が基本です。さまざまな種類の問い合わせを処理する場合は、「件名」または「問い合わせ種別」のドロップダウンを追加し、実際に電話をかけ直す場合にのみ「電話番号」フィールドを追加します。
WPFormsをカスタマイズできますか？
はい、WPFormsはコードなしでカスタマイズできるように構築されています。WordPressのブロックエディターで、フィールドのスタイル、ラベルのスタイル、ボタンのスタイル、コンテナのスタイル、背景を直接調整できます。より深い変更については、カスタムCSSを貼り付けたり、独自のフォームテンプレートを作成したりすることもできます。
お問い合わせフォームをカスタマイズするにはどうすればよいですか？
WPFormsのフォームビルダーで、テンプレートを選択するか、ゼロからフォームを作成することから始めます。必要に応じてフィールドを追加、削除、並べ替えます。次に、フォームビルダーでラベル、プレースホルダー、フィールドサイズを調整し、ブロックエディターのスタイリングコントロールを使用して、ブランドに合った色と形状を設定します。
WordPressでお問い合わせフォームをスタイル設定するにはどうすればよいですか？
WPFormsとWordPressのブロックエディターは、ほとんどのフォームのスタイル設定をコードなしで処理します。まず、事前に構築されたカラーテーマを選択し、次にブロックエディターでフィールド、ラベル、ボタン、背景を微調整します。ユニークなデザインについては、カスタムCSSをフォームブロックに貼り付けます。
WordPressでフォームのデザインを変更するにはどうすればよいですか？
編集したいフォームをWPFormsで開き、フォームビルダーでレイアウトとフィールドの配置をカスタマイズし、ブロックエディターでビジュアルスタイルをカスタマイズします。詳細なスタイル設定については、ブロックエディターのテーマ、フィールド、ラベル、ボタン、背景コントロールを使用します。
次に、フォームの周りに優れたお問い合わせページを作成します
ここで説明したすべてをまとめる準備ができている場合は、優れた「お問い合わせ」ページを作成するためのガイドで、フォーム自体を取り囲むサポート要素（見出し、信頼シグナル、代替チャネル）を説明します。
まだフォームを作成していない場合は、WPFormsのシンプルな連絡先フォームテンプレートが最も早く始められます。そこから約5分でWordPressでシンプルな連絡先フォームを作成できます。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
