操作教學 · STEP-BY-STEP

線上報名網站
跟著做，一步一步建好它

對象　承辦同仁照著操作即可時間　約 30 分鐘費用　完全免費步驟　共 8 步

每一頁＝一個步驟。看到 ✓ 完成檢查就代表這步做對了，再往下一頁。

報名

成果 · What You'll Build

做完之後，你會有什麼

一頁線上報名表單：姓名、報名日期、服務機構、職稱、Email、電話
報名成功後自動寄確認信給報名者
一份自動匯整的報名清單（Google 試算表，可下載 Excel）
免主機、免費，可放上網站或嵌入

跟著後面 8 個步驟做完，就能直接上線收報名。

準備 · Before You Start

開始前，先準備這些

✉個人 Gmail

用來寄確認信、存報名資料。請勿用學校／醫院帳號，常被擋公開存取。

💻一台電腦

有瀏覽器即可，全程在網頁上操作。

📄兩個程式檔

Code.gs（後端）＋ form.html（表單）。由 Claude 產生，見 STEP 1。

重要：部署會綁定你的 Gmail 與試算表，請全程用你自己的 Google 帳號操作。

路線圖 · Roadmap

全流程 8 步，先看全貌

1

用 Claude 產生程式碼

2

打開檔案、複製程式碼

3

貼進 Google Apps Script

4

修改 CONFIG 活動設定

5

授權並自我測試

6

部署，取得 /exec 網址

7

把 /exec 接回表單

8

測試並正式上線

接下來每一頁就是一步，照著做即可。

先認識 · Don't Confuse

三個「Google」別搞混

名稱	是什麼	在本系統的角色
Google 表單 / Forms	Google 內建問卷工具	❌ 完全用不到（報名表是自製 form.html）
Google Apps Script	程式編輯器　script.google.com	✅ Code.gs 貼這裡（後端）
Google 試算表 / Sheets	試算表	✅ 報名資料自動存這裡（程式自動建）

記住：程式碼貼到 Apps Script，報名清單在 試算表，Google 表單用不到。

STEP 1 / 8用 Claude 產生程式碼

跟 Claude 講需求，產生程式碼

👉 你要做的：把報名需求用白話講給 Claude，它會產生 Code.gs 與 form.html。講到四要素就能一次到位：欄位・自動回信・報名清單・名額候補。

「幫我做一個線上報名網站：欄位要姓名、報名日期、服務機構、職稱、Email、電話；報名成功自動寄確認信；所有報名寫進 Google 試算表清單；請產生前端表單與後端程式，並告訴我部署步驟。」

✓ 完成檢查：你的電腦出現兩個檔——Code.gs（後端）與 form.html（表單）。（若已有這兩個檔，直接到 STEP 2）

示意 · Built with Claude

Claude 產生程式碼長這樣

Claude

你

幫我做一個線上報名網站：欄位要姓名、報名日期、服務機構、職稱、Email、電話；報名成功自動寄確認信；所有報名寫進 Google 試算表清單。

✦

好的，我已依你的需求產生兩個檔案，並存到桌面「報名網站」資料夾：

📄 Code.gs 後端・寫表＋寄信📄 form.html 報名表單

接著把 Code.gs 貼進 Apps Script 就能部署上線（步驟我也附給你）。

👉 你只要用白話講需求，程式碼與表單由 Claude 直接產生並存到你的電腦

STEP 2 / 8打開檔案、複製程式碼

打開 Code.gs，複製全部內容

1

找到檔案

桌面 →「報名網站」資料夾 → 看到 Code.gs。

2

用記事本開啟

.gs 不能直接雙擊：在 Code.gs 上按右鍵 → 開啟方式 → 記事本。

3

全選複製

在記事本按 Ctrl+A 全選 → Ctrl+C 複製。

✓ 完成檢查：Code.gs 的全部內容已複製到剪貼簿。

STEP 3 / 8貼進 Google Apps Script

貼進 Apps Script 程式編輯器

1

開新專案

登入個人 Gmail → 開 script.google.com → 點「新增專案 / New project」。

2

清掉預設內容

點中間編輯區 → Ctrl+A 全選 → Delete，刪掉預設的 myFunction。

3

貼上並存檔

Ctrl+V 貼上你的程式碼 → Ctrl+S 存檔。

✓ 完成檢查：編輯區顯示你的程式碼，檔名旁的小圓點／星號存檔後消失。

小技巧 · Another Way

另一種開啟 Apps Script 的方式

除了 STEP 3 的 script.google.com，也能從 Google 試算表直接打開 Apps Script：

開啟你的 Google 試算表 ▸ 上方選單「擴充功能 / Extensions」 ▸ Apps Script

差別：從試算表開啟，程式會綁定這份試算表，報名資料直接寫進它；用 script.google.com 新建，則由程式自動建立試算表。兩種都能用，擇一即可。

✓ 完成檢查：看到 Apps Script 程式編輯畫面，就接著做 STEP 4。

示意 · What It Looks Like

貼上後，Apps Script 編輯器長這樣

Apps Script　·　報名後端

▷ 執行🐞 偵錯函式：_selftest ▾部署 ▾

檔案

Code.gs

1// ← 把整段 Code.gs 貼在這裡2const CONFIG = {3 CAP: 0,4 SHEET_NAME: '報名資料',5 HEADERS: ['收件時間', '活動名稱', …],6 EVENT_TIME: '2026年7月5日 …',7};8function doPost(e){ … }

⬆ 清空預設的 myFunction 後，在程式區 Ctrl+V 貼上你的 Code.gs

STEP 4 / 8修改 CONFIG 活動設定

改 CONFIG，填你的活動資訊

程式最上方的 CONFIG 是唯一要改的地方——只動引號內文字，別刪逗號或引號。

設定	改成什麼	說明
EVENT_TIME	2026年7月5日（六）13:30–16:30	活動時間，自動寫進確認信
EVENT_PLACE	北醫 ○○大樓 ○○廳	活動地點
CONTACT	承辦人王小姐 02-xxxx	聯絡方式
ORG_NAME	○○○主辦單位	信末署名
CAP	0　或　50	0＝不限名額；數字＝限額

✓ 完成檢查：改完按 Ctrl+S 存檔。

STEP 5 / 8授權並自我測試

授權帳號，並自我測試

1

執行 _selftest

上方函式下拉選單選「_selftest」→ 按「執行 / Run」。

2

通過授權

審查權限 → 選帳號 →「Google 尚未驗證」是正常畫面 → 進階 / Advanced → 前往專案 → 一路允許。

3

看結果

下方執行紀錄出現「Sheet OK: https://…」。

✓ 完成檢查：出現 Sheet OK ＝報名試算表已自動建立、且可寄信。

示意 · Authorization

授權畫面長這樣（別被嚇到）

Google

Google 尚未驗證這個應用程式

這個應用程式要求存取你 Google 帳戶的權限。在開發者通過驗證前，建議先確認你信任它。

▾ 進階 / Advanced

前往「報名後端」（不安全 / unsafe）

👉 這是你「自己專案」的正常畫面：點「進階 → 前往專案」→ 一路「允許」即可

STEP 6 / 8部署，取得 /exec 網址

部署成網頁應用程式

1

新增部署

右上「部署 / Deploy」→「新增部署」→ 齒輪 ⚙ 選「網頁應用程式 / Web app」。

2

關鍵設定

執行身分＝我自己；誰可以存取＝所有人。

3

複製網址

部署 → 複製結尾為 /exec 的網頁應用程式 URL。

記住：日後只要改了程式，都要「管理部署 → 編輯 → 版本：新版本」重新部署，否則跑舊版。/exec 網址不會變。

✓ 完成檢查：你手上有一段 https://…/exec 網址。

流程圖 · Deploy Flow

部署流程圖：6 步點擊路徑

1

部署 ▾

點右上角藍色 「部署」 按鈕

2

下拉選 「新增部署」

3

⚙

點齒輪 ⚙ 選 「網頁應用程式」

4

執行身分：我自己 ✓

執行身分設為 「我自己」

5

存取權：所有人 ✓

誰可以存取設為 「所有人」

6

部署⧉ 複製 /exec

按部署，複製 /exec 網址

首次部署會跳出授權畫面（見前頁「授權畫面長這樣」），通過後即完成。

示意 · Deploy Settings

部署設定畫面長這樣

新增部署 — 網頁應用程式

類型 Type網頁應用程式 / Web app

執行身分 Execute as我自己（your@gmail.com）✓

誰可以存取 Who has access所有人 Anyone ✓

取消部署

網頁應用程式 URL：https://script.google.com/…/exec⧉ 複製

👉 兩個綠色設定是關鍵：執行身分「我自己」、存取權「所有人」；部署後複製 /exec 網址

STEP 7 / 8把 /exec 接回表單

把 /exec 接回報名表單

兩種做法擇一，把剛剛的 /exec 網址接進前端表單：

交給 Claude

把 /exec 網址貼回對話，Claude 幫你填進 form.html 的 WS_API，並驗證能否正常報名與回信。

自己改

用記事本開 form.html，找到 WS_API 那行，把引號內換成你的 /exec 網址，存檔。

✓ 完成檢查：form.html 的 WS_API 已是你的 /exec 網址。

STEP 8 / 8測試並正式上線

測試一筆，然後上線

1

填一筆測試

用瀏覽器打開 form.html，填一筆真實 email 並送出。

2

確認三件事

有收到確認信？試算表多一列？（若有限額）剩餘名額 −1？

3

放上網站

把 form.html 上傳到網站，或用 iframe 嵌入現有頁面。

✓ 完成檢查：收到信＋清單有資料＝你的報名系統已成功上線！

驗收 · Final Checklist

上線前最後檢查清單

報名表單能正常填寫並送出
報名者收到確認信（含活動時間、地點、報名摘要）
Google 試算表自動新增該筆資料
（若有限額）剩餘名額正確、額滿能轉候補

四項都打勾，就可以安心對外公告報名了。

維護 · After Launch

報名資料在哪？日後怎麼改？

📋看報名清單

Google 雲端硬碟找「報名資料 - …」試算表，每筆自動新增一列，可下載 Excel。

✏改活動設定

只改 Code.gs 的 CONFIG（時間、地點、名額、信件）即可。

🔄改完要重部署

管理部署 → 編輯 → 版本：新版本 → 部署，新設定才生效。

最常見的雷：改了程式卻「沒反應」，幾乎都是忘了重新部署新版本。

完成 · DONE

完成！
你的線上報名系統已上線

表單　報名者填六欄清單　Google 試算表自動匯整通知　Gmail 自動確認信

需要改名額、加候補、防重複報名、客製信件？再跟 Claude 講一句就能改好。

完成