Simple Registration System

一個簡單活動報名頁，收集姓名、電話 / WhatsApp、Email、是否學會會員，並透過 Google Apps Script 寫入 Google Sheets。 另附一份課後意見問卷（survey.html），收集參加者意見及對將來課程方向嘅興趣。

Files

• index.html: 報名頁結構
• styles.css: 頁面設計
• script.js: 表格驗證及提交邏輯
• survey.html: 課後意見問卷結構
• survey.css: 問卷設計
• survey.js: 問卷驗證及提交邏輯
• assets/workshop-poster.png: AI Workshop 活動海報
• google-apps-script/Code.gs: 報名表 Google Apps Script 後端
• google-apps-script/SurveyCode.gs: 意見問卷 Google Apps Script 後端

1. Create The Google Sheet

1. 開啟 Google Sheets，建立一個新 spreadsheet。
2. 將檔案命名，例如 Registration Responses。
3. 在 Google Sheet 入面按 Extensions -> Apps Script。

Code.gs 會自動建立名為 Registrations 的 sheet 分頁，並加上以下欄位：

• Timestamp
• Name
• Phone
• Email
• Is Member

系統會在收到 55 個有效報名後停止接受新提交。有效報名指 Registrations 分頁內有齊 Name、Phone、Email、Is Member 的 rows。測試或無效資料請從 Google Sheet 刪走，否則會佔用名額。

2. Add The Apps Script

1. 在 Apps Script editor 入面，刪除原本的內容。
2. 複製 google-apps-script/Code.gs 入去。
3. 按 Save project。

3. Deploy As A Web App

1. 在 Apps Script editor 按 Deploy -> New deployment。
2. 選擇部署類型：Web app。
3. Execute as 選擇 Me。
4. Who has access 選擇 Anyone。
5. 按 Deploy，授權 Google account。
6. 複製產生出來的 Web app URL。

4. Connect The Form

打開 script.js，將第一行：

const GOOGLE_SCRIPT_URL = "PASTE_YOUR_GOOGLE_APPS_SCRIPT_WEB_APP_URL_HERE";

改成你的 Web app URL，例如：

const GOOGLE_SCRIPT_URL = "https://script.google.com/macros/s/your-deployment-id/exec";

5. Test Locally

直接用瀏覽器打開 index.html，或者用簡單本地 server：

python3 -m http.server 8000

然後到：

http://localhost:8000

測試流程：

1. 不填資料直接提交，確認頁面會提示必填欄位。
2. 填姓名、電話 / WhatsApp、Email、是否學會會員。
3. 提交後見到成功訊息。
4. 回到 Google Sheets，確認 Registrations 分頁有新 row。

Deployment Options

這個 system 是靜態網頁，可以放到：

• GitHub Pages
• Vercel
• Netlify
• 任何支援 HTML/CSS/JS 的 web hosting

每次修改 google-apps-script/Code.gs 後，記得在 Apps Script 建立新的 deployment version，或者更新現有 deployment，後端改動才會生效。

Survey (課後意見問卷)

survey.html 係一份獨立嘅課後問卷，收集：

• 整體滿意度、內容幫助程度、內容深淺（評分題）
• 有興趣嘅將來課程主題（可多選 + 自由填寫）—— 用嚟參考將來課程方向
• 偏好課程深度、上課形式、時段、付費意願
• 自由意見，以及（可選）留低 Email 收將來課程通知

設定步驟同報名表一樣，但用獨立後端：

1. 喺同一個（或另開一個）Google Sheet 的 Apps Script，將 google-apps-script/SurveyCode.gs 內容貼入去並 Deploy 成 Web app。後端會自動建立名為 Survey 嘅分頁。

2. 將產生嘅 Web app URL 填入 survey.js 第一行：

   const GOOGLE_SCRIPT_URL = "https://script.google.com/macros/s/your-survey-deployment-id/exec";

3. 將問卷連結（survey.html）喺 Workshop 之後經 WhatsApp / Email 派俾參加者。

提示：報名表同問卷係兩個獨立 Apps Script 部署。如果想放喺同一個 Google Sheet，可以喺同一個 Apps Script project 內分開兩個 .gs 檔，但每個 Web app deployment 只會有一個 doPost，所以建議報名同問卷各自用一個 deployment（可以係同一 spreadsheet 的兩個 project，或兩個 spreadsheet）。