入力フォームとは？作り方、デザインのポイント、ツールも紹介

入力フォームは問い合わせや資料請求、会員登録など、ユーザーとの接点を持つ入り口です。ユーザーに入力を完了してもらうためには入力フォームのデザインが大切です。今回は入力フォームの作り方、デザインのポイント、おすすめのツールを紹介します。

入力フォームとは？

入力フォームとは、問い合わせや資料請求、会員登録などをする際にユーザーが情報を入力し、送信するためのWeb上の画面です。エントリーフォームや登録フォーム、単にフォームと呼ばれることもあります。

入力フォームには、お問い合わせフォーム、会員登録フォーム、アンケートフォームなど、様々な種類があります。

入力フォームはデザインが重要

入力フォームを設置することでユーザーは手間がかからず、受け手側は必要な情報を漏れなく取得できます。

ただしそれは、ユーザーが最後まで情報をフォームに入力し、送信まで完了することが前提です。途中で入力をやめてしまったり、必要な情報が漏れていたりすると、入力フォームの意味がありません。

そこで重要なのが入力フォームのデザインです。入力フォームを作成するときは、ユーザーにとって入力しやすいデザインを意識することが大切です。

入力フォームの作成手段

入力フォームを作成する選択肢として4つの手段を紹介します。自社に合った方法で作成しましょう。

コーディングで作成する

HTMLやCSSの知識がある場合、コーディングで作成することが可能です。

Webサイトに合わせたフォームや、複雑な入力フォームの作成が無料で、思いのままに作成できます。ただし、カスタマイズするより高度な知識が必要になってくるため、知識が乏しいと時間がかかってしまうデメリットがあります。

WordPressのプラグインを使う

WordPressで作成したWebサイトに入力フォームを設置する場合、プラグインを利用してかんたんに入力フォームを作成する方法があります。

プラグインには無料で、かつ専門知識がなくてもかんたんに入力フォームが作成できるものも多いです。そのため、Webの知識がない方におすすめの方法ですが、細やかなカスタマイズをするにはコードの知識が必要な場合もあるので注意しましょう。

フォーム作成ツールを使う

フォーム作成ツールを使うと、専門知識がなくてもかんたんに入力フォームを作成することができます。ドラッグアンドドロップといった直感的な操作でフォームを作成できるものが多く、WordPressのプラグインよりもかんたんに使える場合があります。入力フォームのデザインに変更を加えたい場合、すぐに対応できるのもツールを使うメリットです。

無料で使えるツールがたくさんありますが、作成できるフォーム数や機能制限があるものが多いため、無料でどこまで作成できるのかをしっかり確認してツールを選びましょう。

Web制作会社に外注する

自社での対応が難しい場合、Web制作会社に入力フォームの作成を依頼する方法があります。

費用はかかりますが、一からオーダーメイドの入力フォームを作成できるので、オリジナルの、こだわった入力フォームを作成したい場合などはWeb制作会社に依頼するのも一つの手です。費用以外のデメリットは、入力フォームに変更を加えたい場合、その場ですぐに対応することが難しく、時間がかかってしまうことです。

無料で入力フォームを作成できるGoogleフォーム

GoogleフォームはGoogleアカウントがあれば、誰でもかんたんに、無料でフォームを作成できます。Webサイトへの埋め込みや、メール通知などの機能も無料で利用できるため、アンケートや問い合わせなど様々なシーンで活用できます。

シンプルな画面設計で、カラーやフォントといったデザイン変更が管理画面からかんたんに行なえます。レスポンシブWebデザインにも対応しているため、スマートフォン対応も心配ありません。Googleスプレッドシートとの連携によって、入力内容を自動的に集計できるところも便利です。

公式サイト：Googleフォーム

有料で入力フォームを作成できるSPIRAL®

SPIRAL®は、お客様の声を反映し、10年以上アップデートを繰り返し、SSL対応、エラーチェック、サンキューメール、人数締切、複数ページ分割、データベース連動、データ一括ダウンロード、グラフ集計、自動フォローメールなど、考えられる機能を網羅しているフォーム作成ツールです。

HTMLだけではなくJavaScriptやPHPにも対応しているため、思い通りのフォームを柔軟に作成できます。自社サイトに合わせたデザインのフォームの作成が可能です。

データ量に応じた定額制で、作成したフォーム数毎の課金はありません。

公式サイト：SPIRAL®ver.2

入力フォームを作成する上で把握しておきたい用語

入力フォームを作成するにあたり、知っておきたい基本的な用語を紹介します。

フォーム離脱率

フォーム離脱率とは、入力フォームまでたどり着いたユーザーが、情報の入力を完了させることなくページから離脱してしまう確率のことです。

フォーム離脱率が高すぎる場合、入力フォームのデザインを見直した方が良いでしょう。

EFO

EFOはEntry Form Optimizationの略で、入力フォーム最適化のことです。

ユーザーのフォーム離脱率を改善するために、ユーザーが入力しやすいようにフォームを最適化する施策のことを指します。

ラジオボタン

複数の選択肢からひとつだけ選ぶ場合に使うボタンのことをラジオボタンといいます。

チェックボックス

チェックボックスは複数の選択肢から複数の項目を選ぶ場合に使います。

プルダウン

プルダウンはリストの項目からスクロールして選択肢を選ぶことができる機能です。ドロップダウンとも呼ばれます。

テキストボックス

入力フォーム内に設置する、テキストを入力するためのボックスです。

1行テキストボックスと複数行テキストボックスがあり、1行テキストボックスは名前やメールアドレスの入力、複数行テキストボックスは自由記述欄などに使われます。

埋め込み型フォーム

Webサイトの一部に埋め込まれているフォームの形式を埋め込み型フォームといいます。

入力フォームまでのページ遷移がいらないというメリットがあります。

入力フォームをデザインする際のポイント

入力フォームはユーザーが最後まで情報を入力しなければ意味がありません。入力フォームが使いにくいと、せっかく入力フォームまでたどり着いたユーザーを逃してしまうことになります。

ユーザーにとって入力しやすいフォームにするにはどんなデザインにすればよいのでしょうか。入力フォームを作成する際に押さえておきたいポイントを紹介します。

入力項目は最小限にする

入力項目の数はフォーム離脱率に影響を与える重要なポイントです。入力項目が多いとユーザーのストレスとなり、入力を途中でやめてしまうことにつながります。

ユーザーに入力を完了してもらうことを第一に考え、入力項目をできるだけ少なくしましょう。

必須項目と任意項目を明確にする

任意項目を設置する場合は、必須項目との違いが分かりやすいようにデザインを工夫します。

たとえばラベルの色分けです。必須項目は赤のラベルを、任意項目はグレーのラベルを使って区別します。そうでない任意項目は分かりやすいようにデザインを工夫します。

フォーム全体の項目数を少なくするため、任意項目自体をなくしてしまってもOKです。任意項目の情報については他の方法で集めることができないかどうか考えてみましょう。

入力フォームは縦一列に配置する

通常、入力は垂直方向で行うのが自然なため、入力フォームは縦一列に配置します。

チェックボックスやラジオボタンも同様で、縦方向に並べます。チェックしたかどうかわかりやすく、入力もしやすくなります。

適切な入力方式を使用する

たとえば数個の選択肢にはラジオボタンを、生年月日の入力にはプルダウンを使用するというように、項目ごとに適切な入力方式を選びましょう。

選択肢が数個の場合にプルダウンを使用してしまうと、プルダウンを開くためにワンタップ多く操作させることになり、適切とはいえません。また、選択肢が多くなる場合にはカテゴリー分けをしたり、選択しやすくなるように工夫しましょう。

エラーはわかりやすく表示する

入力にエラーがある場合、どこにエラーがあるのがわかりやすく表示します。

たとえば、エラー内容をフォーム全体の上部にまとめるのではなく、入力欄のすぐ下に表示しましょう。その際、何が間違っていてどのように修正すればよいのかを明記するとより親切です。

プレースホルダテキストは使用しない

ユーザーが文字を入力するまでの間、フォームの入力欄に表示されている文章のことをプレースホルダテキストといいます。

スペース省略を目的に、プレースホルダテキストを使用して入力例を記載している場合があります。ただ、プレースホルダテキストはひと目で入力内容が確認できて便利という反面、入力欄に文字を入力すると消えてしまうため、入力例や項目名は入力欄の外に明示するようにしましょう。

スマートフォン対応の入力フォームのポイント

多くの人がスマートフォンを利用している現在、入力フォームのスマートフォン対応は必須といっても過言ではありません。

スマートフォンはパソコンよりも画面サイズが小さく、操作性も異なります。そのため、スマートフォンに合わせた入力フォームデザインにすることが大切です。

スマートフォン対応の入力フォームを作成する際のポイントを紹介します。

入力フォームの幅を適切にする

スマートフォンの場合、どうしても画面サイズが小さくなってしまうため、入力フォームが狭いと入力しづらくなってしまいます。

画面いっぱいになるよう横幅を最大限使って入力フォームを大きく、文字も大きめに表示させるように調整しましょう。

フォームに合った入力モードを表示する

入力項目によって最適な入力モードを表示させるようにしましょう。

項目ごとの入力モード切り替えはユーザーにとって負担になるため、電話番号の場合はテンキー、メールアドレスの場合は半角英字など、自動的に最適な入力モードに切り替わるとよいでしょう。

SNSと連携した自動入力機能を利用する

入力フォームをGoogleやFacebookアカウントと連携させることで、名前や生年月日、メールアドレスなどの情報を自動入力することができます。

手入力する手間が省けるため、ユーザーにとって便利な機能です。

レスポンシブWebデザインを採用する

レスポンシブWebデザインとは、ユーザーが使用するデバイスの画面の幅に応じて、最適なレイアウトを自動的に表示する技術のことです。

レスポンシブWebデザインを採用することで、ひとつのページで様々な画面サイズに合ったレイアウトをそれぞれ表示させることができます。

申請や応募受付の電子化・システム化ならWebフォーム作成システム「SPIRAL®」

当社のご提供する 「Webフォーム作成システムSPIRAL®」は、かんたん操作で自由自在にフォーム作成が行える定額制のWebフォーム作成システムです。 申請や応募の受付だけでなく、その後のステータス管理や応募者用マイページ作成など、受付から管理までをWebシステム化することができます。

受付フォームは画像やPDFなどのアップロードにも対応。拡張子指定や容量制限、入力制限もできるので、自社の要件にあったフォームを構築することができます。また、デザインはテンプレートからの選択の他、HTML、CSS、JavaScriptを利用してカスタマイズも可能です。

申請者用・管理者様にそれぞれマイページを作成し、ステータス管理や申請内容の情報変更をWeb上で行うこともできます。

書類申請、出願・公募受付、補助金・助成金申請、契約加入・更新受付、キャンペーン受付、問い合わせ受付など様々な業界・用途・シーンで延べ11,000社以上のご利用実績がございます。

サービスの詳細については「Webフォーム作成システムSPIRAL®」のページをご覧いただくか、サービス導入をご検討中の方はこちらからぜひお問い合わせください。

まとめ

入力フォームとは、問い合わせや資料請求、会員登録などをする際にユーザーが情報を入力し、送信するためのWeb上の画面です。

ユーザーに最後まで情報を入力してもらうためには、ユーザーにとって入力しやすいデザインのフォームであることが大切です。

入力フォームの作成手段はいくつかあります。自社に合った手段を選びましょう。

多くのフォーム作成ツールが無料で使えますが、フォーム作成数や機能に制限があるため、どこまで無料でできるかを確認しましょう。

入力フォームを作成する前に基本用語を覚えておくとよいでしょう。知っておいて損はありません。

入力フォームをデザインする際のポイントを踏まえて、ユーザーにとって使いやすい入力フォームを作成しましょう。