2025年7月14日月曜日

Googleフォームと外部HTMLの連携(iframeを使わない方法)

 

方法の概要(※非公式)

  1. Googleフォームを作成し、その内部のフォーム構造と送信先URL(POST URL)を調べる

  2. 外部のHTMLページで、同じinput構造(name属性など)を持つフォームを自作

  3. そのフォームの action 属性に、Googleフォームの送信先URLを設定。

  4. ユーザーが送信すると、Googleフォームの送信先にデータがPOSTされ、Googleフォーム側のスプレッドシートなどに記録される。


<form action="https://docs.google.com/forms/d/e/xxxxxxxxxxxxxxxxxxxxxxx/formResponse" method="POST">
  <input name="entry.1234567890" type="text" placeholder="お名前">
  <input name="entry.0987654321" type="email" placeholder="メールアドレス">
  <input type="submit" value="送信">
</form>
🔹 entry.xxxxxxxxxx の値は、Googleフォームの実際の name 属性から取得する必要があります(フォームのソースを調査すればわかります)。


✅ 安全な代替案(推奨)

以下のような方法が、より確実で安全です:

  1. iframeで埋め込む(公式)

    • スタイル調整やレスポンシブ対応すれば見栄えも良くできる。

  2. Google Apps Scriptで中継サーバーを作る

    • 自分で作ったフォームからApps Script経由でGoogle Sheetsに書き込む。

    • POSTを受けてスプレッドシートに保存する自作APIを作る形。

  3. ZapierやMakeなどの連携サービスを使う

    • 自作フォーム → Webhook → Google Sheets といった連携。