08

LAW · FORM AUTOMATION

山田法律事務所無料相談フォーム自動化

カテゴリ

法律事務所 / フォーム自動化デモ

技術

HTML / CSS / GAS / Notion API / Gmail

デプロイ

GitHub Pages

ステータス

LIVE

概要

架空の法律事務所「山田法律事務所」の無料相談受付フォームのデモです。シンプルなHTMLフォームの裏側に、Google Apps Script(GAS)を使った自動化フローを実装しました。

フォームを送信するだけで、問い合わせ内容がNotionのデータベースに自動記録され、相談者へGmailで受付完了メールが即時送信されます。よくある「手動でスプレッドシートに転記 → 手動でメール返信」という作業を完全にゼロにしたデモです。

自動化フロー

  • フォーム送信 — 氏名・メール・電話番号・相談内容を入力して送信
  • GAS(doPost)受信 — WebAppとしてデプロイしたGASがPOSTを受け取る
  • Notion API記録 — 相談内容をNotionデータベースに自動追加(ステータス「未対応」で初期設定)
  • Gmail自動返信 — 相談者に受付完了メールを即時送信
  • 成功画面表示 — フォームが完了画面に切り替わる

技術構成

  • HTML / CSS / JS — フロントエンド(フレームワークなし)
  • Google Apps Script — バックエンド(WebApp / doPost)
  • Notion API(v2022-06-28)— データベースへのページ作成
  • GmailApp — トランザクションメール送信
  • GitHub Pages — フロントのホスティング

こだわり

  • 電話番号が空の場合に Notion API がエラーを返す問題を修正(空文字ではなく null を渡す)
  • Notion DB のプロパティ名を curl で実際に確認してから実装(思い込みによるミスを防止)
  • エラーハンドリングをGAS側とフロント側の両方で実装