在靜態網站加上聯絡表單的 3 種方法

想在作品集加上聯絡表單，需要搬網站嗎？HTML 可以顯示表單。要不要換託管平台，取決於由誰接收表單，以及收到後需要做什麼。

在靜態網站加上表單的三種方法

先決定表單要把資料送到哪裡。以下 HTML 的 action 是送出網址，name 則是各欄位送出時的名稱。若使用外部服務或自建 API，請替換範例網址。若使用平台內建功能，請依平台的步驟設定。

<form action="https://example.com/contact" method="POST">
  <label>回覆信箱 <input name="email" type="email" required></label>
  <label>聯絡內容 <textarea name="message" required></textarea></label>
  <button type="submit">送出</button>
</form>

1. 使用託管平台的表單功能

如果目前的平台可以接收表單，先確認通知對象和資料儲存方式是否符合需求。上線後送出測試訊息，分別確認管理介面有受理紀錄，以及通知確實送達。

如果已經使用 Netlify，可以考慮 Netlify Forms。啟用表單偵測，移除範例中的 action，並在部署的 HTML 表單上加上 name="contact" 和 data-netlify="true" 後重新部署。Netlify 官方表單設定

2. 把資料送到外部表單服務

目前的平台沒有表單功能時，仍可保留原本的頁面，把外部表單服務提供的網址填入 action。以 Formspree 為例，可從管理介面複製表單網址。Formspree 官方 HTML 表單設定

<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">

選擇方案前，確認每月可送出的件數、超過上限會發生什麼事，以及資料會保留多久。若收集電子郵件地址，也要確認誰可以查看、如何刪除。

3. 用自己的 API 接收表單

如果外部服務無法滿足訊息分派、處理進度或資料保留需求，可以自行開發 API。以上面的表單為例，把起始標籤改為 <form action="https://api.example.com/contact" method="POST">，讓 API 接收 application/x-www-form-urlencoded 格式的資料。先保存資料並給予受理編號，再發送通知。即使郵件未送達，仍可在管理介面查到紀錄。資料保存後，把瀏覽器導向完成頁面。

HTML 的 required 能提示使用者填寫必填欄位。API 也要檢查必填項目與長度，並限制連續送出。郵件服務的 API 金鑰與資料庫密碼應放在伺服器端的環境變數中。一般 HTML 表單可跨來源送出 POST。若要用 JavaScript 的 fetch 讀取不同來源的回應，則需在 API 設定允許的來源。Fetch 的 CORS 規格

KamuiDash 可分別部署靜態網站和用 Node.js 或 Python 執行的 Web 伺服器。也可以保留原有網站，只把接收表單的 API 部署到平台上。KamuiDash 官方應用程式設定

上線後測試整個受理流程

從公開網址送出表單，確認完成頁面、受理紀錄和通知。留空必填欄位，確認瀏覽器會提示。若自行開發 API，也要直接送出缺少欄位或過長的資料，確認 API 拒絕資料且沒有建立紀錄。可以先選能配合目前託管平台的方法，等資料保留或分派需求改變時再調整。

延伸閱讀

• 公開用 Claude Code 開發的 Web 應用程式
• 部署 FastAPI 與 PostgreSQL

在 KamuiDash 網站了解如何從 GitHub 部署靜態網站和 Web API。 KamuiDash