操作教學 · STEP-BY-STEP

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

對象　承辦同仁照著操作即可時間　約 30 分鐘費用　Google 端免費；Claude 依你的方案步驟　共 8 步 v2.0 · 2026-10-22 更新

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

報名

成果 · What You'll Build

做完之後，你會有什麼

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

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

準備 · Before You Start

開始前，先準備這些

✉Google 帳號

用來寄確認信、存報名資料。要用哪個 Google 帳號存報名資料，先問單位的個資窗口；活動結束依規定刪除報名資料。

💻一台電腦

有瀏覽器與記事本即可：Claude 在網頁上產生程式碼，你複製後存成檔案，再貼進 Google Apps Script。

📄Claude 帳號＋兩個程式檔

到 claude.ai（網頁版）或桌面版登入，請 Claude 產生 Code.gs（後端）＋ form.html（表單），見 STEP 1。

重要：部署會綁定你的 Google 帳號與試算表，請全程用同一個 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.ai）或桌面版 Claude 開一個新對話，把報名需求用白話講給 Claude，請它產生 Code.gs 與 form.html，並把兩個檔案的完整內容貼出來。講到四要素就能一次到位：欄位・自動回信・報名清單・名額候補。

「幫我做一個線上報名網站：欄位要姓名、報名日期、服務機構、職稱、Email、電話；報名成功自動寄確認信；所有報名寫進 Google 試算表清單；請產生前端表單 form.html 與後端程式 Code.gs，兩個檔案的完整內容各用一個程式碼區塊貼給我，不要省略，並告訴我部署步驟。命名請照這樣：Code.gs 最上方放 CONFIG 物件，含 EVENT_TIME（活動時間）、EVENT_PLACE（地點）、CONTACT（聯絡方式）、ORG_NAME（主辦單位）、CAP（名額上限，0＝不限，額滿轉候補）；另寫函式 _selftest，執行後建立試算表並印出「Sheet OK: 試算表網址」；form.html 用變數 WS_API 放後端 /exec 網址。」

✓ 完成檢查：Claude 的回覆裡有兩段完整程式碼——Code.gs（最上方有 CONFIG、有 _selftest）與 form.html（有 WS_API）。（它若先反問，照實回答；名稱不同就請它照提示詞改寫；已有這兩個檔，直接到 STEP 2）

示意 · Built with Claude

Claude 產生程式碼長這樣

Claude · 示意畫面

你

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

✦

好的，我已依你的需求寫好兩個檔案，完整程式碼都附在下面，請分別整段複製、存成檔案：

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

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

👉 你只要用白話講需求，程式碼與表單由 Claude 寫好；你再複製、存成檔案即可

（示意圖：實際畫面依你用網頁版或桌面版、以及帳號版本而異。）

STEP 2 / 8存成檔案、複製程式碼

存好 Code.gs，複製全部內容

1

存成兩個檔案

桌面新增「報名網站」資料夾。把 Claude 給的 Code.gs、form.html 內容，各貼進記事本，另存到這個資料夾（檔名照寫、存檔類型選「所有檔案」、編碼選 UTF-8）。

2

用記事本開啟 Code.gs

已經開著就直接用；要重開：.gs 不能直接雙擊，在 Code.gs 上按右鍵 → 開啟方式 → 記事本。

3

全選複製

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

✓ 完成檢查：資料夾裡有 Code.gs 與 form.html，且 Code.gs 的全部內容已複製到剪貼簿。

STEP 3 / 8貼進 Google Apps Script

貼進 Apps Script 程式編輯器

1

開新專案

登入要用的 Google 帳號 → 開 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

差別：從試算表開啟，只是這個 Apps Script 專案會附在那份試算表底下；本課的程式會在 STEP 5 執行 _selftest 時自動建立報名試算表，報名資料寫進新建的那份。兩種都能用，擇一即可。

✓ 完成檢查：看到 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: '○月○日（六）13:30 …',7};8function doPost(e){ … }

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

STEP 4 / 8修改 CONFIG 活動設定

改 CONFIG，填你的活動資訊

程式最上方的 CONFIG（STEP 1 的提示詞已請 Claude 這樣寫）是唯一要改的地方——只動引號內文字，別刪逗號或引號。

設定	改成什麼	說明
EVENT_TIME	你的活動日期與時間，例：○月○日（六）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）

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

授權前小提醒：Code.gs 會用到你的試算表與寄信權限。不放心的話，先把程式貼給 Claude，請它用白話說明「這段程式會做什麼、會存取什麼」，再按「允許」。

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我自己（單位指定的 Google 帳號 name@example.org）✓

誰可以存取 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；你再存檔覆蓋。

自己改

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

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

STEP 8 / 8測試並正式上線

測試一筆，然後上線

1

填一筆測試

用瀏覽器打開 form.html，填一筆你自己的真實 email 並送出。想請 Claude 代填（Claude in Chrome）？付費方案・僅 Chrome放行前，先看清楚它要做什麼——它會真的送出表單。

2

確認三件事

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

3

放上網站

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

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

驗收 · Final Checklist

上線前最後檢查清單

報名表單能正常填寫並送出
報名者收到確認信（含活動時間、地點、報名摘要）
Google 試算表自動新增該筆資料
（若有限額）剩餘名額正確、額滿能轉候補
個資有顧到：試算表只分享給承辦同仁，並告知報名者資料的用途；活動結束依規定刪除報名資料

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

維護 · After Launch

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

📋看報名清單

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

✏改活動設定

只改 Code.gs 的 CONFIG（時間、地點、聯絡方式、主辦單位、名額）即可。

🔄改完要重部署

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

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

完成 · DONE

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

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

需要改名額、加候補、防重複報名、客製信件？跟 Claude 講一聲，請它改好 Code.gs，貼回 Apps Script，再依 STEP 6 重新部署新版本。

完成