CRMのプロが書くマーケティングBLOG
<この記事でわかること>
アンケートフォームを自作したいと考えたとき、「HTMLの知識だけでどこまで作れるのか」「どんなタグを使えばいいのか」と悩む方は多いでしょう。フォームは一見難しそうに見えますが、基本的なタグの役割と組み合わせのルールを知れば、初心者でも作成できます。
本記事では、アンケートフォームを構成するHTMLの基本タグから、単一回答や満足度評価といった「設問形式別のコード実装例」までをわかりやすく解説します。さらに、入力漏れを防ぎユーザビリティを高める属性の活用術も紹介します。
アンケートフォームは、いくつかの基本となるHTMLタグを組み合わせるだけで作成できます。どのタグが全体の外枠を作り、どのタグが実際の入力部分を受け持つのかを理解しておくと、読みやすく崩れにくいフォームを設計できます。
後から項目を追加する際にも迷いにくくなるため、ここでは主要なHTMLタグの役割についてわかりやすく解説します。
formタグは、入力項目をひとまとめにして「どこへ・どのような方法で送るか」を定義するための外枠となるタグです。action属性でデータの送信先を指定し、method属性で送信方式を決定することで、サーバ側の処理とつなぎ合わせます。ファイル添付が必要な場合は、enctypeという指定も加えます。
<form action="/submit.php" method="post">
<!-- 入力項目 -->
<button type="submit">送信</button>
</form>labelタグは「この入力欄には何を記入すべきか」を明確にし、テキストと入力欄をシステム的に関連付ける役割があります。labelタグのfor属性と、入力欄のid属性を同じ名前にして対応させると、項目名をクリックしただけでも入力欄にカーソルが合うようになり、ユーザーの操作性が向上します。
見た目を整えるだけだとつい後回しにされるタグですが、入力ミスの防止やアクセシビリティの向上にも直結します。特にスマートフォンなどにおいて、ラジオボタンやチェックボックスをタップしやすくなるため、ラベル連携の有無で使い勝手が大きく変わります。
<label for="q1">お名前</label>
<input id="q1" name="name" type="text" />inputタグは、1行のテキスト入力やメールアドレス、電話番号のほか、ラジオボタンやチェックボックスなど、幅広い入力形式に使える非常に汎用性の高いパーツです。type属性を変更するだけで入力の種類を切り替えることができ、name属性で送信されるデータの名前（キー）を定義します。
また、value属性は初期値や選択肢のデータとして使われ、サーバ側で集計する際の基準となります。typeの種類によっては、ブラウザに標準搭載されている入力補助や入力内容のチェック機能が働くため、目的に合ったものを正しく選ぶだけでもユーザーにとって親切です。
<input type="text" name="company" placeholder="例：株式会社〇〇" />
<input type="email" name="email" />ご意見やご要望など、長文の自由記述を求める場合にはtextareaタグを使用します。inputタグとは異なり複数行のテキストを入力できるため、感想をしっかり集めたい場面に最適です。
rows（行数）やcols（文字数）といった属性で表示サイズを調整することも可能ですが、実際の開発現場ではCSSを用いて幅や高さを管理し、必要に応じてJavaScriptで文字数カウント機能を付けるとより使いやすくなります。
<textarea name="comment" rows="5" placeholder="ご意見をご自由にお書きください"></textarea>都道府県や年代など、選択肢が多い設問を用意する場合は、selectタグとoptionタグを組み合わせてプルダウンメニューにすると画面がすっきりとまとまります。それぞれのoptionタグのvalue属性に「集計で実際に使うデータ（値）」を設定しておくことで、後から回答を分類しやすくなります。
ユーザーに選択を促すためのテクニックとして、一番上に「選択してください」というダミーの選択肢を配置しておくのが定番の作り方です。ただし、選択肢が2〜3個と少ない場合は、プルダウンよりもラジオボタンですべての項目を見せた方が一目で選べるため、設問のボリュームに合わせて使い分けると良いでしょう。
<select name="age">
<option value="">選択してください</option>
<option value="20s">20代</option>
<option value="30s">30代</option>
</select>フォームの内容を送信するボタンは、buttonタグを使って作成するとデザインやクリック時の挙動をコントロールしやすくなります。注意点として、フォーム内に配置されたbuttonタグは、type属性を省略すると自動的に送信（submit）ボタンとして扱われることがあります。
そのため、意図しないタイミングでのデータ送信を防ぐ意味でも、必ずtype=”submit”やtype=”button”のように種類を明記しておくと安心です。
<button type="submit">送信する</button>
<button type="button">戻る</button>
同じアンケートでも、単一回答や複数回答、満足度評価など、設問の意図に合わせて最適な入力部品を選ぶことが大切です。
回答者にとっての使いやすさと、管理者にとっての集計しやすさを両立させるためにも、属性やラベルの適切な付け方を一緒に確認しておきましょう。
ラジオボタンは、複数の選択肢から「1つだけ選ぶ」設問に最適なパーツです。実装のポイントは、同じグループとして扱いたい選択肢のname属性をすべてそろえることです。
さらに、value属性には集計時に扱いやすいデータ値を入れておくと、サーバ側での判定がスムーズになります。また、labelタグでテキスト部分を囲んでクリックできる範囲を広げておくと、スマートフォンからでもタップしやすくなります。
<p>満足度を選んでください</p>
<label><input type="radio" name="satisfaction" value="5"> とても満足</label>
<label><input type="radio" name="satisfaction" value="4"> 満足</label>
<label><input type="radio" name="satisfaction" value="3"> ふつう</label>複数回答を許可したい場合には、チェックボックスを使用します。同じグループのname属性の末尾に「[]」をつけて配列として受け取る設計にしておくと、選ばれた複数の値がまとめてサーバに送られます。
選択肢ごとにvalue属性を統一したルールで設定しておけば、集計時に表記ゆれが起きにくくなります。「最低1つは選んでほしい」といった複雑な条件はHTMLだけでは表現しづらい場面もあるため、JavaScriptを使って入力内容をチェックする設計も検討してみてください。
<p>当てはまるものをすべて選んでください</p>
<label><input type="checkbox" name="feature[]" value="price"> 価格</label>
<label><input type="checkbox" name="feature[]" value="quality"> 品質</label>
<label><input type="checkbox" name="feature[]" value="support"> サポート</label>1から5までの段階評価などを作成する場合は、ラジオボタンを応用すると実装も集計もシンプルにまとまります。画面上は数字だけでも成立しますが、「1＝不満、5＝満足」のように意味が伝わる補足説明を添えておくと、回答者の誤解を減らすことができます。
選択肢を横並びにすると回答のテンポが良くなりますが、スマートフォンでは画面幅の都合で押しにくくなることもあるため、画面サイズに合わせて折り返すようなレスポンシブ設計にするのが現実的です。
<div class="scale">
<label><input type="radio" name="score" value="1">1</label>
<label><input type="radio" name="score" value="2">2</label>
<label><input type="radio" name="score" value="3">3</label>
<label><input type="radio" name="score" value="4">4</label>
<label><input type="radio" name="score" value="5">5</label>
</div>連絡先の入力欄は、type属性の指定によってユーザーの入力体験が大きく変わります。メールアドレスにはtype=”email”を指定すると、ブラウザ標準の形式チェックが働きやすくなり、スマートフォンでは「@」キーが付いた専用キーボードが表示されることが多くなります。
同様に、電話番号にはtype=”tel”を指定することで、数字が入力しやすいキーボードが自動的に立ち上がるという利点があります。ただし、入力された内容が本当に正しいかどうかは、最終的にサーバ側で再チェックする設計にしておくのが安全です。
<label>メール <input type="email" name="email" required></label>
<label>電話 <input type="tel" name="tel" placeholder="例：09012345678"></label>日付を入力してもらう設問では、type=”date”を使用すると便利なカレンダー画面が呼び出されるため、入力ミスを大幅に減らすことができます。予約日や利用日など、日付のフォーマットがきっちり決まっている設問と非常に相性が良いパーツです。
一方で、閲覧しているブラウザやOSによってカレンダーの見た目や操作感が異なることがあります。そのため、あらかじめ入力欄に例や補足文を表示しておき、古いブラウザ向けに普通のテキスト入力に変わるような対策も視野に入れておくと安心です。
<label>利用日 <input type="date" name="use_date"></label>フォームは基本的なHTMLタグを配置するだけでも動作しますが、「属性」を追加することで入力ミスを減らし、ユーザーが途中で回答をやめてしまうのを防ぎやすくなります。
ここでは、ユーザビリティを高める代表的なHTML属性の使い方について解説します。
placeholder属性は、入力欄の中に薄いグレーの文字で記入例を表示し、何を記述すればよいかをユーザーに直感的に伝えるためのものです。郵便番号や電話番号など、ハイフンの有無といった形式が想像しにくい項目で特に効果を発揮します。
ただし、プレースホルダーの文字はユーザーが入力し始めると消えてしまうため、項目名の説明文をすべてここに入れてしまうと、後から何を入力すべきかわからなくなり迷いの原因になります。
<input type="text" name="zip" placeholder="例：123-4567">required属性を入力タグに追加すると、その項目が空のまま送信ボタンを押された際に、ブラウザが自動的にエラーメッセージを出して送信を止めてくれます。
最低限の入力漏れを手軽に防ぐことができるため、まずは絶対に答えてほしい必須項目からこの属性をつけていくとすぐに効果を実感できます。
<input type="email" name="email" required>autofocus属性は、ページが開かれた瞬間に特定の入力欄へ自動的にカーソルを合わせるための属性です。項目数が少ないシンプルなフォームで「まずここから入力してほしい」という意図が明確な場合、ユーザーが入力欄をクリックする手間を1つ省くことができます。
一方で、スマートフォンで閲覧した際には自動的にキーボードが立ち上がって画面の大部分が隠れてしまい、かえって使い勝手を損ねるケースもあります。そのため、用途を限定して慎重に使うのが無難です。
<input type="text" name="name" autofocus>name属性は、入力されたデータがサーバへ送られる際の「項目名」を決める重要な属性です。この設計が曖昧だと、後からデータを集計したり他のシステムと連携させたりする際に非常に読みづらくなってしまいます。
一方のvalue属性は、入力欄にあらかじめ初期値を入れておいたり、ラジオボタンやチェックボックスの「選択肢の裏側のデータ」を定義したりするために使います。画面に表示するテキストと、システムに送るデータを切り分けておくことで、将来デザイン上の文言が変わっても裏側の集計ルールを変えずに済むという大きなメリットがあります。
<input type="text" name="company" value="">
<input type="radio" name="plan" value="basic"> ベーシックmaxlength属性は、その入力欄に打ち込める文字数の上限を指定するものです。自由記述の欄などで文字数が長くなり過ぎると、システム上の制約に引っかかってエラーになることがあるため、あらかじめ上限を決めておくことで運用上のトラブルを未然に防げます。
実際のWebサービスでは、単に入力が止まるだけだとユーザーが「なぜこれ以上入力できないのか」と不安になってしまうため、あと何文字入力できるかを示す簡単なカウンターを画面に表示してあげると親切です。
<textarea name="comment" maxlength="500"></textarea>
アンケートは単に作成して終わりではなく、対象者への配信から回答の回収、そして結果の分析までを含めた全体的な運用設計が大切です。当社の「Synergy!」を活用すれば、顧客データベースやメール配信機能と連動しているため、回答の条件分岐や集計を含めた一連の流れをスムーズにまとめることができます。
「Synergy!」は、顧客データの管理からマーケティング施策の実行までを1つのシステムで完結できるCRMです。
フォームやアンケートで集めた貴重な回答を、単なるデータとして終わらせるのではなく、顧客一人ひとりの情報に直接紐付けることができます。そのため、特定の回答をした人を抽出してメールを配信するなど、次のアプローチへシームレスにつなげられるのが特長です。
一般的なアンケート専用ツールでは、集計まではできてもその後のフォローは別のシステムで行う必要があり、データや業務の分断が起こりがちです。「Synergy!」であれば一連の運用工程を1つにまとめられるため、アンケート回収後の具体的なアクションまでを見据えた効率的な設計が可能になります。
参考記事：CRM・顧客管理システム「Synergy!（シナジー）」
「Synergy!」のアンケート機能には、実務担当者が頭を悩ませがちな「回答率の向上」「回答者に応じた設問の出し分け」「効率的な集計と分析」をサポートする機能が豊富にそろっています。
たとえば、質問数が多くなってしまう場合には、ページを分けて段階的に答えてもらうマルチページ形式を採用して途中離脱を防ぐことができます。また、前の回答内容に応じて次の質問を自動的に分岐させたり、質問の表示順をランダムに入れ替えたりと、目的に合わせた柔軟なフォーム設計が可能です。
さらに、顧客データベースと連携して一人ひとりに専用のアンケートURLを個別配信できるため、「1人1回まで」といった回答制限や正確な回収率の把握も容易に行えます。集めた回答はシステム内でクロス集計やグラフ化ができ、自由記述の分析を補助する仕組みもあるため、自社で開発・運用するのに比べて、時間もコストも大幅に抑えることができます。
参考記事：CRM・顧客管理システム「Synergy!（シナジー）」のアンケート機能
株式会社エスクリ様は、顧客満足度を数値化してサービス品質を安定させる目的で、2009年から15年という長きにわたり「Synergy!」のアンケート機能を継続利用されています。
システム導入の際には、既存の営業支援システムの顧客データと連携できること、その顧客データをもとにメールでアンケートを配信できること、そして回答結果を再びSFA側に蓄積できることの3点を必須条件として掲げ、顧客情報とアンケートが完全に連動する理想的な運用を実現されました。
実際の業務では、ご成約から結婚式当日までの長い準備期間に合わせて、各ステップで満足度を継続的に可視化しています。総合評価を点数で入力してもらうことで、担当スタッフがお客様のリアルな反応を直感的に把握できるようになり、社内での結果共有やサービスの改善、ノウハウの蓄積が飛躍的に進みました。
これらの取り組みによって、サービス品質の指標が社内の共通言語として深く浸透し、現在でも90％を超える非常に高い顧客満足度を維持し続けています。
「CRM導入の失敗あるある7選」や「SFAとCRMの違い」「顧客管理レベルチェックシート」3つの資料がセットでダウンロードできます。
アンケートフォームを自作する際、「データが送信できない」「スマートフォンの画面で表示が崩れてしまう」「集計作業が面倒」といったつまずきは非常によく起こります。こうしたトラブルの解決策を事前に押さえておくことで、作業の手戻りを大幅に減らすことができます。
ここでは、開発の現場でよく耳にする質問を中心に、すぐに役立つ考え方と対処法について解説します。
HTMLだけではメールを送信することはできません。HTMLはあくまでブラウザ上にアンケートの入力画面を表示し、見た目を整えるための仕組みだからです。
ユーザーが送信ボタンを押した後の「メールを送る」「データを保存する」「管理者に通知する」といった裏側の処理は、サーバ側で動くプログラムが担当することになります。
ラジオボタンのパーツ自体はインライン要素ですが、項目名であるラベルをブロック要素に設定していると自動的に縦並びになってしまいます。横並びに変更したい場合は、CSSを使ってレイアウトを調整するのが基本です。
親要素に対してdisplay: flex;を指定したり、ラベル自体をdisplay: inline-block;に設定したりするのが定番の解決策です。ただし、選択肢のテキストが長い場合、パソコンの画面では綺麗に横並びになっていても、スマートフォンの狭い画面では途中で不自然に折り返してしまい、レイアウトが崩れやすくなります。
.scale { display: flex; gap: 12px; flex-wrap: wrap; }
.scale label { display: inline-flex; align-items: center; gap: 6px; }
「簡単さ」を最優先したいのであれば、送信された回答データをスプレッドシートなどに自動で蓄積していく形が最も扱いやすいでしょう。サーバ側で受け取ったデータをシートの新しい行に追記していく処理を組み込めば、簡単に集計やグラフ化が行えます。
ただし、誰でもアクセスできる公開フォームからスプレッドシートに直接データを書き込む仕組みは、管理が複雑になりがちです。そのため、最初はサーバ側で安全にデータを受け取り、個人情報を除いた集計に必要な項目だけをシートへ書き込むような設計にしておくと安心です。
HTMLの基本タグを組み合わせることで、自社のデザインに合わせた自由なアンケート画面を作成できます。しかし、こうしたシステムをゼロから開発し、セキュリティを保ちながら保守し続けるリソースが社内にない場合は、フォーム作成からデータ管理までが一体となったシステムの導入が確実です。
当社の「Synergy!」を利用すれば、サーバ側の複雑なプログラミングを行うことなく、安全なWebアンケートをすぐに公開できます。入力された回答は自動で顧客データベースに蓄積されるため、手作業での集計やエクセルへの転記作業がなくなり、セグメント別のメール配信や分析といった次の施策へスムーズに移行できます。
「Synergy!」を提供するシナジーマーケティングは、システムの提供にとどまらず、回答者の離脱を防ぐフォーム設計から、集めたデータを活用したマーケティング施策までをトータルで支援しています。「フォームの実装や運用保守に課題を感じている」「顧客の声を安全に管理・活用したい」とお考えの方は、ぜひお気軽にご相談ください。
「Synergy!」の具体的な製品機能については、ぜひ以下のフォームから資料をダウンロードしてご確認ください。
クラウド事業本部マーケティング室
Web広告代理店にて、不動産・人材・ECなど多岐にわたる業界の営業および運用実務に従事。
現在はシナジーマーケティングにて、Web広告の設計・メディア選定といったオンライン施策から、展示会の企画運営・データ分析などのオフライン施策まで幅広く手掛ける。
チャネルを横断して獲得リードの質を定性的・定量的に評価し、全体最適化されたマーケティング戦略を推進。
