Webサイトや通販サイトなどで入力フォームというものをよく見かけるのではないでしょうか。

入力フォームは、メールや電話などよりも比較的簡単に詳細を問い合わせできるというところに価値があります。

今回はそんな入力フォームについての説明や作り方、種類、導入メリットについてご紹介します。

 

入力フォームとは

入力フォームとはWebサイト上で詳しく問い合わせたいときに個人情報を入力し相手側へ送信するという役割を持ちます。

主にWebサイト上の右端や左端上部、ページの最下部などに設けられていることが多い入力フォームですが、使用されるシーンとしては問い合わせや資料請求、会員登録、ログインなどが一般的です。

その他にもメールマガジンやイベント申し込み、アンケート入力、予約なども入力フォームとして含まれます。

 

入力フォームを設置するメリット

入力フォームを設置するメリットですが、Webサイトを運営する側のメリットは名前やメールアドレス、住所、電話番号などを入力必須にしておくと詳細情報が漏れなく得られます。

また、 入力フォームから送信された場合、自動返信用テンプレートを設定しておくことで瞬時に相手側への対応が可能です。

さらに、悪質な迷惑メールやメール本文を開いてコンピューターウイルス侵入を防ぐことができるという点がメリット です。

一方、Webサイトを閲覧する側のメリットとしては 24時間いつでもどこでもお問い合わせができます。

また、 詳細や資料請求を求めたい場合、自身でメールを開き、アドレスを打ち込みメール本文を作成するなどの手間をカットし時間の短縮と手間が省けストレスを緩和させてくれるでしょう。

さらに、 入力フォームが正しく送信されると自動返信にてメールが届くことが多いため、送信できていなかったという問題を防ぐことができます。

入力フォームを設置しておくことで、Webサイトを運営する側、閲覧する側双方で多くのメリットがあることがわかります。

 

入力フォームの4つの作成方法

入力フォームの作成方法は1つだけではありません。

ここからは入力フォームを作成するときに主に使用される4つの作成方法について解説していきます。

 

プログラミングで自力で入力フォームを作成する

入力フォームではHTMLやCSS、PHPなどのコーディングが使用されています。

このコーディングの知識があるのであれば自力で入力フォームの作成が可能です。

また、自力でプログラミングを使用して入力フォームを作成するとWebサイトにあった入力フォームからほしい情報だけを記載できるなどといった自由度の高い入力フォームを作成できるでしょう。

 

入力フォーム作成に特化したツールを使う

上記のようなプログラミングの知識がない方であってもツールを使用することで簡単に入力フォームを作成できます。

入力フォーム作成ツールには無料で作成できるツールと有料で作成できるツールがあります。

無料の作成ツールでは無料で簡単に入力フォームを作成できるというメリットがありますが、その分、選択可能なデザインや使用できる機能に制限がかけられている場合が多いです。

一方で有料の作成ツールでは費用が発生しますが、幅広いデザインから選択が可能で複数のフォームを作成できるというメリットが挙げられるでしょう。

 

マーケティングオートメーションやCRMツールで入力フォームを作る

マーケティングオートメーションとは見込みのある顧客情報の管理や獲得から顧客が興味、関心のある情報に対し、コミュニケーションを取りながら提供することを指します。

そのため、マーケティングオートメーションで入力フォームを作成すると顧客の興味や関心などのニーズを入力フォームからくみ取ることが可能です。

また、CRMツールも顧客を管理しながら分析するシステムで、顧客満足度から顧客の信頼性の向上を目的としたツールのことをいいます。

そのため、入力フォームだけでなくマーケティングオートメーションやCRMツールを導入しようと検討している企業にとっては一石二鳥のツールであるといえるでしょう。

 

Web制作会社に外注する

自社ではプログラミング知識がある社員がいない、人手不足で入力フォーム作成に割ける時間がないといったときにはWeb制作会社に外注するのも一つの手です。

Web制作会社に条件やデザイン、必要項目などを記載し外注することにより、自社オリジナルで他にはないようなWebサイトにあったデザインの入力フォームを使用できます。

一方で、入力フォームを変更したいときや不具合が発生したときにはWeb制作会社に問い合わせしないとわからない、修正までに時間がかかってしまうという点が懸念点として挙げられます。

 

よくある入力フォームの種類

次に入力フォームとしてよくある種類について見ていきましょう。

 

メールフォーム

メールフォームとはWebサイト上に埋め込まれている入力フォームからWebサイト運営者にメッセージを送信できるものを指します。

一般的なメッセージを入力し送信するものや複数の回答を記載する選択式などといった種類があります。

メールフォームを設置するメリットとしては、電話では問い合わせが難しい内容やメールアプリを立ち上げることなく気軽に問い合わせができる点などが挙げられるでしょう。

 

Googleフォーム

Googleフォームとは前述のメールフォーム同様、Webサイト上に設置されている入力フォームからメッセージを送るシステムです。

メールフォームとの違いはGoogleアカウントがあれば無料で簡単に入力フォームを作成できるというメリットがあります。

また、Googleフォームでは入力フォームから受信した内容をGoogleのアプリであるスプレッドシートと連携でき、自動で集計が可能です。

それゆえに、普段からGoogleを使用する企業であればGoogleフォームの導入をおすすめします。

 

入力フォームとあわせて知りたい基礎用語

引用：https://www.canva.com/

 

入力フォームが作成できたら、入力フォームとあわせて知りたいさまざまな用語があります。

ここからはそんな入力フォームとあわせて知りたい基礎用語についてご紹介します。

 

フォーム離脱率

フォーム離脱率とは閲覧者が入力フォームまで到達したものの、メッセージや情報を入力することなく入力フォームから離れた閲覧者の割合のことを指します。

フォーム離脱率の平均的な割合としては70％から80％ほどといわれています。

運営するWebサイトのフォーム離脱率を確認して上記よりも高いフォーム離脱率を記録していれば入力フォームが入力しづらい、入力項目に改善の余地があるなどの原因があるかもしれません。

 

EFO（入力フォーム最適化）

EPOとは入力フォームでの入力率を向上させてフォーム離脱率を軽減させる目的のことを指します。

例えば、入力フォームでの入力の手間を省くことやスマートフォンにも対応すること、 入力時にストレスを与えていないかなどといった要素で閲覧者が快適に入力できるように改善します。

これらの項目を改善することによって、入力することなく離脱してしまう閲覧者を軽減させることができるようになるでしょう。

 

埋込み型フォーム

埋込み型フォームとはWebサイトの最下部や右端、左端などの場所に入力フォームを埋め込む形のことを指します。

埋込み型フォームを設定すると、例えば商品を紹介するページを閲覧し商品を購入したいと思ったときなどに、入力フォームへとページを切り替える手間を省けます。

それゆえに、前述のEPOにもつながり、閲覧者に優しい良質なWebサイトとして判断されることもあるかもしれません。

 

入力されやすいフォームを作成するデザインのコツ12選

入力フォームはWebサイト運営者が入力しやすいと感じていても閲覧者は入力しやすいと感じるとは限りません。

入力フォームは閲覧者が入力しやすいようにデザインされていることが重要です。

ここからは入力されやすくなるような入力フォームのデザインのコツについてご紹介していきます。

 

入力する項目を最小限にする

まず、入力する項目は最小限にすることを心がけましょう。

入力する項目が多ければ多いほど時間がかかってしまうことや入力に要する労力と手間がかかってしまい、入力フォームから離脱してしまう可能性が高くなってしまいます。

メールアドレスや名前、会社名、お問い合わせ内容などの項目は必須であってもそれ以外の項目は対して必要ではないかもしれません。

何でもかんでも必須項目にするのではなく必要な情報以外は任意入力に設定しておくことでフォーム離脱率を軽減させることができるでしょう。

 

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

入力フォームの配置は縦一列に配置するとレイアウト的にもスッキリし、閲覧者にも理解しやすくなるでしょう。

縦一列ではなく、横にも入力フォームがある場合、視線の移動が増えて時間がかかる上に質問を理解する速度が遅くなってしまう恐れがあります。

また、PCから入力する場合はあまり負担に感じることはないかもしれませんが、中にはスマートフォンを利用して入力する閲覧者もいるでしょう。

しかし、スマートフォンはPCよりも画面サイズが小さく、その分表示される文字数も少なく、幅なども狭くなります。

そのため、入力にストレスがかかってしまうことがあります。

入力フォームは必ず縦一列に配置し、ユーザーにも理解しやすい配慮を心がけましょう。

 

チェックボックスの配置を縦一列に配置する

前述の入力フォームの配置に引き続き、チェックボックスの配置にも注意しましょう。

チェックボックスも縦一列に設定することでストレスなく選択できますしマウスカーソルの移動やスマートフォンでは縦方向にスクロールするだけなのでストレスの軽減につながります。

また、チェックボックスのチェックするボタンサイズも小さすぎると誤入力を招いてしまう可能性が高くなります。

特にスマートフォンで入力する場合ではボタンが小さすぎると誤タップが発生しやすくなってしまうでしょう。

そのため、チェックボックスの大きさを適度に大きくすることで入力の際に誤入力を防ぎ、閲覧者にストレスを与えないようにしていきましょう。

 

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

エラー表示は入力漏れや正しく入力されていない場合に表示されます。

このエラー表示において、どのような内容であることからエラーが発生したのかを表示すると閲覧者にもわかりやすく時間をかけずに修正することができるでしょう。

もしエラー表示が「情報が正しく入力されていません」の表示だけであれば、どの箇所が間違っているのかを探し修正するまでに時間がかかり、探し出すための労力を要します。

また、エラーが表示されている内容がどうしてエラーになっているのかなどの詳細を明確化することで閲覧者側も理解しやすく、ストレスをかけずに入力しなおすことができます。

 

必須項目と任意項目をひと目でわかりやすく表示する

閲覧者の情報は入力フォームにおいて欠かすことができません。

この情報の入力において、必須項目と任意項目をひと目でわかりやすく表示させるといいでしょう。

必須項目と任意項目をひと目でわかりやすく表示させておかないと、必須項目を入力せずに送信をしてしまい、エラーになり、入力しなおさなければならなくなります。

その結果、前述のようにエラーが表示されているところまでさかのぼり、入力しなおすのに煩わしいと感じてしまい、Webサイトから離脱してしまう原因になりかねません。

対処法としては必須項目を赤字で表示させて任意項目をグレーで表示させることや必須項目には米印をいれるなどの工夫をすることで閲覧者にもわかりやすく、ストレスを感じずに入力してくれるでしょう。

 

ドロップダウンを使用して入力の手間を省く

ドロップダウンとは項目をクリックやタップすることで複数の選択が表示されるリスト機能です。

ドロップダウンは都道府県やメールアドレスの＠マークからの後ろのドメイン名、生年月日などで使用されることが多々あります。

ドロップダウンを使用することでキーボードでの入力を省けるため、ストレスを感じにくくなるでしょう。

しかし、選択肢が少なければリストを展開する手間が増えるだけ、逆に選択肢が多すぎると探し出すのに時間がかかってしまいます。

もし選択肢が少ない、あるいは選択肢が多いのであればチェックボックスを使用したり通常の入力に設定したりなどの工夫をすることで、閲覧者にとっても快適に入力してもらうことができるでしょう。

 

オートコンプリート機能を使用する

オートコンプリート機能とは文字を入力している段階で入力履歴から閲覧者が入力しようとしている内容をAIが予測します。

その文面をクリックやタップすることで自動的に文字が入力されるという機能です。

このオートコンプリート機能ではメールアドレスや住所、電話番号などといった予測から、郵便番号を入力すると自動で住所が入力される機能もあります。

特に郵便番号を入力すると住所が都道府県から番地までが自動で入力されることから時間を大幅に短縮することができ、スムーズに入力フォームを進めていくことが可能です。

また、中にはクレジットカードの番号などといったような普段からあまり使用することのない番号も以前に入力した履歴があると自動で入力できるため大変便利な機能であることがわかります。

 

フィールドフォーカス機能を使用し入力箇所を明確化する

フィールドフォーカス機能とは文字を入力している最中もしくは入力が完了している欄の色を変更することで入力が完了している箇所と入力していない箇所が明確化できるという機能です。

多くの項目を入力していく必要があると、どうしても入力している項目を見失いがちです。

そんなときにフィールドフォーカス機能を使用していると入力が完了している箇所がひと目でわかると同時に入力していない箇所も瞬時に発見できます。

これにより、入力漏れや入力ミスを防ぐことができ、入力漏れからエラーになり再度入力しなければならないという手間が省けて、閲覧者のストレスを軽減させることができるでしょう。

 

入力するスペースを入力する内容に合わせる

入力する項目は電話番号や郵便番号などのあらかじめ決められた文字数から住所や会社名、お問い合わせ内容などといったその時々で違った文字数になります。

そんなときに、入力スペースが極端に狭ければ送信する前などで再度確認する際、ひと目で間違っているのかどうかを判断することができません。

また、スマートフォンから入力する場合には入力スペースが狭いと入力しづらくなってしまいます。

逆に入力文字数が少ない場合に入力するスペースが広すぎると違和感を与えてしまいかねません。

閲覧者に違和感を与えないようにするために、電話番号や郵便番号などの決められた文字数の場合は入力スペースを比較的狭めに設定します。

そして入力する内容が長いあるいは多い場合には少し長めにスペースを取るなどの工夫をするようにしましょう。

 

関連する内容をグループ化する

入力フォームにて情報を入力する際、名前や住所、電話番号などの個人情報を入力する場合が多いでしょう。

しかし、この項目がバラバラに配置されていると閲覧者は違和感を感じやすく、それだけで入力フォームから離脱してしまう可能性が増加してしまいます。

レイアウト的にも個人情報は個人情報、そして質問内容は質問内容などといったように項目ごとにわけることで入力フォームが見やすくなり、ストレスを感じにくくなります。

 

スマートフォンでも入力しやすいフォームにする

スマートフォンが普及している現代ではPCよりもスマートフォンから検索エンジンを開き、Webサイトを閲覧するという方が大多数を占めます。

そんなときに、スマートフォンに非対応の入力フォームであれば、PCでの入力フォームをスマートフォンに表示させるしかありません。

それゆえに、スマートフォンの画面では表示される文字が大きすぎて入力フォームを見失う、いちいちスライドして文字を読まなくてはいけないなどの弊害が生じます。

これにより、スマートフォンからの閲覧者が入力フォームから離脱してしまう可能性が増えてしまいます。

そうならないためにも、スマートフォンの画面にも対応したデザインや入力欄をタップしやすいサイズに変更するなどの対応が閲覧者の快適度につながるでしょう。

また、パスワードや電話番号を入力する際、自動でキーボードが入力に適したキーボードに変更する設定にも変更できます。

閲覧者にとって入力しやすい設定を考えて工夫することも大切になります。

 

入力フォームを導入前に一度自身で確認する

入力フォームが完成したら導入する前に一度どのような仕上がりになっているのかを自身で確認することをおすすめします。

実際に入力してみることで、入力しづらいと感じる箇所や文字が読みづらい箇所などといった閲覧者目線になって操作できるため、ストレスを感じやすい箇所を発見できることもあります。

そして、違和感のある箇所の設定を変更して再度入力を繰り返すことで、閲覧者全員が快適にストレスを感じることなく入力可能な入力フォームを完成させることができるでしょう。

 

入力フォームのCVR改善のためのチェックポイント

CVRとは運営するWebサイトにアクセスされた閲覧者からどのくらいが入力フォームからの資料請求やお問い合わせ、商品の購入にいたったかを示す指数のことを指します。

前述でもしたように70％以上が離脱する入力フォームでどれだけ入力を完了させることができるのかを考えます。

CVRを改善するためには前述のように入力されやすい入力フォームを作成することが大切です。

それに加えて、Google Analyticsやヒートマップといったツールを使用し入力フォームで離脱してしまう閲覧者の原因を探り、入力フォームでの入力率を向上させていきましょう。

 

まとめ

この記事では入力フォームについて詳しく解説しました。

入力フォームは閲覧者がWebサイト上で資料請求や会員登録、商品購入などを行う際に個人情報をWebサイト運営側へ送信するものをいいます。

入力フォームを使用することはWebサイト運営側、閲覧者側でメリットが多く存在すると同時に手軽にお問い合わせすることが可能です。

もし入力フォームの導入を検討しているのであれば、この記事を読んでしっかりと理解した上で入力フォームを導入することをおすすめします。