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

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

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

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

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

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

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

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

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

お問い合わせフォームのデザインで回答率を上げるポイント

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

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

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

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

EFOについて詳しく知りたい方は、以下の記事をご参照ください。
>>EFO（入力フォーム最適化）とは？3つの効果や具体的な施策25選・おすすめツールを解説

入力必須項目の明記する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

入力途中保存

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

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

残り項目数の表示

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

問い合わせフォームの作成ならフォーム作成ツール「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）を行うことが重要です。

見た目とEFOを両立したお問い合わせフォームを作成すれば、フォーム回答率を最大化させられるでしょう。

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

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

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

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

formLab編集部

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

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