入力フォームの作り方は？効果を出すためのポイントや用語集も解説

各Webサイトに必ずと言っていいほど設置されている入力フォーム。しかし、実際の役割や作り方を知らない人も多いでしょう。実は、入力フォームは作り方1つで成果に差が生じます。

そこで今回は入力フォームの作り方を中心に、作成後の流れや運用を成功させるコツなどを紹介します。入力フォームの設置でCV率をアップさせたい、できるだけ効果の高いフォームを作りたい方はぜひ参考にしてください。

▼ 無料で高品質なフォームを作成するならformrunがおすすめ
formrunは、専門的な知識なしにビジュアル豊かなフォームを作成できるツールです。豊富なテンプレートから用途に応じたものを選び、テキストを入力するだけで簡単にフォームを編集・設置できます。無料で利用できるためまずはお試しください。

入力フォームとは

入力フォームとは、ユーザーが必要な情報を入力して送信するためのものです。Webサイトに設置されている会員登録フォームやアンケートフォーム、ECサイトの購買フォームなどはすべて入力フォームの一種となります。入力フォームといってもさまざまな種類があり、用途によって使い分けることが重要です。

指定された内容をユーザー自身が入力していくため、正しい情報を収集できます。また、入力する項目も企業側が自由に設定できるので、集めたい情報を絞り込むことができます。

入力フォームを作る3つの方法

入力フォームを作るには、自作・ツールの利用・外注の3つの方法があります。ここでは、入力フォームを作る3つの方法をそれぞれ詳しく見ていきましょう。

PHPやHTMLを使って自分で作成する

1つ目の方法はPHP・HTML・CSSなどを使ってコーディングを行い、自作をする方法です。自作をするためにはコーディングに関する知識と技術が必要になります。コーディングとはプログラムを書くことを指す言葉で、画像や文字などのデータを専用のコードを使って符号化します。

例えば、Webページにテキストと写真を設置するのにも、このコーディング作業が必要です。テキストなら文字サイズや色、太字などをコードを使って設定していきます。

メリット

• デザイン、機能、ユーザー体験をすべて思い通りに作成ができます。

デメリット

• デザイン、開発、テストが必要で時間がかかります。
• 入力フォームの自作はなかなか難しく、初心者では上手く作ることができません。
• 新しいブラウザのバージョンや新技術の登場に対応するためには、継続的な開発が求められます。
• PHPやHTMLの知識だけでなく、CSS、JavaScript、データベース管理など、他の技術にも精通している必要があり、これらのスキルがない場合、学習するための追加的な時間が必要になります。

もともとプログラミングやコーディングの技術がない場合は、避けた方が良いでしょう。

HTMLで作成する方法に関しては、以下の記事に記載しています。合わせてご覧ください。
>> 【初心者向け】HTMLフォーム(form)での申し込みフォームの作り方とは？サンプルも紹介

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

2つ目は、フォーム作成ツールを利用して入力フォームを作成する方法です。フォーム作成ツールとは入力フォームを作成するサポートをしてくれるもので、自作するときのような専門知識や技術は必要ありません。

メリット

• ツールの中にコードが組み込まれているので、テンプレートなどを使用するだけで簡単に作成できます。
• フォームの編集も専門知識なしで誰でも可能なため、属人化を防ぐことができます。
• ほとんどのフォーム作成ツールでは、メールマーケティングツール、CRMシステム、データベースとの統合が簡単にできるように設計されているため、バックエンド開発が不要になります。

デメリット

• ツールによって機能が異なるため、自社に合ったツール選びが必要です。
• ほとんどのフォーム作成ツールはサブスクリプションベースで提供されており、継続的なコストがかかります。

ツールを使ってオリジナリティのある入力フォームを作成したいときには、カスタマイズ性に優れたものを選ぶのがおすすめです。人気のフォーム作成ツールの中には、色やデザインを細かく設定できる便利なものもあります。また、それぞれの企業イメージに合うテイストのツールを選ぶようにしましょう。

▼ デザイン性の高いフォーム作成ツールならformrunがおすすめ
formrun（フォームラン）は、信頼性や顧客満足度の向上を目指す幅広い企業の皆様にご活用いただいています。実際にビジネス利用において、formrunユーザーの”7割”がGoogleフォームから変更しています。ぜひお試しください。

外注する

3つ目は、別の会社に外注する方法です。フォーム作成やWebサイト制作を専門とする企業が作成してくれるので、それぞれの企業イメージに合ったものに仕上がります。

自社で作る時間がない場合や、プロに任せて高品質な入力フォームを作成したい場合におすすめです。

メリット

• 細かな注文も受けて貰えるので、こだわりを持ったフォームの作成が可能です。
• 自社の時間と労力に余裕ができます。

デメリット

• 作成の相場は30,000円前後とそれほど高いわけではありませんが、外注をする場合には費用がかかってしまいます。
• 改善をする度に修正依頼をしなければなりません。
• コミュニケーションが不十分だと期待した通りの製品が得られない可能性があります。

自社で作る時間がない場合や、プロに任せて高品質な入力フォームを作成したい場合におすすめです。

入力フォーム作成の流れ

入力フォームの作成方法を問わず、制作は以下の4ステップで行われます。

1. 目的を明確にする
2. 入力フォームを作成する
3. 確認画面や終了画面を設置する
4. 運用と改善を行う

それぞれのステップを詳しく見ていきましょう。

目的を明確にする

まずは、入力フォームを設置する目的を明確にしましょう。入力フォームにはさまざまな種類があり、目的によって設定する項目やデザインが異なります。入力フォームの主な種類は以下の通りです。

• お問い合わせフォーム
• メールフォーム
• 会員登録フォーム
• 予約登録フォーム
• メルマガ登録フォーム
• アンケート入力フォーム
• ログインフォーム
• イベント参加申請フォーム
• キャンペーン応募フォーム
• ECサイト商品購入フォーム

例えばお問い合わせフォームなら企業への意見を集めることが目的なので、詳しい個人情報よりも意見を入力する部分を大きく設ける必要があります。会員登録フォームではどのようなユーザーが登録してくれているのか知るためにも、性別・年齢・住んでいる地域など必要な属性が分かる項目を設置するのがおすすめです。

キャンペーンの応募・イベント参加・ECサイトの購入情報の入力に使用するフォームなら、詳しい個人情報を入力できるようにしておきましょう。このように、まずは入力フォームを何に使うのか、その目的や作成するフォームの種類などを決めておく必要があります。

▼ formrunのテンプレートを使ってフォームを作成する
formrunでは、120種類以上のテンプレートからお好みのものを選ぶだけでフォームを作成することができます。

入力フォームを作成する

目的と作成するフォームの種類が決まったら、次は実際に入力フォームを作成します。入力フォームの作成ではユーザーが情報を入力する部分を作るので、個人情報を安心して入力できる工夫をしましょう。特に最近では、SSL暗号化と呼ばれるセキュリティ対策が重要視されてきています。

また、ユーザーが入力しやすくなるように項目数は最小限で設定し、それぞれの企業イメージに合うデザインを意識して作るのがおすすめです。せっかく入力フォームを作成しても、ユーザーが送信まで到達しなければ意味がありません。

入力フォームを見たユーザーができるだけ多く情報を入力して送信してくれるよう、細かい部分にも気を配って作成しましょう。作成中はどうしても企業目線になってしまうので、完成したら一度ユーザー目線で見直してみると改善点が分かりやすくなります。

確認画面や終了画面を設置する

入力フォームを作成したら、次は確認画面や終了画面の設置に移ります。確認画面はユーザーが入力した内容を確認するページで、「この内容で送信してよろしいですか？」などといったメッセージが表示される部分です。

ユーザーはこの画面を見ながら、入力した情報を本当に送信するかどうか、間違いがないかどうかなどを確認します。確認画面がないと、急に情報が送信される形になるためユーザーが不安になってしまいます。

また、確認画面のさらにあとに表示されるのが終了画面です。手続きが終了したことを伝えるための画面で、終了画面がないと本当に手続きが進んだか分からず不安になります。確認画面や終了画面はなくても成り立ちはしますが、ユーザーの不安を取り除くためにも設置しておくのがおすすめです。

運用と改善を行う

入力フォーム・確認画面・終了画面がそれぞれ作成できたら、いよいよフォームの運用がスタートします。実際にWebページ内に作成した入力フォームを設置し、ユーザーから情報が送信されるかどうかチェックしましょう。入力フォームは運用をスタートしたら終わりではなく、そこから何度も改善と運用を繰り返していく必要があります。

せっかく運用をしても効果が出なければ意味がないので、定期的に情報が送信されているユーザーの人数や割合を確認しながら改善をしてください。入力されないフォームは、どこかに必ず問題点があります。情報を分析しながら、問題点を改善してよりよい入力フォームを目指しましょう。

入力フォーム作成をするなら覚えておきたい用語集

ここでは、入力フォームを作成する際に覚えておきたい用語を紹介します。EFOやCVRなど、入力フォームを使ったマーケティングには欠かせない用語もあるので、ぜひチェックしてください。

EFO（エントリーフォーム最適化）

EFOは「Entry Form Optimization」の略で、エントリーフォームの最適化を意味します。入力フォームは作成したら終わりではなく、定期的にEFOを行いながら改善していかなければなりません。EFOでは入力項目の見直しやデザインの変更、分かりにくい部分の修正などを行います。運用した初期状態のまま放置してしまうと、情報を送信してくれるユーザーが減ってしまう可能性があるので注意しましょう。

EFOについて下記の記事で詳しく説明しているので、合わせてご覧ください。
>> EFOとは？入力フォーム最適化の重要性や効果的な施策、おすすめツールを詳しく解説

CVR（コンバージョンレート）

CVRは「Conversion Rate」の略で、コンバージョン率を意味します。コンバージョン率はWebページを閲覧してくれたユーザーのうち、企業側が設定した行動をしたユーザーの割合のことです。例えば入力フォーム設置の場合では、100人がページを閲覧して30人が情報を送信してくれたらCVRは30％となります。

ただし、CV（CVR）の定義はサービスや企業によっても異なります。ページビュー数やセッション数、ユーザー数が分母、問い合わせ完了数が分子となるケースが多くなっています。目的に応じて定義を変えて構いません。

CVRはマーケティングにおいて重要な指標の1つなので、入力フォームを運用するなら必ず測定しておきましょう。

CTA（行動喚起）

CTAは「Call To Action」の略で行動喚起、つまりはユーザーに取って貰いたい行動に誘導することを指します。資料請求や会員登録、資料のダウンロードなどを促すために設置しているボタンリンクなどがCTAです。CTAを設置することでユーザーの意欲をかき立て、行動へと移して貰える可能性が高くなります。

テキストボックス

テキストボックスは、ユーザーが情報を入力する場所です。四角い箱型のものが多いため、テキストボックスと呼ばれています。名前・住所・電話番号など、それぞれの入力項目に対してテキストボックスを設置します。1行のみの入力と複数行の入力ができるテキストボックスがあるので、入力項目によって使い分けましょう。

チェックボックス

チェックボックスは、複数の選択肢の中から複数個を選んで貰うときに使用するアイテムです。よくある「複数回答可」などと記載されている質問項目の多くが、このチェックボックスを使って作られています。

選択肢の横に四角が記載されており、選択するとチェックマークがつきます。一目で自分が選んだ答えが分かるので、あとで見直したいユーザーにとっても便利です。

プルダウン

プルダウンは、タップやクリックで下に選択肢が表示されるアイテムです。選択肢が多い設問に向いているアイテムで、複数の選択肢の中から1つもしくは複数を選んで貰いたいときに使用します。

回答時以外は選択肢が隠れている状態なので、ほかの項目を回答する際にも邪魔になりません。また、プルダウンを使用すると入力フォーム全体がスッキリとした印象になり、ユーザーからの評価もアップしやすくなるでしょう。

プレースホルダテキスト

プレースホルダテキストは、テキストボックス内に最初から記載されているテキストです。例えば、氏名のところに「山田太郎」などと記載されているのがプレースホルダテキストで、ユーザーが何を入力するか迷わないように設置します。

入力例のような形で使われていることが多く、プレースホルダテキストがあるだけでユーザーはスムーズに情報を入力できるようになります。

ラジオボタン

ラジオボタンは、複数の選択肢の中から1つのみを選んで貰いたいときに使用するアイテムです。未選択の状態では白い丸が表示されており、選択した項目には白い丸の中に黒い丸が入ります。チェックリストは複数個選択、ラジオボタンは1つだけ選択して欲しいときに使いましょう。

レスポンシブ

レスポンシブはPC・タブレット・スマホなど、ページを閲覧している端末のサイズによって表示形式を切り替えることです。

最近ではスマホでWebページを閲覧するユーザーが多くいるので、レスポンシブ対応の入力フォームにすることは必須条件とも言えます。スマホでPCの表示を見ると非常に見づらく、フォームへの入力もしにくくなってしまうので注意しましょう。

フォーム離脱率

フォーム離脱率とは入力フォームのあるページには到達したものの、入力や送信をせずにページを離れてしまったユーザーの割合を指します。100人がページを閲覧し、そのうち70人が入力せずページを離れた場合のフォーム離脱率は70％です。

平均値は40～50％とされているので、それより高い場合には見直しが必要になります。フォーム離脱率の高い入力フォームは何かしら問題がある場合が多く、その際はEFOを行ってフォームの改善をしましょう。

埋め込み型フォーム

埋め込み型フォームは、Webページの途中に埋め込まれた入力フォームを指します。入力フォームは別ページが設けられていることも多いですが、埋め込み型フォームの場合には同じページ内に設置されているので移動をする手間がありません。使い方によってはCVRを大きく伸ばせる可能性もあります。

▼ 埋め込み型フォームを簡単に作成したいならformrunがおすすめ
formrunで作成したフォームはフォーム作成後に発行できるHTML要素（スクリプト）をサイトにコピー＆ペーストで貼り付けるだけで埋め込むことができます。詳しくは以下のページをご覧ください。
>>フォームの共有設定・サイト埋め込み｜formrun（フォームラン）

入力フォーム作成のポイント

入力フォームを効率よく活用するには、いくつかのポイントを押さえる必要があります。ここでは、より効果を出すための作成ポイントを5つ紹介します。

入力項目は最小限に抑える

入力項目は最小限に抑え、ユーザーにとってストレスのないようにしましょう。本当に欲しい情報をメインにしつつ、ほかの項目は任意入力にするのもおすすめです。入力項目が多いと、途中で嫌になって離脱されてしまう可能性があります。

デザインを重視する

目的に合うデザイン、会社の雰囲気に合うデザインにすることも大切です。デザインは作るのが難しいと思われがちですが、ツールを使えばテンプレートである程度の雰囲気は決められます。あとは微調整するだけでも、十分おしゃれなフォームが作成できます。

エラー表示を付ける

間違った形式で入力しているとき、ユーザーがすぐ分かるようにエラー表示が出ると親切です。どこの項目がエラーなのかハッキリ分かるようにし、エラー表示自体も見やすくしておきましょう。何が間違っているのか表示できると、よりユーザーが入力しやすくなります。

セキュリティ面を考える

セキュリティ面に関しては、SSL暗号化の導入が重要視されてきています。入力フォームには個人情報を入力するので、セキュリティ対策はしっかりしておきましょう。ユーザーにとっても、セキュリティ面がしっかりしていると安心して入力できるのでアクセス数などのアップに繋げられます。

スマホの入力に対応させる

入力フォームはスマホから利用するユーザーが多いため、必ずスマホ入力にも対応させましょう。ツールを使えば使用している端末ごとに自動で変更してくれるので、ユーザーが快適に入力できます。

運用後の改善ポイント

入力フォームは運用して終わりではなく、その後に改善を重ねてよりよくしていく必要があります。ここでは、運用後の改善ポイントを2つ見ていきましょう。

データを収集して分析

運用後のフォーム離脱率やCVRなどをチェックしながら、どの程度フォームが機能しているのか分析しましょう。マーケティングにおいては分析がとても重要になるため、数値化できるデータは収集しておくのがおすすめです。離脱率が高い場合にはフォームの内容を改善、CVRが低い場合には導線を見直します。

離脱率を下げるEFO（入力フォーム最適化）を行う

運用後には離脱率を避けるため、EFOを行う必要があります。以下のような項目をチェックしながら、フォームの見直しと最適化を行ってください。

• 入力項目数が多くないか
• エラーや警告は分かりやすいか
• 自動入力が設定されているか
• 入力完了までのステップが表示されているか
• 分かりやすい入力例があるか
• 入力場所が分かりやすいか

EFOツールのおすすめについて下記の記事で詳しく説明しています。合わせてご覧ください。
>> EFO施策でCVRを改善するには？成功事例とおすすめツール

無料で使えるおすすめのフォーム作成ツール3選

formrun（フォームラン）・Googleフォーム・Formzu（フォームズ）と、 無料で使えるおすすめのフォーム作成ツールを3つ紹介します。

formrun（フォームラン）

formrunは無料のプランがありながらも、機能性に優れているのが魅力です。40種類を越える豊富なテンプレートが用意されており、最短30秒で入力フォームが作成できます。また、以下のような豊富な機能も利用可能です。

• フォーム作成機能
• 住所補完機能
• フリガナ自動入力機能
• 全角入力の自動半角化
• 顧客の管理や共有
• iframe埋め込み
• データの管理
• 豊富なメール機能
• reCAPTCHA
• SSL暗号化
• 24時間365日のサーバー監視

無料プランのほかに、BEGINNER・STARTER・PROFESSIONALと3つのプランが用意されています。有料プランではフォームの作成数がアップするほか、使える機能も増えるのが特徴です。

サイト内リンクを入れたいときに便利な、iframe埋め込みにも対応しています。WordPressへのフォーム埋め込みも簡単にでき、初心者のマーケターにもおすすめのツールです。

Googleフォーム

GoogleフォームはGoogleが提供しているフォーム作成ツールです。Googleのアカウントを持っていれば、誰でも無料で利用できます。テンプレートは17種類以上用意されているので、フォーム作成の目的や種類に合うものを選んで使用しましょう。

複数のメンバーで同時編集ができるのも特徴で、チームでマーケティングを行っている企業にもおすすめです。写真などにあわせて自動で背景色を選んでくれる機能もあり、カスタマイズ力がありながらも気軽に使用できます。送信された内容の自動集計も可能なので、アンケートやイベント参加フォームへの利用にもぴったりです。

Formzu（フォームズ）

Formzuは提供スタートから20年以上が経過しているツールで、多くの企業が利用しています。メールフォームに特化したツールとしても知られており、個人情報に関するセキュリティが充実しているのも特徴です。

無料で使えるフリープランのほかに、3つの有料プランが用意されています。利用頻度や目的などにあわせ、最適なプランを選んで利用してください。

まとめ

今回は、入力フォームの作り方やおすすめのツールを紹介しました。入力フォームといってもさまざまな種類があり、目的にあわせたデザインや形式を選ぶ必要があります。また、入力フォームの作成にはコーディング作業が必要ですが、便利な作成ツールを使えば知識も技術も必要ありません。

これから入力フォームを設置したいと考えている方は、ぜひ本記事を参考にしながらツールを使って手軽にフォーム作成をしてみましょう。

▼ ビジネスで使うなら「formrun」がおすすめ

• デザイン性の高いフォームにし、回答者が入力しやすいフォームにしたい
• サイトやサービスの世界観にあったフォームにしたい
• 自動返信メール・ファイルアップロード項目など、より充実した機能を使いたい

などありましたら、フォーム作成ツール「formrun」を検討してみるのもおすすめです。

reCAPTCHA機能やSSL/TLSによるデータ暗号化、サーバーは24時間体制で管理するなどセキュリティ体制も充実しており、大切な顧客データを安心して扱えます。無料での利用もできますので、ぜひ一度、お試しください。

formLab編集部

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

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