前言
表單是網站中不可或缺的功能，常用於客戶回報問題或課程報名等場景。本文針對有基本程式理解的工程師或自學者，介紹如何透過 WordPress 的 Contact Form 7 外掛，快速建立並客製化專屬表單。
步驟1：安裝 Contact Form 7 外掛
首先，在 WordPress 後台的【外掛 -> 安裝外掛】搜尋 “contact form”，找到 Contact Form 7 外掛後，進行安裝並啟用。此外掛提供豐富的表單欄位類型與驗證功能，方便後續客製化。
步驟2：建立聯絡表單
啟用外掛後，左側管理選單會出現「聯絡表單」選項，點擊後選擇新增聯絡表單。輸入表單名稱後，即可開始新增欄位。
常用欄位類型介紹
- 文字：適合姓名、職稱等短文字輸入，限制255字元內。
- 電子郵件：自動驗證格式，適用Email輸入。
- 網址：驗證URL格式。
- 電話：驗證電話格式。
- 數值：輸入數字，適合金額等。
- 日期：提供年月日選擇。
- 文字區域：多行文字輸入，無字數限制。
- 下拉式選單、核取方塊、選項按鈕：提供用戶選擇功能，多選或單選皆可。
- 接受度：用戶需勾選同意條款才能送出。
- 問答題：設定固定答案的簡單問題。
- reCAPTCHA：防機器人驗證，需串接API。
- 檔案上傳：允許用戶上傳文件。
- 送出按鈕：必備，觸發表單送出。
每個欄位可設定是否必填、欄位ID、預設值等，並可插入標籤至表單編輯區。表單內容支援 HTML 排版，方便自訂樣式。
步驟3：將表單短碼嵌入頁面
完成表單設計後，複製 Contact Form 7 產生的短碼，貼入 WordPress 頁面或文章中。前端頁面即會呈現該表單，使用者可直接填寫並送出。
實際應用與延伸
- 可依需求新增多個表單，分別用於不同功能。
- 利用 CSS 自訂表單樣式，提升使用者體驗。
- 搭配 reCAPTCHA 增強安全性，防止垃圾訊息。
- 透過外掛設定郵件通知，及時收到用戶回覆。
常見坑點
- 表單欄位未設必填，可能導致資料不完整。
- reCAPTCHA 未正確串接 API，驗證失效。
- 短碼貼錯位置，表單無法正常顯示。
完整程式碼
[contact-form-7 id="1234" title="聯絡表單"]以上為 Contact Form 7 產生的短碼範例，實際 ID 依照建立的表單而定，請複製後貼入頁面使用。