お問い合わせフォームは、コンバージョンにつなげるための重要な役割を果たします。
そのため、お問い合わせフォームを最後まで入力してもらえるよう、ユーザーが使いやすいデザインを心がけなければなりません。
今回の記事では、デザイン迷った方に向けてコピペして使えるお問い合わせフォームのhtmlを紹介します。コピペしてそのまま貼り付けてコーディング可能です。
問い合わせフォームで必要不可欠なEFOについても解説しますので、自社のフォームデザインを考える際に役立ててください。
▼ formrunはノーコードでもHTML・CSSを利用してもフォームを作成できます。
ノーコードの場合はマウスだけの簡単な操作中心でフォームが作成できるため、フォーム利用までに準備期間が短い場合にも役立ちますのでぜひformrun をご検討ください。
回答データの管理やメール送信など豊富な機能とセキュリティ対策であなたのフォーム環境構築をサポートします。
formrunのお問い合わせテンプレートを利用したい方はこちら
>> formrunテンプレート一覧
formrunについて知りたい方はこちら
>> フロントエンド開発だけで自由にフォームが作れるヘッドレスフォーム
目次
コピペで使える！シンプルな問い合わせフォームのデザイン
以下より、シンプルかつこだわりのあるお問い合わせフォームのデザインを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.
パステルカラーの色味に合わせて入力フォームの表組の角を丸くすることで、問い合わせフォーム全体の印象をやわらかくしています。
コピペで使える！おしゃれな問い合わせフォームのデザイン
以下より、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列配置になるようにしましょう。
左右のスクロールバーが出ないようにする
スマホの小さな画面で、左右のスクロールバーが出るほどページのサイズを大きくしてしまうと、ユーザーにストレスを与えてしまいます。
スクロールバーが出ないように、入力欄のサイズを調整しましょう。
問い合わせフォームのデザインを30秒で作れる「formrun」
ユーザーが使いやすい問い合わせフォームデザインを作るならば、弊社の「formrun」をご検討ください。問い合わせフォームのデザインをわずか30秒で作成できます。
formrunは120種類以上のテンプレートから好みのデザインを選び、入力項目を選ぶだけで誰でも簡単におしゃれでシンプルな問い合わせフォームを作成できます。
また、formrunのEFO機能には以下のようなものがあります。
- バリデーション
- 入力最大桁数と最小桁数についてのバリデーション
- 確認モード
- フォーム途中保存
- スパム対策
- 動作デモ
formrunのEFO機能は直感的に作成できるように設計されています。
htmlコードの知識が無くてもEFO機能を備えたフォームが簡単に作れます。
ユーザーの問い合わせフォーム入力完了を追求するために、訪問数や離脱数のモニタリングが可能です。
離脱数が多い項目をすぐにチェックできるため、早期修正が可能になります。
formrunについて知りたい方はこちら
>> フロントエンド開発だけで自由にフォームが作れるヘッドレスフォーム
使いやすい問い合わせフォームのデザインを目指そう
問い合わせフォームはおしゃれだけではなく、ユーザーが入力完了しやすい利便性の高いデザインが求められます。
使いやすいお問い合わせフォームを作成するには、以下のEFOを意識しましょう。
- 入力必須項目の明記する
- プレースホルダーの活用する
- 住所自動入力で入力の手間を省く
- 半角や全角の切り替え操作を簡略化
- レスポンシブ対応にする
- リアルタイムバリデーションを活用する
弊社の「formrun」は専門的な知識がなくても、ユーザーが使いやすいフォームが簡単に作成できます。ぜひformrunでフォームを作成してみてください。
formrunのお問い合わせテンプレートを利用したい方はこちら
>> formrunテンプレート一覧
formrunについて知りたい方はこちら
>> フロントエンド開発だけで自由にフォームが作れるヘッドレスフォーム
formrunやフォーム作成や顧客管理に関する情報を発信しております。
EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
