最後更新時間：2025-12-22，由 Dean 更新 
很多客戶都會從網站上找到他們需要的服務，所以在網站上放置聯絡表單就會是一件非常重要的事情。
而 WordPress 表單外掛有很多種，這篇文章將為你介紹 Contact Form 7，並做詳細的設定教學。
Contact Form 7 是什麼？
Contact Form 7 是一款 WordPress 老牌的表單外掛，由一位日本的工程師開發，支援 AJAX 傳送，簡單來說就是你傳送表單的時候不用刷新頁面，系統就能把你的資料傳送出去。
它以「自由度高」聞名，可以與非常多的外掛工具做結合，舉例來說：
- Google reCAPTCHA 用於保護表單
- Akismet 阻擋垃圾表單資訊
- Popup Maker 填表後跳窗通知
- Constant Contact、Brevo 電郵系統管理名單
- Stripe 製作購物表單並搭配金流系統
整體使用起來非常彈性，很多地方都能夠自由修改，還有超過 200 多種語言翻譯，重點是都不用額外收費，真正造福了很多自己架設 WordPress 網站的商家或企業，這也讓它的安裝數量超過了 1000 萬。
STEP1：安裝並啟用 Contact Form 7
首先，需要到 WordPress 後台，點選「外掛」>「安裝外掛」。
接著，再搜尋框輸入「Contact Form 7」，跳出外掛後，點選「立即安裝」。
安裝完後，直接「啟用」就可以了。
STEP2：新增聯絡表單
安裝並啟用外掛後，左側選單會看到「聯絡表單」，點進去。
接著，你會看到「新增聯絡選單」的按鈕，直接點擊。
開始新增表單，可以先在最上方填入表單名稱。
在下方，你會看到「一排按鈕」，這邊就是你用來設計表單內容的「欄位標籤」。
我這邊先用「核取方塊」做示範，點選之後會跳出一個視窗，可以在上面設定欄位標籤的資料。
例如，我想要讓客戶直接選擇他需要的服務項目，於是我就在「選項」的地方，打上「網站架設、網站設計、內容行銷」，接著點選「插入標籤」。
當你標籤設定完畢後，回到剛剛的表單，你會發現在眾多語法中，出現了你剛剛所設定的標籤語法。
此時，前台看到的表單是長這樣的：
但是，目前還是怪怪的，選項沒有「標題」，非常不直觀。
於是，我們回到剛剛的編輯區，在剛剛的語法之前，加入標題。
再回到前台看，會發現剛剛新增標題已經顯示出來。
這邊要特別說明一下，如果你新增的欄位標籤是「有選項的」，也就是像核取方塊、選項按鈕、下拉式選單等等，是可以直接插入語法。
但如果你是插入像「電話、網址」等等只需要填寫單一訊息的欄位標籤，那麼你在語法上就會需要多加上 <label></label>，把標籤包起來，這是 HTML 語法的規定。
<label> 標題
[欄位標籤] </label>就會像是下圖這樣：
當然，如果你是有多個選項的欄位標籤，但是你加入 <label>，也會顯示錯誤，更詳細的資訊可以參考官方說明。
STEP3：設定電子郵件資料
表單設定完成後，我們需要來設定「電子郵件」。
簡單來說，當有客戶在網站上填寫表單，站主會希望能夠自動收到通知，那麼在這個部分我們就可以進行設定。
首先，到「電子郵件」設定的地方，你會看見收件者、寄件者等等的欄位，欄位裡面都有短代碼。
1. 收件者：預設是 [_site_admin_email]，也就是網站預設的信箱 (在「設定」>「一般」可看見)。可以填入指定的信箱。
2. 寄件者：預設是 [_site_title]，也就是會自動帶入你的網站名稱。可設定成指定文字。
3. 主旨：預設是 [your-subject]，是客戶在填寫表單時填入的標題。可設定成指定標題。
4. 其他標頭：預設是 [your-subject]，是客戶在填寫表單時填入的信箱。不建議更改。
同個頁面往下拉，會有「電子郵件內文」的欄位，讓你編寫自動回覆的郵件內文。
除了編寫文字外，你還可以利用最上方的「欄位標籤」，來自動帶入客戶填寫的資訊。
舉例來說，我想要郵件中知道客戶的網站網址是什麼，以及他需要的服務，所以我就加入「網址」與「核取選單」的欄位標籤，並打上標題用於辨識。
整個頁面滑到最下方，會看見可以新增另一個郵件模板。
這邊主要的意思是，你可以設定一封傳送給自己，另一封傳給客戶做備份，或是你有一些主管或老闆，需要也同步收到郵件的話，那麼也可以額外設定一封自動傳送的郵件。
最後，無論你做了什麼設定，都要記得到最下方點擊「儲存」按鈕喔。
STEP4：編輯表單訊息
設定完電子郵件，我們可以來調整「訊息」，也就是客戶送出填寫表單時，會收到的通知訊息。
在「訊息」的設定裡面，你會看見非常多種情境，你可以根據你自己的品牌風格，來調整內容。
STEP5：實際測試表單
到這邊，基本的 Contact Form 7 表單內容，都已經完成的差不多，我們需要來實際測試表單。
回到表單列表，找到你剛剛設定的表單，中間會看到一串「短代碼」，複製下來。
接著，到你要加入表單的頁面中，插入「短代碼」區塊，並貼上剛剛複製的短代碼。
在前台，我們就可以看到剛剛我們設計的表單。
你可以實際填寫看看，填寫完畢後，到剛剛你在「電子郵件設定」中設定的信箱查看。如果看到一封表單的自動回覆，就代表你設定成功了。
至於，如果沒有收到郵件，你可以回到電子郵件設定中查看信箱有沒有設定錯誤，不然就是要檢查一下網站的 SMTP 有沒有設定正確 (就是你的網站發送郵件的功能是否正常)。下方附上免費版 Gmail 跟 Google Workspace 商用信箱的設定教學。
進階教學1：客製化表單外觀
如果你覺得預設的表單外觀有點太陽春，不符合你的品牌風格，那麼可以用 CSS 來調整表單外觀。
我們會需要借助 Code Snippets 或 WPCode Lite 這類型的程式碼片段外掛，來客製化 Contact Form 7 的表單樣式。
step 1
這邊用 WPCode Lite 來做示範，下載完外掛，進到設定頁面，我們點選「Add New」。
step 2
接著，點選「+Add Custom Snippet」，新增程式碼片段。
step 3
會詢問你要新增哪種程式碼片段，選擇「CSS Snippet」。
step 4
接著，就開始編寫 CSS，編寫完記得要「開啟」，並且存檔。
以下提供我寫的 CSS，大家可以自行根據我的註解更改 (尤其顏色要換成你的品牌配色)；當然，你也可以參考官方論壇對於客製外觀的討論。
/* 整個表單樣式 */
.wpcf7
{
background-color: #F3F6F8; /* 背景色 */
border: 2px solid #CFDEE6; /* 框線 */
padding:24px; /* 表格內距 */
border-radius:8px; /* 圓角 */
color:#2D5B7A; /* 文字顏色 */
}
/* 點選傳送後，回應提示 */
/* 傳送成功 */
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; /* 綠色 */
}
/* 傳送失敗 */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; /* 紅色 */
}
/* 傳送無效 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
border-color: #ffb900; /* 黃色 */
}
/* 表單按鈕 */
.wpcf7-form-control.wpcf7-submit{
background-color: #292F32; /*按鈕背景顏色*/
color: white; /*文字顏色*/
}step 5
回到前台，你就會發現你的表單外觀變得不太一樣。
進階教學2：表單提交後跳窗
有時候，客戶傳送完表單，我們會希望有些注意事項他可以先知道，能考慮直接跳窗通知。
step 1
到新增外掛中搜尋「Popup Maker」，安裝並啟用。
step 2
啟用外掛後，左側選單會出現「Popup Maker」，點進去，並選擇「Create New Popup」。
step 3
接著，你可以設定跳窗的標題與內容，看你想要顯示什麼訊息給填寫完表單的人。
我這邊就假設我希望填寫表單完畢的人能夠繼續看網站文章，所以我就寫了一段代碼，來顯示按鈕導流。(大家的情境都不同，可以不用學我)
step 4
回到前台，嘗試提交表單，看看剛剛設定有沒有成功。
當我提交表單後，有出現我剛剛設定的跳窗，代表設定成功。
進階教學3：表單提交後自動跳轉
還有一種情境比較常見，就是表單提交後，自動跳轉到另外一個感謝頁。
step 1
一樣到安裝外掛的地方，搜尋「Redirection for Contact Form 7」，安裝並啟用。
step 2
回到 Contact Form 7 的表單設定中，會看見上方出現「Action」，我們需要在這邊新增「客戶表單填寫完畢」後，自動進行的動作。
左側選單下拉你會看到有很多不同的動作，我們選擇「重新導向」，並點選「Add Action」，就會看到上方出現可以設定的區塊，可以點選右側編輯。
step 3
我們可以在設定中，選取我們是先建立好的感謝頁面，這樣當用戶提交完表單後，就會自動跳轉了。
好用的 Contact Form 7 擴充外掛
Contact Form 7 是一款自由度很高的外掛，相關的擴充外掛也很多，以下推薦幾款：
- Ultimate Addons For Contact Form 7：綜合型的 Contact Form 7 擴充外掛，幾乎什麼樣的功能都做得到。
- Conditional Fields for Contact Form 7：能自由設定表單邏輯，例如點選某個項目，會跳出特定選項。
- CFDB7：將表單的資料儲存於 WordPress 後台。
- Integration for Contact Form 7 and Mailchimp：能將表單內容傳到電郵管理工具 MailChimp。
- AFI – The Easiest Integration Plugin：能自動將表單數據傳到 Google Sheet。
- Drag and Drop Multiple File Upload：讓使用者在填寫表單時，能夠直接拖曳上傳檔案。
Contact Form 7 與 WPForms 差在哪？
Contact Form 7 跟 WPForms 是 WordPress 上前兩名的表單外掛，但還是有些不同：
| Contact Form 7 | WPForms | |
|---|---|---|
| 優點 | 1. 自由度高，免費就能做到很多功能 2. 支援非常多國語言，包含繁體中文 | 1. 拖曳式設計，使用起來很直覺 2. 有許多模板，可依照需求選擇 |
| 缺點 | 1. 要用程式代碼編輯，門檻相對較高 2. 預設外觀有點陽春，需要另外設計 | 1. 免費版只支援基本功能 2. 只有英文版的操作介面 |
| 適用對象 | 工程師、前端設計師 | 任何人，尤其是 WordPress 新手 |
| 適用網站 | 形象網站，外觀客製化程度高 | 電商網站，有跟電商外掛整合 |
Contact Form 7 常見問題
為什麼我設定的表單一直出現錯誤？
大機率是你的語法沒有使用正確，可以參考官方提供的語法參照。
Contact Form 7 如何串接 reCAPTCHA？
在左側選單點選「聯絡表單」>「整合 Integratin」，裡面就能夠串連 reCAPTCHA API，詳細教學請參考「如何讓 Contact Form 7 受到 reCAPTCHA 保護？」
有其他在 WordPress 上放置表單的方式嗎？
Contact Form 7 雖然自由度高，但也造成了許多人的上手門檻，所以如果要簡單一點 WordPress 表單外掛，可以考慮：WPForms。
或是，你也可以能直接用 Google Form，但是你知道的，外觀沒那麼好看。
