Google Sites の問い合わせフォーム

Formgong team ·

これを Google Sites に貼ってください。送信先は Formgong です。データベースも Resend も要りません。

300 月あたりの無料送信

Google Sitesでのフォームの仕組み

Googleサイトにはスタイル可能なネイティブのお問い合わせフォームがありません。「挿入→フォーム」はGoogleフォームの埋め込みだけです。サイトに合わせるなら「挿入→埋め込み→コードを埋め込む」でHTMLを貼ります。

埋め込みはサンドボックス付きiframe内で動きます。マークアップと任意のCSSはスニペット内に置いてください。リダイレクトはiframeだけを動かすことがあるので、枠内のお礼メッセージを優先してください。埋め込みはGoogleサイトのヘルプを参照。

Google Sitesでの設定手順

  1. Formgongでフォームを作成し、アクセスキーをコピーします。
  2. Googleサイトで「挿入→埋め込み→コードを埋め込む」を開き、Formgong向けの自己完結HTMLフォームを貼ります(_lang、access_key、botcheck)。
  3. 次へ→埋め込みをクリックし、サイズを調整します。内容に合わせて自動では伸びません。
  4. 公開し、本番URLでテストします(編集プレビューと違う場合があります)。電話通知が欲しければFormgongでTelegramを接続します。
Google Sites
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="ja">
  <label>お名前 <input type="text" name="name" autocomplete="name" placeholder="山田 太郎" required></label>
  <label>メールアドレス <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>メッセージ <textarea name="message" placeholder="ご用件をご記入ください" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>この欄は空のままにしてください<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  
  <button type="submit">送信</button>
</form>

Formgongか、Googleフォームか?

Sheetsの回答グリッドとGoogleのUIで足りるならGoogleフォームのままで構いません。

ブランドに合わせたHTML、Telegram、Google外の受信箱が欲しければFormgongを。

よくある質問

埋め込み内でJavaScriptは動きますか?

はい、iframe内では動きます。スクリプトとスタイルはスニペット内に。サイト本体の見た目は変えられません。

お礼ページへのリダイレクトがおかしいのはなぜ?

リダイレクトはiframeだけを動かすことが多いです。埋め込み内の成功メッセージか、target=_blankでお礼ページを開く方が無難です。

Apps Scriptは必要ですか?

いいえ。埋め込みがFormgongへ直接送ります。Apps ScriptはGoogle内ワークフロー向けの別経路です。

無料ではじめる