文化祭のアンケートフォームを作ろう！HTMLフォーム＋Google Forms連携

来場者の声を集めるアンケートフォームを作ろう

文化祭で「来てくれた人の感想を集めたい」「どの出し物が人気だったか知りたい」と思ったことはありませんか？

紙のアンケートは集計が大変ですが、Webフォームなら回答が自動で集まり、集計も簡単です。

この記事では、HTMLでアンケートフォームのデザインを作り、Google Formsと連携して回答を無料で集める方法を解説します。QRコードを印刷して教室に貼れば、来場者がスマホから簡単に回答できます。

HTMLが初めての人は、HTMLで最初のページを作ろうで基本を学んでおくとスムーズです。CSSの書き方がわからない人は、最初のCSSで基礎を確認しましょう。

完成イメージと全体の流れ

完成イメージ:

• スマホで見やすいアンケートページ
• 質問は3〜5問（選択式 + 自由記述）
• 送信ボタンを押すと回答がGoogle Formsに記録される
• QRコードを読み取るだけでアクセスできる

全体の流れ:

1. HTMLでフォームのデザインを作る
2. Google Formsで回答を受け取る設定をする
3. CSSでデザインをカスタマイズする
4. QRコードを作って教室に掲示する

Step 1: HTMLでフォームを作る

まず、アンケートの質問をHTMLで作ります。

<form class="survey-form" action="（Google FormsのURL）" method="POST">
  <h1>2年3組 お化け屋敷 アンケート</h1>
  <p>ご来場ありがとうございます！感想を教えてください。</p>

  <label>楽しさはどのくらいでしたか？</label>
  <div class="radio-group">
    <label><input type="radio" name="entry.123456" value="とても楽しかった"> とても楽しかった</label>
    <label><input type="radio" name="entry.123456" value="楽しかった"> 楽しかった</label>
    <label><input type="radio" name="entry.123456" value="ふつう"> ふつう</label>
  </div>

  <label>怖さはどのくらいでしたか？</label>
  <select name="entry.789012">
    <option value="">選んでください</option>
    <option value="とても怖かった">とても怖かった</option>
    <option value="少し怖かった">少し怖かった</option>
    <option value="怖くなかった">怖くなかった</option>
  </select>

  <label>感想を自由に書いてください</label>
  <textarea name="entry.345678" rows="4" placeholder="感想を入力..."></textarea>

  <button type="submit">送信する</button>
</form>

ポイント:

• name属性の「entry.123456」はGoogle Formsの質問IDに対応する（Step 2で確認）
• ラジオボタン（radio）は同じnameを指定すると1つだけ選べる
• textareaは自由記述用

📖 フォームタグの詳しい使い方は「HTMLフォームの作り方【input・button解説】」で学べます。

🔗 inputのtype属性一覧は「HTMLのinputタイプ一覧」で確認できます。

Step 2: Google Formsと連携して回答を集める

Google Formsを使えば、回答を無料で自動収集できます。

手順

1. Google Forms（forms.google.com）にアクセスしてフォームを作成する
2. HTMLと同じ質問を設定する
3. フォームの「送信」ボタン横の「…」→「事前入力したURLを取得」を選ぶ
4. URLに含まれる「entry.XXXXXX」の部分をメモする
5. HTMLの name 属性にこの値を設定する
6. form タグの action にGoogle FormsのURLを設定する

Step 3: CSSでデザインをカスタマイズする

HTMLフォームのデザインをCSSで整えましょう。

.survey-form {
  max-width: 480px;
  margin: 40px auto;
  padding: 32px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  font-family: sans-serif;
}

.survey-form h1 {
  font-size: 24px;
  margin-bottom: 8px;
}

.survey-form label {
  display: block;
  margin-top: 20px;
  font-weight: bold;
}

.survey-form select,
.survey-form textarea {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
}

.survey-form button {
  margin-top: 24px;
  width: 100%;
  padding: 14px;
  background: #0d9488;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
}

.survey-form button:hover {
  background: #0f766e;
}

ポイント:

• max-width: 480px でスマホでも見やすい幅に
• border-radius と box-shadow でカード風のデザインに
• ボタンは大きめ（padding: 14px）でタップしやすく
• font-size: 16px 以上にするとスマホでズームされない

フォームのデザインは自由に変えられます。クラスの出し物に合わせて、背景色やボタンの色を変えてみましょう。お化け屋敷なら黒背景に紫のボタン、カフェなら茶色系の配色にすると雰囲気が出ます。

フォントサイズは16px以上にしておくのが重要です。16px未満だと、iPhoneのSafariが自動でズームしてしまい、使いにくくなります。

Step 4: QRコードで来場者にアクセスしてもらう

アンケートページのURLをQRコードにして、教室に掲示しましょう。

QRコードの作り方

1. アンケートページをGitHub PagesやGoogle Formsで公開してURLを取得する
2. QRコード生成サイト（例: qr.io、QRのススメ）にURLを入力する
3. 生成されたQRコードを画像として保存する
4. A4用紙に大きく印刷して、教室の入口や出口に貼る

掲示のコツ

• 「スマホで読み取ってね！」と大きく書く
• QRコードの下にURLも文字で書いておく（読み取れない人用）
• 出口付近に貼ると、体験後すぐに回答してもらえる
• 複数箇所に貼ると回答率が上がる

応用：送信後にお礼メッセージを表示する

フォーム送信後に「ありがとうございました！」と表示したい場合は、JavaScriptでフォームの送信イベントを処理します。

HTMLフォーム + JavaScript の場合:

form.addEventListener('submit', function(e) {
  e.preventDefault();
  // ここで送信処理
  document.querySelector('.survey-form').innerHTML =
    '<h2>ありがとうございました！</h2><p>回答を受け付けました。</p>';
});

このコードでは、document.querySelectorを使ってHTML要素を取得し、innerHTMLで中身を書き換えています。このようにJavaScriptでHTMLを操作する技術をDOM操作と呼びます。詳しくはJavaScriptでHTMLを操作する方法で学べます。

ただし、この方法はGoogle Formsとの連携が複雑になるため、最初はiframe埋め込みか、Google Formsの標準お礼画面を使うのがおすすめです。

📖 イベント処理の基礎は「JavaScriptのイベント処理入門【onclick解説】」で学べます。

まとめ

あわせて読みたい記事

• 文化祭のウェブサイトを作ろう！ — 文化祭サイトの基本的な作り方
• 文化祭サイトをスマホ対応にする方法 — レスポンシブデザインでスマホ対応
• 文化祭のデジタル看板をHTMLで作ろう！ — 教室に表示するデジタル看板
• HTMLフォームの作り方【input・button解説】 — フォームタグの基礎
• HTMLのinputタイプ一覧 — inputのtype属性
• JavaScriptのイベント処理入門 — フォーム送信時の処理