📝 #48 動態表單自動回報系統：Glassmorphism UI + 拖曳式表單編輯器 + 數據分析儀表板 + Google Chat Webhook 通知

黃凱揚（阿凱老師） · 桃園市龍潭區石門國民小學 · 2026-05-21

#48「Form System」是阿凱用 React + Vite + Firebase 寫的動態表單系統，**取代 Google Apps Script 表單**。Glassmorphism 毛玻璃 UI + 動態流體背景 + 拖曳式表單編輯器 + 數據分析儀表板 + 表單模板庫 + 3 主題色 + Google Chat Webhook 即時通知 + CSV 匯出。

為什麼老師不滿意 Google 表單？

Google 表單功能完整但 UI 死板：

• ❌ 介面老氣（從 2008 到現在沒大改）
• ❌ 手機體驗不好
• ❌ 沒有即時通知（要回到 Google Sheet 看）
• ❌ 後台醜
• ❌ 想做 拖曳式自訂表單要寫 Google Apps Script

阿凱的 #48 動態表單系統 反向：現代化 UI + 拖曳式編輯器 + 即時通知 + 取代 Google Apps Script。

#48 真實怎麼做？

真實名稱：「Form System (React + Firebase)」

README 第一行寫：「旨在取代舊有的 Google Apps Script 表單」 — 明確定位反 Google 表單。

完整 7 大功能：

功能 A：🎨 Glassmorphism 毛玻璃 UI

• 毛玻璃半透明設計
• 動態流體背景
• 視覺差距比 Google 表單拉開 10 倍

功能 B：📝 動態表單（拖曳式編輯器）

• 透過後台視覺化編輯器輕鬆建立各類表單
• 不用寫程式

功能 C：多主題支援

• 內建 藍 / 綠 / 粉三種主題色
• 不同表單不同氣氛（活動報名用粉 / 行政表單用藍）

功能 D：即時通知（Google Chat Webhook）

• 學生 / 家長填完表單
• 自動推 Google Chat
• 老師不用一直回去 Google Sheet 看新填

功能 E：CSV 匯出

• 一鍵匯出全部填表資料
• Excel 處理或寄給行政

功能 F：v1.2.4 視覺大升級（2026-01-29）

• ✅ UI 視覺大升級（繽紛色彩風格）
• ✅ 拖曳式表單編輯器
• ✅ 數據分析儀表板
• ✅ 表單模板庫

功能 G：v1.2.2 工程進化

• ✅ CI/CD 自動化部署（GitHub Actions）
• ✅ PWA 支援可安裝到桌面

真實技術棧

• Frontend：React + Vite + Tailwind CSS
• Backend：Firebase（Firestore + Authentication）
• Icons：Lucide React
• 權限管理：
  • Admin：完整權限
  • Editor：僅管理自己建立的表單
• 環境變數設定管理員憑證（避免敏感資訊外洩）
• 部署：cagoooo.github.io/form/ 或 Firebase Hosting

v1.2.4 「表單模板庫」的價值

對老師 — 不用每次都從零做表單：

→ 老師選模板 → 改幾個欄位 → 5 分鐘上線（比從零做快 10 倍）。

跟 #47 同意書的關係

#47 是「法律文件」 / #48 是「資訊蒐集」 — 兩個工具服務不同需求。

教學情境

學期初家長問卷：

• 用 #48 拖曳建表單
• 家長填完 → Google Chat 通知老師
• 不用回 Google Sheet 看

教師研習報名：

• 用模板建表單
• 全校老師掃 QR 填
• CSV 匯出給人事

學生意見調查：

• 用粉色主題（學生友善）
• 拖曳改欄位「我最想要的校外教學地點」
• 即時看數據分析儀表板

校外活動報名：

• 跨班活動 → 多選核取方塊
• Glassmorphism UI 比 Google 表單漂亮

配對工具推薦

• #47 學生肖像授權同意書 — 法律效力簽名
• #62 親職教育日 — 同款學校活動 + 報名場景
• #2 行政業務協調系統 — 校內行政平台

適用對象

• 國中小所有任課老師（學期初家長問卷）
• 教務 / 學務組（活動報名 / 研習）
• 教師研習承辦
• 補習班 / 安親班（學生資料蒐集）
• 想看「現代化 Google 表單替代品」的開發者

想試試？

→ 前往 #48 動態表單自動回報系統

下次要做表單 — 試試 Glassmorphism UI + 拖曳編輯器 → 不會想回去 Google 表單。