點樣喺網站加入聯絡表格（確保訊息真係送到你手上）

要加入一個真正運作嘅聯絡表格，就建立一個簡短表格（姓名、電郵、訊息），將佢提交到一個伺服器路由，由該路由驗證輸入內容，將訊息儲存到資料庫，然後透過電郵供應商，使用一個機密 API 金鑰寄出通知俾你。加入一個隱藏嘅蜜罐欄位同速率限制，可以阻止大部分垃圾訊息；顯示清晰嘅成功訊息；並喺已發布嘅網站上端到端測試。最重要嘅係先儲存、再寄電郵：就算電郵失敗，你仍然保有呢個查詢。

你嘅選擇

如果你嘅網站已經有後端同資料庫（用 AI App 建立工具建立嘅 App 通常都有），最後一個選擇最可靠，並且令查詢可以留喺你睇得到嘅地方。

一個好嘅聯絡表格應該包括咩

• 欄位盡量少。 姓名、電郵、訊息。只有當你會按主題分流時，先加入主題下拉選單（「銷售」、「支援」、「其他」）。
• 每個欄位上方有清晰標籤，唔好只係用會消失嘅預設提示文字。
• 有幫助嘅驗證：喺欄位旁邊顯示「請輸入有效嘅電郵地址」。
• 成功狀態，說明接下來會發生咩：「多謝你，我哋會喺一個工作天內回覆。」
• 私隱聲明，說明你會點樣使用資料，並連結到你嘅私隱政策。
• 後備方法，例如電郵地址或電話號碼，俾較喜歡咁聯絡嘅人。

提示範例

基本表格：

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

電郵通知：

當聯絡訊息儲存之後，使用 Resend 並以 RESEND_API_KEY 內嘅金鑰，寄一封通知電郵到 hello@example.com 俾我。將回覆地址設為發送者嘅電郵，令我可以直接回覆。如果發送失敗，保留已儲存嘅訊息，並記錄錯誤，但唔可以暴露金鑰。

垃圾訊息防護：

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

收件箱：

加入一個受密碼保護嘅管理頁面，按最新優先列出聯絡訊息，每條旁邊有一個「已處理」核取方塊，並有一個篩選器顯示未處理嘅訊息。

逐步步驟

1. 決定訊息送去邊度：邊個收到通知，邊個回覆。
2. 用上述欄位建立表格，附無障礙標籤同適合手機嘅輸入方式（使用電郵輸入類型，令手機顯示正確嘅鍵盤）。
3. 建立伺服器路由。佢會檢查必填欄位、電郵格式同長度限制。永遠唔好只信任瀏覽器端嘅驗證。
4. 先儲存到資料庫。 參閱如何為 App 加入資料庫。
5. 設定電郵供應商。 建立帳戶，驗證你嘅發送網域，並將 API 金鑰儲存為機密。如何由你嘅 App 發送電郵詳細講解網域設定（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 或者項目設定加入其金鑰，然後要求代理由伺服器發送——參閱由你嘅 App 發送電郵。依賴之前，先喺預覽中對表格執行 App 測試（/test），然後發布並喺正式網址上測試。

聯絡表格係大部分小生意網站同著陸頁嘅重要部分。上線前請檢查 AI 建立 App 嘅安全檢查清單。

常見問題