目次
本記事で扱う内容
・Google Form を API 的に使う設計・formResponse への直接 POST・entry.xxx を使ったパラメータ連携・iframe を使った thanks ページ制御
・Apps Script による自動返信メール
この記事では、Google Form の見た目は一切使わず、成果物は完全に自前 UIという前提で話を進めます。
今回つくる構成
・フロントエンド：HTML / CSS / JavaScript・データ保存：Google Form
・メール送信：Google Apps Script
Google 側は データ保存＋メール送信の基盤として割り切って使います。
1. Google Form の送信先（formResponse）を取得する
Google Form には、回答送信用のエンドポイント formResponse が存在する。
＜取得手順＞
1. Google Form を作成
2. プレビュー画面を開く
3. DevTools → Network タブ
4. 送信時のリクエストから formResponse URL を確認https://docs.google.com/forms/u/0/d/e/XXXXXXXXXXXX/formResponse
https://docs.google.com/forms/u/0/d/e/XXXXXXXXXXXX/formResponse
この URL を、独自フォームの action に指定します。
2. entry.xxx を使ったパラメータ連携
Google Form の各質問には一意な entry ID が割り当てられている。
＜entry ID の確認方法＞
「事前入力したリンクを取得」
URL クエリに含まれる entry.123456789
＜実装例＞
<form
id="custom-form"
action="https://docs.google.com/forms/u/0/d/e/XXXXXXXXXXXX/formResponse"
method="POST"
target="hidden_iframe">
<input type="text" name="entry.111111111" required>
<input type="email" name="entry.222222222" required>
<button type="submit">送信</button>
</form>
name が一致していれば、Google Form 側にそのまま保存される。
3. Google Form 側の設定
＜自動保存を無効化＞
設定 → 全般 →
・「回答を保存」OFF
・「編集リンクを表示」OFF
独自フォーム運用では、Google 側の余計な挙動をできるだけ排除するのがポイントです。
4. iframe を使って thanks ページを出す
Google Form 標準の完了画面は使用せず、 iframe の onload をトリガーに thanks ページへ遷移させる。
＜見えないiframeを用意する＞
<iframe
id="hidden_iframe"
name="hidden_iframe"
style="display:none; width:0; height:0; border:none; opacity:0"
onload="if(submitted){window.location='thanks.html';}">
</iframe>
JavaScript
<script>
let submitted = false;
document.getElementById('custom-form').onsubmit = function() {
submitted = true;
};
</script>
＜ポイント＞
・target="hidden_iframe" により画面遷移を抑制
・初期ロード誤判定防止のためフラグ管理
・fetch / no-cors を使わずに完結
実案件でも、かなり事故りにくい構成です。
5. Apps Script で自動返信メールを飛ばす
Google Form 単体では柔軟な自動返信が難しいため、 フォーム送信トリガー＋Apps Script で対応する。
function autoReply(e) {
const itemResponses = e.response.getItemResponses();
let recipientEmail = "";
for (let i = 0; i < itemResponses.length; i++) {
if (itemResponses[i].getItem().getTitle() === "メールアドレス") {
recipientEmail = itemResponses[i].getResponse();
break;
}
}
if (!recipientEmail) return;
const subject = "ご応募ありがとうございました";
const body = "この度はフォームへのご入力、誠にありがとうございました。
" +
"内容は正常に受け付けられております。
" +
"後日、必要に応じて担当者よりご連絡いたします。
" +
"-------------------------";
GmailApp.sendEmail(recipientEmail, subject, body, {
from: "contact@testform.com",
name: "フォーム製作委員会"
});
}
トリガー設定
イベント：フォーム送信時
まとめ
・無料で使える（アカウントさえあればすぐ始められる）・Google 基盤のためセキュリティレベルが高い
・UI は完全に自由に作れる（Google Form の見た目は一切使わない）
・バックエンド実装・DB設計・メール送信を自前で用意しなくてよい
・UI は完全に自由に作れる（Google Form の見た目は一切使わない）
・バックエンド実装・DB設計・メール送信を自前で用意しなくてよい
