如何在你的網站新增聯絡表單（確保真的收得到訊息）

要新增一個真正能運作的聯絡表單，請建立一個簡短的表單（姓名、電子郵件、訊息），將它送到一個會驗證輸入內容的伺服器路由，把訊息存進資料庫，然後透過電子郵件服務商，使用機密的 API 金鑰寄出通知給你。加入隱藏的蜜罐欄位與速率限制，以阻擋大多數垃圾訊息，顯示清楚的成功訊息，並在已發布的網站上進行端到端測試。最重要的是先儲存再寄信：即使電子郵件失敗，你仍然保有這筆詢問。

你的選擇

如果你的網站已經有後端與資料庫（用 AI 應用建置工具做的應用通常都有），最後一個選項最可靠，也能讓詢問留在你看得到的地方。

好的聯絡表單包含哪些內容

• 盡可能少的欄位。 姓名、電子郵件、訊息。只有在你會依此分流時，才加入主旨下拉選單（「銷售」、「支援」、「其他」）。
• 每個欄位上方都有清楚的標籤，而不只是會在輸入時消失的預設提示文字。
• 有幫助的驗證：在欄位旁顯示「請輸入有效的電子郵件地址」。
• 成功狀態，說明接下來會發生什麼：「謝謝，我們會在一個工作天內回覆。」
• 隱私說明，告訴對方你會如何使用這些資料，並連結到你的隱私政策。
• 替代聯絡方式，例如你的電子郵件或電話，供偏好這種方式的人使用。

提示範例

基本表單：

在聯絡頁面新增一個聯絡表單，包含姓名、電子郵件與訊息（全部必填，訊息最多 2,000 字元）。提交到一個伺服器路由，由它驗證輸入內容，並將資料連同收到時間存進 contact_messages 資料表，然後顯示成功訊息：「謝謝，我們會在一個工作天內回覆。」欄位錯誤要在欄位旁即時顯示。確保在手機上運作良好。

電子郵件通知：

當聯絡訊息儲存後，使用 Resend 寄一封通知信到 hello@example.com，金鑰存放在 RESEND_API_KEY。將回覆地址設為寄件人的電子郵件，讓我可以直接回覆。如果寄送失敗，保留已儲存的訊息並記錄錯誤，但不要洩漏金鑰。

垃圾訊息防護：

為聯絡表單加入垃圾訊息防護：一個必須保持空白的隱藏蜜罐欄位，伺服器端限制每個 IP 每小時最多 5 次提交，並拒絕包含超過 3 個連結的訊息。蜜罐欄位有內容的提交要靜默丟棄，但仍然顯示成功。

收件匣：

新增一個受密碼保護的管理頁面，依最新排序列出聯絡訊息，並提供「已處理」勾選框，以及只顯示未處理訊息的篩選器。

逐步操作

1. 決定訊息要送到哪裡：誰會收到通知，誰負責回覆。
2. 依照上述欄位建置表單，包含可存取的標籤與適合手機的輸入框（使用 email 輸入類型，讓手機顯示正確的鍵盤）。
3. 建立伺服器路由。它會檢查必填欄位、電子郵件格式與長度限制。絕對不要只信任瀏覽器端的驗證。
4. 先存進資料庫。 參閱如何為應用新增資料庫。
5. 設定電子郵件服務商。 建立帳號，驗證你的寄件網域，並把 API 金鑰存為機密。如何從應用寄送電子郵件詳細說明了網域設定（SPF、DKIM）。
6. 儲存之後，從伺服器寄出通知。 使用你已驗證的網域作為寄件人，並將訪客的地址設為回覆地址；不要把訪客的地址當成「寄件人」，否則很可能會被當作偽造而遭退信。
7. 可選擇自動回覆給訪客，但要簡短；寄給垃圾郵件地址的自動回覆可能會損害你的寄件信譽。
8. 加入垃圾訊息防護：蜜罐、速率限制，必要時再加上 CAPTCHA 式驗證。
9. 在已發布的網站上測試：提交表單、檢查資料庫、檢查你的收件匣與垃圾郵件匣、點擊回覆。

阻擋垃圾訊息

聯絡表單上線後幾天內就會吸引機器人。請由溫和到強硬，層層設防：

1. 蜜罐欄位。 對人類隱藏的欄位；機器人會把它填滿。對真正的訪客沒有任何影響。
2. 伺服器端速率限制。 限制同一個地址在一段時間內能送出的訊息數量。
3. 內容規則。 拒絕塞滿連結的訊息，或訊息欄位為空白或異常過長的內容。
4. CAPTCHA 式驗證，例如 Cloudflare Turnstile 或 Google reCAPTCHA。驗證的權杖必須在你的伺服器上檢查；只在瀏覽器中執行的驗證可以被跳過。

常見錯誤

• 沒有寄出任何東西，卻顯示「已寄出！」。 介面在伺服器回應之前或不論回應如何都顯示成功。一定要等待伺服器的結果。
• 只有電子郵件，沒有資料庫。 一把金鑰設定錯誤，詢問就會消失數週，而且沒人發現。
• API 金鑰放在前端程式碼中。 任何人都可以用它以你的名義寄信。
• 寄件網域未驗證。 通知會被丟進垃圾郵件，或是根本收不到。
• 用訪客的電子郵件當作「寄件人」。 改用回覆地址。
• 沒有長度限制。 機器人會貼上大段文字。
• 從未測試正式網站。 預覽與正式環境之間的金鑰與網域常常不同。

檢查清單

• 表單簡短，標籤清楚，錯誤提示明確
• 伺服器端驗證與長度限制
• 每則訊息都存進資料庫
• 通知信從已驗證的網域寄出，並設定了回覆地址
• 電子郵件 API 金鑰只存放在伺服器端的機密中
• 已設定蜜罐與速率限制
• 只有在伺服器確認後才顯示成功訊息
• 隱私說明連結到你的隱私政策
• 已在已發布的網站上端到端測試，包括垃圾郵件匣

Mythex 中的聯絡表單

在 Mythex 中，你可以透過聊天建置整個功能。在同一段提示中要求表單與資料庫（或輸入 /database），讓提交的內容能被保存。Mythex 沒有內建的電子郵件寄送產品，因此如需通知，請自行接入 Resend、SendGrid 或 Postmark 等服務商，用 /secrets 或專案設定加入其金鑰，並要求代理程式從伺服器寄信。詳情請參閱從應用寄送電子郵件。在依賴它之前，請先對預覽中的表單執行應用測試（/test），然後發布並在正式網址上測試。

聯絡表單是大多數小型企業網站與著陸頁的關鍵部分。上線前請查看安全性檢查清單。

常見問題