表單是網站中不可或缺的功能，常用於客戶回報問題或課程報名等場景。本文針對有基本程式理解的工程師或自學者，介紹如何透過 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 依照建立的表單而定，請複製後貼入頁面使用。