VCA

做一個能收 email 的聯絡表單

靜態網站沒有後端，誰來收訪客填的表單？三種 $0 做法，加上不被機器人灌爆的基本防護。

發布於 更新於 審閱於 閱讀約 1 分鐘編輯方針#實作指南#表單#前端

一句話解釋

收訪客來信看似簡單，難在「靜態網站沒有後端」——這篇講誰來收這封信，以及怎麼防濫用。

你會做出什麼

一個能收到訪客來信的聯絡表單，並知道靜態站該用哪種方式接收、要做哪些防濫用。

為什麼表單沒那麼簡單

做一個輸入框很容易，難的是「使用者按下送出之後，那封信去哪了」。靜態網站只有畫面、沒有後端，無法自己處理送出的資料。所以重點不是表單長怎樣，而是誰來接收。

三種 $0 收法

  1. 表單服務：把表單的送出目標指向第三方服務（多有免費額度），它幫你收信、轉寄到你的信箱。最快、不用寫後端。
  2. Cloudflare Pages Functions：在自己的網站旁加一支小後端函式接收送出，再寄信或存進資料庫。免費額度內、不綁第三方。
  3. mailto 連結：最陽春，點了直接開使用者的郵件軟體。零後端，但體驗差、容易被當垃圾信。

新手想最快上線選「表單服務」；想自己掌控、之後要接資料庫選「Pages Functions」。

一定要做的防濫用

公開表單會被機器人盯上。請至少做到：

  • 欄位驗證：email 格式、必填、長度上限——前端擋一層，收的那端再擋一層（前端驗證可被繞過）。
  • honeypot（蜜罐欄位）：放一個人類看不到、只有機器人會填的隱藏欄位；有填就丟掉。
  • rate limit：同一來源短時間內限制次數，避免被灌爆。
  • 別把收件信箱寫死在前端：放在後端 / 服務設定裡，否則等於公開你的 email 給爬蟲。

跟 AI 這樣說

把「用哪種收法、要哪些欄位、要 honeypot + 驗證 + rate limit」講清楚，再請 AI 實作。別只說「做一個聯絡表單」——那通常只會給你前端、沒有人收信，也沒有防濫用。

下一步

常見問題

靜態網站真的能做聯絡表單嗎？

能。表單的「畫面」靜態站本來就能放，缺的是「誰來接收送出的資料」。把送出目標指向表單服務或自己的 Cloudflare Pages Functions 小後端即可——靜態頁負責呈現，接收交給服務或函式。

前端驗證過了，為什麼後端還要再驗一次？

因為前端驗證可以被繞過。攻擊者不必用你的網頁，可以直接對你的接收端送任意資料。前端驗證是為了體驗（即時提示），真正的把關一定要在收的那端再做一次——這是「不信任 client 輸入」的基本原則。

參考來源

  1. <form> — MDN Web Docs — Mozilla
  2. Cloudflare Pages Functions — Cloudflare