Web フォームの見た目を作ること自体は、それほど難しくありません。つまずきやすいのは「送信した後」です。データをどこへ送るのか、どう検証するのか、ボット送信をどう防ぐのか、そして成功・失敗をサイト側でどう表示するのか。このガイドでは、その一連の流れを ChatGPT と VIXNODE で進められる手順に分解します。
連携をステップごとに構築する
順番に進めても、作業中のステップだけを開いて確認しても構いません。各項目はその場で展開でき、縦のフロー全体も見失いません。
まず ChatGPT に必要なフォームを伝える項目、操作状態、後で接続するサービスまで整理します。
最初にユーザー向けの要件を明確にします。お問い合わせフォームなら、氏名、メール、電話番号、メッセージに加え、入力チェック、送信中、成功、エラー表示まで含めます。
VIXNODE でフォームのフロントエンドを完成させるUI、入力チェック、送信状態、モバイル操作を先に整えます。
Google Apps Script の Web App URL がまだなくても、フロント側は先に完成できます。ラベル、必須項目、Email 形式、RWD、Loading、成功／失敗状態を整えます。
ChatGPT に Google Apps Script の設定と Code.gs 作成を依頼するGoogle Sheet の準備から Web App 公開まで進めます。
最初から Apps Script のドキュメントをすべて読む必要はありません。サイトで使っている実際のフィールド名を ChatGPT に渡し、その構造に合わせて完全な Code.gs と設定手順を作ってもらいます。
Google Drive を ChatGPT に接続している場合、Google Sheet の作成・更新、列構成の確認、関連ファイルの操作を依頼できます。
Google Sheet や Apps Script を自分で作成し、その URL を ChatGPT に渡して、実際のファイル内容に合わせて続けることもできます。
/exec URL があること。reCAPTCHA を準備するブラウザで token を取得し、実際の検証は Apps Script で行います。
公開フォームでは reCAPTCHA により自動送信を減らせます。フロントエンドで token を取得してフォームデータと一緒に送り、Apps Script 側で検証してから保存します。
Web App URL と reCAPTCHA 情報を ChatGPT に渡すWeb 側の送信データと Apps Script 側の受信形式をそろえます。
Apps Script 側で特定の POST 形式や JSON レスポンス形式を使っている場合は、その情報も同じ依頼に含めます。
ChatGPT + VIXNODE で本番連携を完成させるfetch、Loading、二重送信防止、成功／失敗状態を処理します。
ここでは、フォーム値の取得、reCAPTCHA token の取得、リクエスト送信、Apps Script のレスポンスに応じた UI 更新までをつなぎます。
- 必須項目と Email 形式を検証する
- 送信中は Loading を表示する
- 二重送信防止のためボタンを無効化する
- 成功後はフォームをクリアする
- 成功後は reCAPTCHA をリセットする
- 失敗時は操作を戻し、分かりやすいメッセージを表示する
テストとデバッグを行ってから公開する成功ケースだけでなく意図的な失敗ケースも確認します。
理想的な確認フローは、フォーム入力 → reCAPTCHA → 送信 → Apps Script で受信・検証 → Google Sheets に新しい行 → Web サイトで成功表示、という流れです。
- 必須項目が未入力なら送信できない
- Email 形式が不正なら適切に案内する
- reCAPTCHA 未完了では成功扱いにならない
- reCAPTCHA 検証失敗時は Sheet に保存されない
- ネットワークや Apps Script エラーでも Loading のまま止まらない
- エラーレスポンスを誤って成功扱いしない
フロントエンドと Apps Script の役割を分ける
公開 HTML や JavaScript に含まれる情報は訪問者から確認できます。Web 側には reCAPTCHA Site Key や公開 Web App エンドポイントなど、ブラウザで必要な情報だけを置きます。Secret、非公開の検証値、セキュリティ判断は Apps Script 側に残します。
よくある質問
Google Apps Script を書けなくても完成できますか？
はい。フォーム項目と希望するデータフローを ChatGPT に伝えれば、Code.gs の作成と Apps Script の設定・デプロイを順番に案内してもらえます。
Google Drive Tool は何に使えますか？
Google Drive が接続されていれば、Google Sheet の作成・修正、列構成の確認、関連ファイルの操作を支援できます。自分で作成して URL を ChatGPT に渡す方法でも進められます。
reCAPTCHA はフロントエンド側だけで検証すれば十分ですか？
十分ではありません。フロントエンドでは token を取得し、実際の検証は Google Apps Script 側で行ってから送信内容を受け付けるべきです。
Google Apps Script の Web App URL をサイトコードに書いても大丈夫ですか？
ブラウザから利用する公開 Web App エンドポイント自体は通常 Secret ではありません。安全性はサーバー側検証、入力チェック、適切な権限設定で確保します。
フォーム項目を追加するたびに全部作り直す必要がありますか？
いいえ。追加した項目を ChatGPT に伝え、Web 側の送信データ、Code.gs、Google Sheet の列構成を一緒に更新すれば対応できます。