用 AI 做一個一頁式報名頁
一個下午，從零到能收報名

動手之前先寫三行字

不要一打開就跟 AI 說「幫我做一個報名頁」。先自己寫三行：

1. 這個活動是什麼：時間、地點、誰辦的、多久
2. 誰會來：他們現在在煩惱什麼，為什麼這個活動對他有用
3. 你要他做什麼：填表單報名？加 LINE？付款？

這三行決定了整頁的內容。跳過這一步的話，AI 會給你一個看起來很完整、但講不到重點的頁面 —— 而你會花更多時間在來回修改。

內容順序照這個排

一頁式頁面的順序有一套滿穩的做法，照著排就好：

1. 標題 —— 一句話講清楚這是什麼活動、給誰
2. 時間地點 —— 放很前面。很多人點進來只想確認這件事
3. 為什麼值得來 —— 三到五點，具體一點，不要形容詞
4. 講者或主辦是誰 —— 建立信任
5. 流程 —— 當天大概會發生什麼
6. 費用與名額
7. 報名表單
8. 常見問題 —— 停車、可不可以帶人、不能到能不能退
9. 再放一次報名按鈕

第 2 項最常被放錯位置。設計上很想把時間地點放後面，但使用者不是這樣看的 —— 時間對不上，其他寫再好都沒用。

第 8 項的常見問題不要憑空想，把你上次辦活動被問過的問題直接寫上去。這一段常常是整頁最有用的部分。

怎麼跟 AI 描述

把上面那三行字跟九個區塊一起給它，然後補幾個限制。加了限制的產出會好很多：

• 「做成單一個 HTML 檔案，CSS 寫在同一個檔案裡」—— 這樣你只有一個檔要處理
• 「要能在手機上正常顯示，最窄支援 375px」
• 「顏色只用這三支：（貼你的色碼）」—— 沒有品牌色的話，讓它先給你三個配色方案再選
• 「字級只用四種」
• 「不要使用外部字體或 CDN 的資源」—— 減少壞掉的機會

產出之後不要急著改細節。先把內容全部換成你自己的真實文字，再回頭調版面 —— 因為文字長度會直接影響版面，先調版面等於白做。

報名資料要收到哪裡

這是整個流程裡唯一有點技術的地方，也是最容易做出「看起來會動但其實沒有」的地方。

最省事的做法是不要自己做表單：用 Google 表單，把報名按鈕連過去就好。資料自動進試算表，不用處理主機、不用處理寄信，也不會有「表單看起來送出了但沒收到」的問題。

如果你希望表單長在頁面裡不要跳走，Google 表單可以嵌入，樣式醜一點但確實會動。

真的要自己做表單的話，記得驗證：實際送一筆測試資料，去收件的地方確認真的收到，順便看垃圾郵件匣。前台跳出「報名成功」不代表資料進去了。

上線：網域跟主機

一頁式頁面不需要租主機。幾個常見做法：

• 放在現有網站底下，例如 你的網域/event/。有官網的話這是最好的做法，順便把流量留在自己的網域
• 免費的靜態託管服務，把 HTML 丟上去就有網址，可以綁自己的網域
• 平台型服務，如果你本來就有在用

如果活動是每年辦的，建議用第一種，網址固定成 /event/2026-xxx 這種形式，明年再開一個。這樣舊的頁面留著，累積下來也是內容。

上線前驗這四件事

1. 拿真的手機開一次。不是把視窗拉窄，是拿手機。看有沒有左右滑動、按鈕點不點得到
2. 報名流程自己走一遍，從點按鈕到收到資料
3. 時間地點再核對一次。這是最容易錯、錯了最尷尬的地方
4. 用手機分享到 LINE 看預覽卡片。沒設 og:image 的話會是空白的，那個連結的點擊率會差很多

第 4 項多數人不知道要做。加一行 og:image 的成本是零，但它決定了你的活動被轉發時長什麼樣。

完整的檢查項目另外整理成一份清單，一頁式的話只需要跑其中的 A 組。

延伸閱讀：上線前該檢查的 12 件事

什麼時候這個做法會不夠用

這套流程處理一頁式活動頁很夠。但如果出現下面任何一種情況，就不是同一件事了：

• 要線上收款、開發票
• 報名要分場次、有名額控管、要候補
• 活動不只一場，之後會累積很多頁
• 這個頁面要負責從搜尋帶陌生人進來，不只是給已知的名單看

前三種是功能複雜度的問題，第四種是完全不同的事 —— 那要處理的是內容與搜尋，不是頁面本身做得好不好。

延伸閱讀：AI 做的網站，SEO 到底行不行

如果你做完一頁覺得順手，想把整個官網也自己接過來，那是另一個規模的事，值得先把流程跟限制看清楚，也先想清楚要不要自己扛。