問い合わせフォームのデザイン8選！コピペで使えるhtml・CSSやテンプレートを紹介

お問い合わせフォームは、コンバージョンにつなげるための重要な役割を果たします。

そのため、お問い合わせフォームを最後まで入力してもらえるよう、ユーザーが使いやすいデザインを心がけなければなりません。

今回の記事では、デザイン迷った方に向けてコピペして使えるお問い合わせフォームのhtmlを紹介します。コピペしてそのまま貼り付けてコーディング可能です。

問い合わせフォームで必要不可欠なEFOについても解説しますので、自社のフォームデザインを考える際に役立ててください。

デザインが魅力的な問い合わせフォームを作成したいなら、フォーム作成ツール「formrun（フォームラン）」もおすすめです。

「formrun（フォームラン）」は、以下の特徴があります。

▼ formrunはノーコードでもHTML・CSSを利用してもフォームを作成できます。
ノーコードの場合はマウスだけの簡単な操作中心でフォームが作成できるため、フォーム利用までに準備期間が短い場合にも役立ちますのでぜひformrun をご検討ください。
回答データの管理やメール送信など豊富な機能とセキュリティ対策であなたのフォーム環境構築をサポートします。

▼formrunのお問い合わせテンプレートを利用したい方はこちら
>> formrunテンプレート一覧

▼formrunについて知りたい方はこちら
>> フロントエンド開発だけで自由にフォームが作れるヘッドレスフォーム

コピペで使える！シンプルな問い合わせフォームのデザイン4選

以下より、シンプルかつこだわりのあるお問い合わせフォームのデザインを4つ紹介します。

▼よりデザイン性の高い魅力的なフォームを作成したい方は、こちらをご覧ください。

例1：シンプルでもフォントの工夫でおしゃれな問い合わせフォーム

  See the Pen   Contact Form by Aina Requena (she/her) (@ainarela)   on CodePen.

シンプルな問い合わせフォームはテキストのフォントを工夫することでおしゃれな印象を与えられます。

英字テキストであれば「Georgia」や「Times New Roman」がシャープかつスタイリッシュでおすすめです。

例2：見出し設定をつけた問い合わせフォーム

  See the Pen   Contact Form by George Arnall (@georgearnall)   on CodePen.

左上の「Contact Form」は見出し設定がされているテキストです。

ホームページのデザインにこだわりすぎると、ユーザーの現在いるページがどのページなのかわからなくなってしまう場合があります。

問い合わせフォームのページであることを明示すること、離脱率を軽減できます。

例3：角丸加工した問い合わせフォーム

  See the Pen   contact form by Tim (@TimQuincey)   on CodePen.

問い合わせフォームの多くは表組で構成されています。
表組は視線誘導しやすい手法であるものの、形状が真四角なフォームは無機質な印象を与えがちです。

真四角の角を丸くすることで優しい雰囲気の問い合わせフォームができあがります。

例4：パステルカラー×角丸の問い合わせフォーム

  See the Pen   Angular Contact Form by Katy DeCorah (@katydecorah)   on CodePen.

パステルカラーの色味に合わせて入力フォームの表組の角を丸くすることで、問い合わせフォーム全体の印象をやわらかくしています。

コピペで使える！おしゃれな問い合わせフォームのデザイン4選

以下より、htmlをコピペしてすぐに使えるおしゃれなフォームデザインを紹介します。

例1：色を工夫したおしゃれな問い合わせフォームデザイン

  See the Pen   お問い合わせFormコピペ by Yuya (@yuyaphotograph)   on CodePen.

入力必須項目のアイコンにあえて緑を使った事例です。

必須項目は、ほとんどの問い合わせフォームでは赤や黄色といった警告色を使っています。
警告色はユーザーに焦燥感を与えてしまいかねません。

色彩心理学で「癒し」や「安心」といった意味合いがある緑をあえて利用することで焦燥感に駆られることなく、入力完了まで誘導できます。

  See the Pen   Simple, flat contact form by Zach Saucier (@ZachSaucier)   on CodePen.

黒と赤を組み合わせたクールな印象を与えるお問い合わせフォームデザインです。
赤は膨張色であるため、黒字でもしっかりと視認できる特長があります。

例2：クリックで入力項目が開く問い合わせフォーム

  See the Pen   Contact Form Template by Chris Holder (@see8ch)   on CodePen.

入力項目にカーソルを合わせると自動で入力箇所が開く問い合わせフォームです。
入力すると開いたままになるため、入力忘れなどが発生しません。

例3：入力したくなる問い合わせフォーム

  See the Pen   Contact Me evelope by Camila A Carvajal (@milabear)   on CodePen.

エアメールのアニメーションがおしゃれでかわいい問い合わせフォームです。

入力画面まで2クリックする必要はあるものの、途中で問い合わせ電話番号を表示させる工夫が施されています。

入力が面倒になって電話で問い合わせしたいユーザーに向けた配慮です。

例4：画像を活用した問い合わせフォーム

  See the Pen   Contact Form by Paul Stamp (@paulstamp)   on CodePen.

夕日が背景になっている問い合わせフォームです。
夕日の部分の画像を変更すれば、ブランディングに役立ちます。

▼ formrunはノーコードでもHTML・CSSを利用してもフォームを作成できます。
ノーコードの場合はマウスだけの簡単な操作中心でフォームが作成できるため、フォーム利用までに準備期間が短い場合にも役立ちますのでぜひformrun をご検討ください。
回答データの管理やメール送信など豊富な機能とセキュリティ対策であなたのフォーム環境構築をサポートします。

formrunのお問い合わせテンプレートを利用したい方はこちら
>> formrunテンプレート一覧

EFOを重視した問い合わせフォームのデザインとは？

どれだけおしゃれな問い合わせフォームを作ったとしても、ユーザーの使いやすさを無視すれば本来の目的である「反響の獲得」にはつながりません。

問い合わせフォームを作成する際には、EFOを意識したデザインが必要です。以下よりEFOについて解説します。

EFOとは

EFOとは、「入力フォーム最適化」のことで、入力フォームからユーザーが離脱するのを防止するための施策です。

送信する際のエラーや、項目数が表示されていない、ブラウザを間違えて閉じてしまうなど、
フォームにまつわるよくある上記のようなストレスが原因でフォームから離脱するユーザーは7割を超えると言われています。

それらの離脱を防ぐため、回答者が便利にフォームを利用できる取り組みとして、残項目数表示や、ページ分割機能、入力途中保存、リアルタイムでのエラー表示機能などがあります。
そのためユーザーは、「自分の入力内容に間違いがないか」「あと何分で完了するか」などを常に把握できるため、回答負担が大幅に減ります。

EFO機能を導入するには約30,000円の費用がかかることが一般的ですが、formrunでは、わずか3,000円〜EFO機能を導入できます。
ぜひformrunでEFO機能を導入し、フォームの通過率が上がる経験をしてみてください。

▼formrunのお問い合わせテンプレートを利用したい方はこちら
>> formrunテンプレート一覧

▼formrunについて知りたい方はこちら
>> フロントエンド開発だけで自由にフォームが作れるヘッドレスフォーム

ユーザーが入力完了しやすい問い合わせフォームのポイント

入力完了しやすい問い合わせフォームを作る際、少なくとも次の6つのEFOはおさえておきましょう。

• 入力必須項目の明記する
• プレースホルダーの活用する
• 住所自動入力で入力の手間を省く
• 半角や全角の切り替え操作を簡略化
• レスポンシブ対応にする
• リアルタイムバリデーションを活用する

以下より具体的に解説します。

問い合わせフォームのより詳しいポイントについて知りたい方は、こちらをご覧ください。
>> 問い合わせフォームの仕組みとは？フォームの基礎知識＆作り方まとめ

入力必須項目の明記する

入力必須項目をわかりやすくするデザインは、ほとんどの問い合わせフォームで使われています。
「入力必須」というアイコンの色を変えて表示したり、「※印」などでわかりやすくしましょう。

ただし、「※印」は見落とされる可能性があるため、「必須」と明記する方がおすすめです。

プレースホルダーの活用する

プレースホルダーとは、入力箇所の欄に薄いフォントで書かれている上書き可能なテキスト例のことです。

どのような内容を入力すればよいか一目でわかり、何を入力していいのかわからないとユーザーが悩むのを防止できます。

住所自動入力で入力の手間を省く

住所自動入力は郵便番号を入力する手法が多く使われています。郵便番号は丁目までの箇所を示す番号です。

細かい番地や建物名だけを入力できるようにしておけば、ユーザー側は面倒と感じさせにくくできます。

半角や全角の切り替え操作を簡略化

入力時に数字や英字、カタカナといった半角と全角がある文字を入力する場合、わざわざ変換する作業はおっくうに感じるものです。

自動的に半角や全角に変換する機能があれば、スムーズに入力できます。

レスポンシブ対応にする

レスポンシブ対応は問い合わせフォームのデザインで必須です。

スマホからの流入も多いため、スマホ画面で問い合わせフォームが見にくい・入力しづらいと離脱される可能性が高くなります。

リアルタイムバリデーション機能を活用する

入力ミスをしていることに気づかずに送信ボタンを押すとエラーが表示されます。

修正しようとした際、入力済みの項目がすべて強制消去されてしまうと、ユーザー離れを引き起こしかねません。

入力ミスを検知したタイミングでエラーメッセージが流れるようにしておけば、離脱率を低下させられます。

また、なぜエラーが生じたのか、どのように修正すればいいのかを表示しておくとさらに親切です。

スマートフォンでも入力しやすい問い合わせフォームのポイント

スマホユーザーが入力しやすい問い合わせフォームにするためには、スマホ入力に対応したEFOが必要です。

スマホ入力に対応した問い合わせフォームのEFOには、次のようなものがあります。

• デバイスに応じて適正な大きさに変化させる
• ラベルと入力欄を1列にする
• 左右のスクロールバーが出ないようにする

デバイスに応じて適正な大きさに変化させる

スマホやタブレットは入力しづらいのがデメリットです。
入力箇所のサイズが小さいと入力ミスが発生しやすくなり、ユーザビリティに影響します。

入力しやすいサイズに変化させる機能はレスポンシブ対応で必須な機能です。

また、デバイスごとにフォントサイズやテキスト・コンテンツの自動改行、画像の拡大縮小が自動で行われることで、より見やすく・入力しやすい問い合わせフォームになります。

ラベルと入力欄を1列にする

ラベルと入力欄は縦1列になるようにデザインしましょう。
スマホの場合、入力箇所のサイズによっては2列になることがあります。

見にくく、入力時に混乱することがあるため、1列配置になるようにしましょう。

左右のスクロールバーが出ないようにする

スマホの小さな画面で、左右のスクロールバーが出るほどページのサイズを大きくしてしまうと、ユーザーにストレスを与えてしまいます。

スクロールバーが出ないように、入力欄のサイズを調整しましょう。

問い合わせフォームの作成ならフォーム作成ツール「formrun」がおすすめ！

formrunには予約フォームに活用できる以下の特徴があります。formrunを利用するメリットは下記の3点です。

• お問い合わせフォーム作成が簡単にできる
• 顧客管理・対応を効率化できる
• EFO（フォーム最適化）で回答者の離脱を防げる

お問い合わせフォーム作成が簡単にできる

非エンジニアでもマウスだけの簡単な操作中心でフォームが作成できるため、フォーム利用までに準備期間が短い場合にも役立ちます。

同じフォーム作成ツールのGoogleフォームと比べてもセキュリティ条件が高く、細かい設定まで機能が豊富となっているため、ビジネス利用目的では、formrunのユーザーのうち7割がGoogleフォームから変更しています。

▼メールアドレスがあれば無料登録可能！無期限で無料プランが利用できるのでformrunでぜひフォームを作成してみてください。

テンプレートはこちらをご覧ください。
>> テンプレート一覧

顧客管理・対応を効率化できる

formrun（フォームラン）を活用すれば、フォームで集めた顧客の対応管理まで利用できます。

formrunはフォーム作成はもちろん、フォームに回答された顧客データ情報をフォームラン上で一覧管理が可能です。

一覧で確認できるだけではなく、対応ステータス別に分けて表示したり、対応する担当者別にフィルタして確認できたりします。

未対応・対応中・対応完了・商品発送済みなど、ステータスは自社が管理しやすいように編集・並び替えできます。

蓄積された回答データはExcelやGoogleスプレッドシート形式で出力もできるため、手元で分析も可能です。

さらに、Salesforceやkintoneなど外部連携ツールと連携可能なので普段お使いのツールでも集計・管理ができます。

EFO（フォーム最適化）で回答者の離脱を防げる

送信する際のエラーや、項目数が表示されていない、ブラウザを間違えて閉じてしまうなど、フォームにまつわるよくある上記のようなストレスが原因でフォームから離脱するユーザーは7割を超えると言われています。

それらの離脱を防ぐため、回答者が便利にフォームを利用できる取り組みとして、残項目数表示や、ページ分割機能、入力途中保存、リアルタイムでのエラー表示機能などがあります。

そのためユーザーは、「自分の入力内容に間違いがないか」「あと何分で完了するか」などを常に把握できるため、回答負担が大幅に減ります。

EFO機能を導入するには約30,000円の費用がかかることが一般的ですが、formrunでは、わずか3,000円〜EFO機能を導入できます。
ぜひformrunでEFO機能を導入し、フォームの通過率が上がる経験をしてみてください。

使いやすい問い合わせフォームのデザインを目指そう

問い合わせフォームはおしゃれだけではなく、ユーザーが入力完了しやすい利便性の高いデザインが求められます。

使いやすいお問い合わせフォームを作成するには、以下のEFOを意識しましょう。

弊社の「formrun」は専門的な知識がなくても、ユーザーが使いやすいフォームが簡単に作成できます。

ぜひformrunでフォームを作成してみてください。

▼formrunのお問い合わせテンプレートを利用したい方はこちら
>> formrunテンプレート一覧

▼formrunについて知りたい方はこちら
>> フロントエンド開発だけで自由にフォームが作れるヘッドレスフォーム

formLab編集部

formrunやフォーム作成や顧客管理に関する情報を発信しております。

EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。