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

お問い合わせフォームは、商品購入や顧客を獲得する重要な役割を果たします。

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

本記事では、コピペして使えるお問い合わせフォームのhtmlを紹介します。お問い合わせフォームの回答率を上げるために、デザインに迷っている方はぜひご参照ください。

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

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

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

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

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

お問い合わせフォームのデザインは、見た目の美しさだけでなく、「入力のしやすさ」も非常に重要な要素です。入力しづらいお問い合わせフォームは、ユーザーにとってストレスとなり、途中で離脱されてしまう原因になります。

そこで注目したいのが、フォームの回答率を高めるデザイン設計です。これは「EFO（エントリーフォーム最適化）」と呼ばれ、フォームの使い勝手を高めて離脱を防ぐことを指します。

ここでは、EFOによるお問い合わせフォームの回答率を高める、以下のポイントを解説していきます。

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

入力必須項目をわかりやすくするデザインは、ほとんどの問い合わせフォームで使われています。

「入力必須」というテキストを目立つ色で記載しましょう。

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

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

フリガナや住所など、ある程度決まった情報を入力してもらう場合は、自動入力機能を活用するのがおすすめです。

ユーザーは必要最低限の情報だけ入力すればいいので、入力負担を大きく減らすことが可能です。

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

自動的に半角や全角に変換する機能があれば、ユーザーの余計な入力作業を減らせます。

入力の正誤をリアルタイムで表示させるリアルバリデーション機能を使えば、送信する前にユーザーに修正を促すことが可能です。

入力ミスで送信時にエラーが発生すると、ユーザーは大きなストレスを感じ、離脱につながってしまいます。

どこの項目でどのように入力ミスをしているか、リアルタイムで表記することで、ユーザーはスムーズに入力を進められます。

途中まで入力した内容が保存されていれば、万が一ユーザーがお問い合わせフォーム画面から一時離脱しても、回答を再開させやすくなります。

お問い合わせフォーム画面を閉じたとしても入力内容が保存されていれば、最後まで回答してもらえる可能性が高まります。

残り項目数が表示されていれば、ユーザーにどれだけ入力する必要があるか把握できるため、回答完了率が向上させれらます。

ただし、入力項目の内容や数によっては、逆効果になる可能性があります。残り項目数の表示有無で回答完了率がどれだけ変化するか、ABテストを実施するのがおすすめです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

お問い合わせフォームを作成したいものの、見た目が良くて入力しやすいデザインに仕上げるにはどうしたらいいか、わからなくて困っている方が多いのではないでしょうか。

弊社のフォーム作成ツール「formrun（フォームラン）」では、120種類以上の業種・目的別テンプレートを用意しています。
お問い合わせフォームのテンプレートも充実しており、用路に応じて選ぶだけで、必要な入力項目が揃ったお問い合わせフォームをすぐに作成できます。

また、配色・ロゴ・背景画像まで自由に変更でき、自社デザインに合わせたフォームにカスタマイズすることも可能です。

「豊富なテンプレートからフォームをすぐに完成させたい」「入力項目もデザインも柔軟に編集したい」と感じた方は、ぜひformrunをお試しください。
無料で永久に利用でき、メールアドレスの登録で30秒後にすぐ始められます。

formrunのお問い合わせフォームのテンプレートを確認したい方は、こちらのページをご覧ください。
>> formrunテンプレート一覧

フォームランのフォーム作成機能を詳しく知りたい方は、こちらのページをご覧ください。
>>専門知識は必要なし！ビジネスで使える高機能フォームが作成できる

問い合わせフォームは見た目がおしゃれだけではなく、ユーザーが入力しやすい構成で作成することが求められます。

しかし、ゼロからフォームを作成するにはコストと時間がかかり、一般的なフォーム作成ツールはカスタマイズに制約があって、フォームを思い通りに作成できないデメリットがあります。

もっと簡単に、自社ブランドに合ったデザイン性の高いお問い合わせフォームを作成したい方には、ノーコードで使える「formrun（フォームラン）」がおすすめです。

formrunなら、配色・背景画像・ロゴの設定まで自由に設定でき、コードなしで自社イメージにぴったりなフォームを簡単に仕上げられます。Googleフォームでは難しい「信頼感の伝わるデザイン」が、誰でも簡単に実現可能です。

無料で永久に利用でき、メールアドレスの登録で30秒後にすぐ始められます。