PR

【保存版】HTMLだけで作れるアンケートフォームサンプル集＆実践カスタマイズガイド

アンケート
記事内に広告が含まれています。

アンケートフォームを自社サイトや個人ブログに設置したいけれど、プラグインに頼らずHTMLだけでシンプルに実装したいというニーズは根強いものです。

本記事では、必要最低限のマークアップからバリデーション、スタイルカスタマイズ、サーバー連携の基本までを紹介します。

HTMLアンケートフォームの基本構造

まずはフォームの土台となる<form>タグの基本構造を押さえましょう。action属性で送信先URLを指定し、method属性でGETかPOSTを選択します。アンケートではユーザー入力が多いため、セキュリティ上POSTが推奨されます。

フォーム内には<input>や<textarea>、<select>などの要素を置き、ユーザーからの回答を受け付けます。各要素にはname属性を必ず付与し、サーバー側で受け取れるように設計してください。

必須項目にはrequired属性を付けることで、HTML5ネイティブのバリデーションが働きます。JavaScriptを使わずとも最低限の入力チェックが可能です。

主要な入力フィールドと使い分け

テキスト入力には<input type=”text”>、メールアドレスには<input type=”email”>、自由記述には<textarea>を用います。選択式は<select>と<option>、複数選択には<input type=”checkbox”>を使い分けましょう。

ラジオボタン（<input type=”radio”>）は同じname属性を共有することで一つだけ選ばせられます。選択肢が多い場合は<select>、見た目を重視する場合はラジオボタンを選ぶと良いでしょう。

隠しデータを渡す<input type=”hidden”>も活用し、アンケートIDやセッション情報を混入できます。ただしクライアント側で改ざんされる可能性があるため、重要データはサーバー側で再検証してください。

サンプルコード①：シンプルアンケートフォーム

まずは最小構成のサンプルを見てみましょう。以下のコードは「お名前」「メール」「ご意見」を受け付けるだけのシンプルなフォームです。

<form action="/submit.php" method="post">
  <label>お名前（必須）：<input type="text" name="name" required></label>
  <label>メールアドレス（必須）：<input type="email" name="email" required></label>
  <label>ご意見：<textarea name="comments"></textarea></label>
  <button type="submit">送信する</button>
</form>

上記をコピペすれば即座にアンケートフォームが完成します。required属性により必須入力チェックが働き、type=”email”でメールアドレスの形式チェックもOKです。

バリデーションと入力チェックの強化

HTML5だけでもかなりのバリデーションが可能ですが、より細かく制御したいならpattern属性を使います。正規表現で文字数や文字種を制限できるため、電話番号や郵便番号の入力チェックに便利です。

pattern属性による形式チェック

例えば郵便番号（7桁）の場合、pattern=”^\d{3}-?\d{4}$”と設定すると、ハイフン付き・なし両対応で7桁チェックができます。ユーザーに入力方法を指南するため、placeholder属性で例を表示しておくと親切です。

JavaScriptで即時フィードバック

さらに親切なUIを目指すなら、JavaScriptでkeyupイベントを監視し、入力内容に応じてエラーメッセージをリアルタイム表示しましょう。サーバーサイドの二重チェックも忘れずに実装します。

スポンサーリンク

スタイルカスタマイズとレスポンシブ対応

デフォルトのフォームは味気ないため、CSSで見た目を整えます。フォーム全体にmax-widthを設定し、margin: 0 autoで中央揃えにすると、サイドバー表示でも美しく収まります。

フォームの基本CSS例

form { max-width: 600px; margin: 0 auto; padding: 1em; background: #f9f9f9; }
label { display: block; margin-bottom: 0.5em; }
input, textarea { width: 100%; padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; }
button { padding: 0.7em 1.5em; background: #0073e6; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #005bb5; }

上記CSSをテーマのstyle.cssに追加すれば、まるでプロがデザインしたようなフォームに生まれ変わります。レスポンシブも標準でOKです。

データ送信先とサーバーサイド処理の基本

HTMLフォームは表示だけでは完結しません。actionで指定したPHPやNode.jsのエンドポイントを実装し、POSTされたデータを受け取り、メール送信やDB保存を行います。

PHPでの簡易処理サンプル

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $name = htmlspecialchars($_POST['name'], ENT_QUOTES);
  $email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
  $comments = htmlspecialchars($_POST['comments'], ENT_QUOTES);
  $to = 'info@example.com';
  $subject = '新規アンケート回答';
  $message = "名前: $name\nメール: $email\nご意見:\n$comments";
  mb_send_mail($to, $subject, $message);
  echo '送信ありがとうございました。';
}
?>

上記コードをsubmit.phpとして配置すれば、受信メールにアンケート結果が届きます。データベース保存やCSV出力も、PDOやfputcsvを使って簡単に追加できます。

まとめ：HTMLサンプルを応用して独自フォームを作成

本記事では「アンケートフォームのHTMLサンプル」をテーマに、基本構造、サンプルコード、バリデーション、CSSカスタマイズ、サーバー処理までを一貫して解説しました。

紹介したサンプルをベースに、項目を増やしたりデザインを変更したりするだけで、オリジナルのアンケートフォームが完成します。自社サイトやブログにコピペし、即座に実戦投入してみてください。

タイトルとURLをコピーしました