フォームの作成時にすべきポイントや代表的な種類を徹底解説

formLab編集部
フォーム作成

問い合わせフォームに代表されるフォームは専門的な業者に依頼しなくても作成可能です。フォームはWebサイトにおいて便利な機能であり、作り方を覚えておくとさまざまな場面で役立ちます。この記事では、フォームを作るうえで知っておきたい概要や作り方、使いやすいフォームを作るためのポイントについて解説します。

そもそもフォームとは？概要や種類をおさらい

フォーム（form）とは「形」「形状」を意味する英単語であり、IT分野ではユーザーからの入力を受け付けるWebサイト上の要素を意味します。「入力フォーム」という名称も一般的です。

Webサイト上で情報を収集する場合、通常は集計や分析を目的としています。また、不特定多数のユーザーから情報を集めるため、形式が決まっていないと集計や分析が困難になります。

フォームはいくつかの項目で構成されており、効率よく情報を取得できる設計になっています。そのため、Webサイト上で情報を取得する場合は、フォームを設置するのが一般的です。

フォームの基本的な構成

フォームは大まかに「入力画面」「確認画面」「完了画面」という3つの要素から構成されています。各要素についてくわしく解説しましょう。

入力画面

入力画面は、ユーザーが情報を入力する画面のことです。後述するテキストボックスやチェックボックスといった要素で構成されます。「氏名」「電話番号」「問い合わせ内容」といったフォームの導入目的に応じた項目が設置されます。

確認画面

確認画面は、ユーザーに入力画面で入力した情報を確認してもらうための画面です。例として、ユーザーが自分のメールアドレスを間違って入力していれば、サイト側は返答のメールを届けることができません。

こうしたトラブルを防ぐため、ユーザーには確認画面で入力情報の最終確認をしてもらう必要があります。入力内容に間違いがないことを確認したうえで、フォームの情報を送信するボタンをクリックします。

完了画面

完了画面はフォームの情報が正常にサイト側に送信されたことをユーザーに伝えるための画面です。「お問い合わせありがとうございました」といったお礼の文言が表示されます。問い合わせを管理するための番号が表示されることも一般的です。

フォームの代表的な種類

フォームはさまざまな用途で活用されています。以下では、代表的なフォームに以下のようなものがあります。

  • 問い合わせフォーム
  • アンケートフォーム
  • 購入フォーム
  • セミナー参加フォーム
  • 求人フォーム
  • テスト・クイズフォーム

問い合わせフォーム

問い合わせフォームは、ユーザーがサイト側に対して問い合わせをするためのフォームです。ユーザーが問い合わせ内容を入力するためのテキストボックスが設けられます。また、サイト側から回答をする必要があるため、メールアドレスや電話番号といった連絡先を入力する項目が設置されます。

アンケートフォーム

アンケートフォームは、アンケートの回答をWeb上で集計するためのフォームです。イベント参加後、商品・サービス購入後のユーザーに対してアンケートを行う際に利用されます。取得した結果は、マーケティングに役立つ情報として活用可能です。一般的に選択式の項目と文章を入力できる自由回答欄が設けられます。

購入フォーム

購入フォームはユーザーが商品・サービスを購入するためのフォームです。展開商品が多いECサイトの場合、購入のための機能として商品カートを設けるのが一般的です。

一方、展開商品が少ない場合は購入フォームを導入したほうが購入プロセスの複雑化を防ぐことができます。近年普及しているサブスクリプションサービスでは購入フォームを設けるケースが多くなっています。購入商品の種類や個数、ユーザー情報などが代表的な入力項目です。

セミナー参加フォーム

セミナー参加フォームはユーザーからのイベントやセミナーの参加予約を受け付けるフォームです。取得したデータを取り込むことで、予約者リストを簡単に作成できます。

また、入力情報を蓄積しておくことで、見込み客リストの作成も可能です。予約したいイベントの日時、開催地、ユーザー情報などが入力項目として設置されます。

求人フォーム

求人フォームは、求職者からのエントリーを募るためのフォームです。一般的に、企業の採用ページに設置されます。ユーザー情報（求職者の情報）、応募職種のほか、志望動機やアピールポイントなどの自由記入欄で構成されます。

テスト・クイズフォーム

ユーザーに対してテスト・クイズを出題するためにフォームを設置することがあります。求職者に対する入社試験や、社内研修など、さまざまなシーンで活用されます。主な項目はユーザー情報の入力欄と、回答の入力欄です。回答欄は、自由入力式、選択式など設問に合わせて調整されます。

自分でできる！フォーム作成ツール2選

フォームは専門的な事業者の力を借りなくても自社で作成できます。ただし、プログラミングでゼロから作成すると手間と時間がかかるため、フォーム作成ツールを利用するのがおすすめです。代表的なツールとして、Googleフォームとその他のツールについて紹介します。

Googleフォームを利用する

Googleフォームは、Googleが提供しているフォーム作成ツールです。カスタマイズの幅が広いことから、さまざまなフォームに活用されています。また、Googleドキュメント、Googleスプレッドシートといった他のGoogleツールと同様に無料で利用できることから、広く普及しているツールです。

特筆すべきは、レスポンシブデザインに標準対応している点です。レスポンシブデザインとは、スマホからのアクセス時に表示に最適化するデザインのこと。作成したフォームにスマホからアクセスした場合もストレスなく利用できます。

Googleスプレッドシートとの連携が可能な点も特徴です。フォームで取得したデータをスプレッドシートで取り込むことができます。取得データを他のユーザーと共有することも容易です。

一方で、フォームのデザインがシンプルなため、サイトデザインによっては合わない場合があります。また、問い合わせ対応に最適化されていないため、郵便番号からの住所自動取得や、入力したユーザーへの継続メール対応などはできません。

他のフォーム作成ツールを利用する

Googleフォーム以外のフォーム作成ツールを利用する方法もあります。さまざまなニーズに対応するテンプレートが用意されているため、目的に応じたフォームを作成可能です。プログラミングの知識がなくても、簡単な設定のみですぐにフォームを運用開始できます。

また、フォーム設置後の運用を想定した機能を実装している点も特徴です。対応状況のステータス表示や結果のCSV出力など、運用に役立つ機能が充実しています。

Googleフォームと比較するとデザインの柔軟性に優れている点もメリットです。Webサイトのデザインにあったフォームを作成できます。

フォーム作成で知っておきたい基本ポイント

フォームを設置したとしても、ユーザーに使ってもらえなければ意味がありません。フォームを活用してもらうためには、ユーザビリティを意識する必要があります。

使いやすいフォームを作成するためのポイントは以下の通りです。

  • 入力項目は可能な限り減らす
  • 記述式の項目をできるだけ選択式に置き換える
  • 入力案内は入力欄の手前に記載する
  • エラー表示をわかりやすく記載する
  • レスポンシブデザインを採用する・スマホでの利用に最適化する

入力項目は可能な限り減らす

フォームの入力項目はできる限り減らしましょう。入力項目が多すぎると、ユーザーの負担につながります。一見して入力項目が多いフォームは、ユーザーに敬遠されてしまうかもしれません。

フォームは効率よく情報を取得できるツールのためつい項目を多くしてしまいがちですが、ユーザーの視点に立って項目を最小限にすることが大切です。また、任意の入力項目はできる限り減らし、可能な限り必須項目のみで構成しましょう。

記述式の項目をできるだけ選択式に置き換える

記述式の項目を選択式に置き換えることも大切です。フォームを利用するユーザーにとって、テキスト入力は大きな負担となります。必須のテキスト入力項目が多い場合、フォームを利用せずに離脱するユーザーが増えてしまうかもしれません。

そのため、問い合わせ内容など詳細なヒアリングが必要な項目のみを記述式にしましょう。他の項目をチェックボックスやラジオボタン機能を利用して選択式に変え、ユーザーの負担を軽減してください。

入力案内は入力欄の手前に記載する

入力案内を入力欄の手間に記載することも基本的なポイントです。入力欄の後ろに入力案内があるとユーザーの誤入力を招きます。

例として、姓名の間のスペースの要不要、電話番号・郵便番号のハイフンなど、誤入力を防ぐための指示は、入力する前にユーザーの目に入る場所に記載しましょう。ストレスフリーなフォームを作るためには、こうした細かいポイントを意識することが大切です。

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

入力後のエラー表示をわかりやすくすることも大切です。フォームにおけるエラー表示とは、不正な形式の入力や誤入力があった際に表示される案内のこと。半角英数字のみ入力欄に全角文字が入力されていた場合や、メールアドレスの入力欄と確認欄に違いがあるとき、必須項目が入力されていないときなどに表示されます。

単に「入力エラーがあります」という案内だけでは、ユーザーはどこに入力不備があるのかわかりません。エラー箇所をわかりやすく記載することが大切です。ユーザーの目につくように赤字で表示することも一般的です。

レスポンシブデザインを採用する・スマホでの利用に最適化する

近年はスマホからフォームにアクセスするユーザーが多いため、レスポンシブデザインを採用することが一般的になっています。レスポンシブデザインとは、上述したとおりスマホからのアクセス時に画面幅が自動調整されるデザインのことです。

その他にも、スマホからの入力でストレスが生じないように工夫することが大切です。タップが必要な箇所をなるべく減らす、入力項目の間隔を空ける、文字種の変更が必要ないようにフォーム側で自動指定するなど、細かな配慮が求められます。

フォーム作りで意識すべきセキュリティリスクと対策

フォームを設置するうえで考えなければならないことのひとつがセキュリティ対策です。フォームを狙うサイバー攻撃は多く、対策を講じておかなければ、トラブルに発展することがあります。フォームを狙うサイバー攻撃と、必要なセキュリティ対策について解説します。

フォームを狙うサイバー攻撃

フォームを狙うサイバー攻撃として以下のようなものが挙げられます。

SQLインジェクション

SQLインジェクションはフォーム経由で不正なSQLを送信し、データベースを操作するサイバー攻撃です。SQLとはデータベースに命令を送るための言語であり、データベースの操作・定義のために使用されます。

SQLインジェクションの被害にあうと、データベースに記録されている情報の改ざん・漏えいにつながります。

クロスサイトスクリプティング

クロスサイトスクリプティングとは、フォームに不正なスクリプトを埋め込むサイバー攻撃の一種です。悪意のあるサイトに誘導するスクリプトを埋め込み、閲覧したユーザーをマルウェアに感染させる手口が一般的です。

フォームを設置したサイト側だけではなく、フォームを閲覧したユーザーも被害にあってしまうため、極めて悪質なサイバー攻撃といえます。

スパムメール

スパムメールとは、フォームを利用して大量の悪意あるメールを送信するサイバー攻撃です。多くの場合、自動でフォームからメールを送るbotが使用されます。悪意のあるサイトのURLが記載されたメールを送る手口も一般的です。

フォームに必要なセキュリティ対策

サイバー攻撃による被害を防ぐため、フォームには以下のような対策が実施されます。

SSL化

SSL化とは、送受信するデータを暗号化する仕組みのひとつです。具体的には「共通鍵暗号方式」と「公開鍵暗号方式」という2種類の仕組みを利用して暗号化を実施します。データをSSL化することで、第三者による改ざん・不正取得を防ぐことができます。

WAF

WAFとは「Web Aplication Firewall」の略であり、Webアプリケーションを保護するためのセキュリティ対策のひとつです。ネットワークを守るセキュリティ対策として一般的なファイアウォールをWebアプリケーションに適用させたものといえばわかりやすいかもしれません。

WAFを導入することで、フォームの設計を変えることなく脆弱性を修正することができます。

プログラム更新

フォームの作成や運用に使用しているツールやプログラムを常に最新の状態に保つことも、重要なセキュリティ対策のひとつです。

更新が遅れていると、フォームに脆弱性が残されてしまう可能性があります。フォーム作成ツールを使用している場合は、常に最新の更新プログラムを適用させておきましょう。WordPressやプラグインを更新しておくことも重要です。

アクセス制限

フォームで取得した情報を格納しているデータベースへのアクセスを制限することも大切です。内部の犯行によってデータの漏えいや改ざんが起きるケースは少なくありません。内部の情報にアクセスできる人間を制限するために、権限管理が求められます。

フォームを作るうえでおさえておきたい用語

フォームを作る際に知っておいていただきたい用語を紹介します。

EFO

「Entry Form Optimization」の略であり、「入力フォーム最適化」を意味します。フォームのユーザビリティを向上させるため、入力項目やデザインを最適化することです。

SSL

「Secure Socket Layer」の略であり、データを暗号化して送受信する仕組みの一種です。秘匿すべき情報を第三者による盗聴から守るために活用されます。

reCAPTCHA

Googleが提供しているWebサイトをbotから守るためのサービスです。「私はロボットではありません」という文言が表示されたチェックボックスや特定の条件に当てはまる画像を選択させる画面で、botによるフォームの利用を防ぎます。

埋め込み型

別のページに遷移させず、ページ内の空いたスペースに入力フォームを埋め込む形式を指します。ランディングページ下部の問い合わせフォームなどが代表例です。

テキストボックス

フォーム内に設置するテキストを入力するための欄です。問い合わせ内容など、ユーザーに自由に記入してもらいたい場合に設置します。

ラジオボタン

複数の選択肢のなかから1つだけをユーザーに選択してもらうボタンです。「はい・いいえ」「参加・不参加」など、ユーザーに1つだけを選択してもらいたい場合に使用します。

チェックボックス

選択肢のなかから、複数の選択肢を選べるボタンです。「興味のあるトピック」など、ユーザーによる複数回答が予想される場合に使用します。

プルダウン

スクロールして1つの選択肢を選べるボタンです。都道府県など選択肢が多い場合に、見た目をスッキリさせるために使用します。

プライバシーマーク

個人情報の取り扱いに関する第三機関の審査基準を満たしていることを示すマークです。入力情報を適切に取り扱っていることをアピールするため、フォームの入力画面で提示されます。

はじめてフォームを作るならフォーム作成ツールがおすすめ

プログラミングでフォームを作るのは専門的な知識が必要で、時間がかかります。Googleフォームは手軽で優秀なツールですが、デザインが制限されることから顧客向けのフォームとしては不十分なケースも少なくありません。

フォームを作りたい場合は、知識がない人でも簡単にフォームを作れるように設計されており、さまざまなフォームに対応可能なフォーム作成ツールがおすすめです。

多くのツールが無料トライアルを実施しているため、使いやすそうなツールが見つかった時はまずテストするのが良いでしょう。

フォーム作成につなげよう

この記事で紹介したようなフォームの基本的な作り方を知っておくと、業務のさまざまなシーンで役立てられます。1種類のフォームの作り方を覚えれば他のフォーム作成にも応用できますので、まずは挑戦してください。一方で、プログラミングやセキュリティ対策など、ゼロから作ろうとするとハードルが高い面もあります。

formrunは幅広いフォームを作成できるツールです。直感的な操作で、誰でも簡単にフォームを作成できます。無料から利用可能なため、ぜひご利用をご検討ください。

https://form.run/