はじめに｜なぜ「自作フォーム＋Googleフォーム連携」が今おすすめなのか？

企業サイトやLP、キャンペーンページなどで必須となるお問い合わせフォーム。

多くの企業が以下の悩みを抱えています。

✅ フォームを作りたいがサーバー側のバックエンド開発ができない
✅ できればスプレッドシートで回答管理したい
✅ 確認画面・自動返信などユーザー体験も強化したい
✅ セキュアに低コストで実現したい

👉 この全てを解決できるのが「自作HTML＋Googleフォーム＋Google Apps Script（GAS）」の連携構成です。

本記事では、完全実務レベルで**「入力 → 確認 → 完了」** の3ステップを実装し、さらにGASで自動返信まで行う手順を初心者〜実務エンジニア向けにわかりやすく解説します。

本記事で学べること

✅ HTMLで自由なレイアウトのフォームを作成する
✅ JavaScriptで確認画面（dl, dt, dd）を生成する
✅ GoogleフォームにPOSTで安全にデータ送信する
✅ GAS（Google Apps Script）で自動返信メールを送信する
✅ 実務の運用で注意すべきセキュリティやUXのポイント

👉 この記事を保存してテンプレート化すれば、今後のフォーム開発が一気に効率化します！

全体構成図

ユーザー入力 (index.html)
↓
確認画面 (confirm.html)
↓
Googleフォームへ送信
↓
自動返信メール (GAS)
↓
完了画面 (complete.html)
↓
スプレッドシートに自動記録

1. 入力画面（index.html）を作成

HTML5の基本フォームを使います。ここではPOSTで確認画面に渡す設計です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせフォーム</title>
</head>
<body>
  <h1>お問い合わせフォーム</h1>
  <form action="confirm.html" method="post">
    <label>お名前<br>
      <input type="text" name="name" required>
    </label><br>

    <label>メールアドレス<br>
      <input type="email" name="email" required>
    </label><br>

    <label>お問い合わせ内容<br>
      <textarea name="message" required></textarea>
    </label><br>

    <button type="submit">内容を確認する</button>
  </form>
</body>
</html>

ポイント

バリデーションはrequired属性で最低限のエラーチェック
この段階ではまだGoogleフォームには送信しません

2. 確認画面（confirm.html）の作成

確認画面はユーザー体験に大きく貢献します。

ここでは**dl, dt, ddタグを使い可読性の高い構成**にします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>確認画面</title>
</head>
<body>
  <h1>ご入力内容の確認</h1>
  <dl id="confirm-list"></dl>

  <form id="back-form">
    <button type="button" id="back">戻る</button>
  </form>

  <form id="submit-form" action="https://docs.google.com/forms/d/e/YOUR_FORM_ID/formResponse" method="post">
    <!-- Googleフォームのentryに合わせる -->
    <input type="hidden" name="entry.123456" id="entry-name">
    <input type="hidden" name="entry.789012" id="entry-email">
    <input type="hidden" name="entry.345678" id="entry-message">
    <button type="submit">送信する</button>
  </form>

  <script src="js/form.js"></script>
</body>
</html>

確認画面用のform.js

window.addEventListener('DOMContentLoaded', () => {
  const params = new URLSearchParams(history.state || new FormData(document.forms[0]));
  const fields = [
    { key: 'name', label: 'お名前' },
    { key: 'email', label: 'メールアドレス' },
    { key: 'message', label: 'お問い合わせ内容' }
  ];
  const list = document.getElementById('confirm-list');

  fields.forEach(f => {
    const dt = document.createElement('dt');
    dt.textContent = f.label;
    const dd = document.createElement('dd');
    dd.textContent = params.get(f.key);
    list.appendChild(dt);
    list.appendChild(dd);
    document.getElementById(`entry-${f.key}`).value = params.get(f.key);
  });

  document.getElementById('back').addEventListener('click', () => history.back());
});

👉 確認画面があると入力ミスによるクレーム防止に非常に効果的です。

3. 完了画面（complete.html）

送信完了後のユーザー安心感の演出も大切です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>送信完了</title>
</head>
<body>
  <h1>送信が完了しました</h1>
  <p>お問い合わせありがとうございました。自動返信メールをご確認ください。</p>
</body>
</html>

👉 フォーム送信後、Googleフォームの設定でリダイレクトURLを指定し、complete.htmlに誘導します。

4. Googleフォームの準備

Googleフォームを作成し、項目（お名前・メールアドレス・お問い合わせ内容）を用意
フォームURLの /forms/d/e/FORM_ID/viewform から FORM_ID を取得
各項目に対応する entry.XXXXXX のIDを調べる（Chromeの開発者ツールを使用）
確認画面のhidden項目に正しいentryIDを埋め込む

5. Google Apps Script（GAS）で自動返信メール設定

GASコード

function onFormSubmit(e) {
  const responses = e.namedValues;
  const email = responses['メールアドレス'][0];
  const name  = responses['お名前'][0];
  const message = responses['お問い合わせ内容'][0];

  const subject = '【自動返信】お問い合わせありがとうございます';
  const body =
    `${name} 様\n\n` +
    `お問い合わせありがとうございます。以下の内容で受け付けました。\n\n` +
    `【お問い合わせ内容】\n${message}\n\n` +
    `---------------------------------\n` +
    `〇〇株式会社\n` +
    `https://example.com/`;

  MailApp.sendEmail(email, subject, body);
}

設定手順

Googleフォームの「回答先」スプレッドシートを開く
メニュー「拡張機能 → Apps Script」で新規スクリプト作成
上記コードを貼り付け
トリガー設定：onFormSubmit を「フォーム送信時」に紐づけ
初回はGoogleから権限承認を求められる（承認必須）

6. 動作確認フロー

index.html → 入力
confirm.html → 内容確認
GoogleフォームにPOST送信
complete.html → 完了メッセージ表示
入力したメールに自動返信が届く
スプレッドシートに回答が自動蓄積

👉 実際の商用サイトでもこの構成は非常に安定しています。

7. 実務ノウハウ＆注意点まとめ

課題	解決策
タイムゾーンの不一致	Googleフォームは基本JST。クライアントの日時依存を最小限にする
entryIDずれ	Chrome開発者ツールのフォーム要素検証でID確認
GAS権限承認	個人アカウントではなくGoogle Workspace運用がおすすめ
確認画面の入力保持	localStorageやsessionStorageで実装可能
スパム対策	reCAPTCHA v3の併用推奨

まとめ｜自作フォーム＋Googleフォーム＋GASは現場で超使える構成

✅ バックエンド開発不要でも高機能フォーム運用が可能
✅ Googleスプレッドシートで回答管理も簡単
✅ 自動返信でユーザー満足度向上
✅ 実務現場でも安定稼働中の実践的手法

特に中小企業・LP制作・サーバーレス運用現場での導入実績が非常に多い構成です。

(Visited 3 times, 1 visits today)