找我們做網站
↑
Wordpress · WordPress 外掛推薦

Contact Form 7 教學:WordPress 聯絡表單新增欄位與郵件設定步驟

WordPress 外掛推薦發布 2018.02.12更新 2026.10.02閱讀約 7 分鐘
Contact Form 7 教學:WordPress 聯絡表單新增欄位與郵件設定步驟

重點整理
Contact Form 7 是完全免費的 WordPress 表單外掛,2026 年 10 月 WordPress.org 版本 6.1.7、啟用網站超過 1,000 萬個。後台「聯絡表單」裡每個表單都有四個頁籤:表單、郵件、訊息、其他設定;用標籤產生器新增欄位,在「郵件」頁籤把新欄位的郵件標籤加進信件內容,最後把短代碼(現在是 [contact-form-7 id="一串英數字" title="…"] 的格式)或 Contact Form 7 區塊放進頁面就完成。它預設不會把填寫內容存在後台,收件全靠 Email。

網站有「聯絡我們」頁面,訪客看完商品或服務有問題時,不用到處找 LINE 或 Facebook,填完表單就能送出,對你來說也能拿到整理好的需求資料。Contact Form 7 是最多人用的 WordPress 表單外掛之一,許多付費佈景主題也直接支援它。這篇示範安裝、修改預設表單、新增電話與下拉選單欄位、設定收件信件與訊息文字,最後把表單放到頁面上。

步驟一:安裝 Contact Form 7

到 WordPress 後台「外掛 >安裝外掛」,在右上方搜尋欄輸入 Contact Form 7。

WordPress 後台安裝外掛頁面右上角的搜尋欄
WordPress 後台安裝外掛頁面右上角的搜尋欄
搜尋 Contact Form 7 的結果
搜尋 Contact Form 7 的結果

外掛圖示是一座山峰,按「立即安裝」,完成後按「啟用」。

Contact Form 7 外掛卡片上的立即安裝按鈕
Contact Form 7 外掛卡片上的立即安裝按鈕
Contact Form 7 安裝完成後的啟用按鈕
Contact Form 7 安裝完成後的啟用按鈕
已安裝外掛列表中的 Contact Form 7
已安裝外掛列表中的 Contact Form 7

啟用後,後台左側選單會出現「聯絡表單」,點第一個項目就能看到外掛預設建立的「聯絡表單 1」,點進去開始編輯。

WordPress 後台左側的聯絡表單選單
WordPress 後台左側的聯絡表單選單

步驟二:認識表單的四個頁籤

  1. 表單:設定前台顯示的欄位。懂 HTML 的話也可以直接調整結構。
  2. 郵件:設定有人送出表單後,寄給你的信件格式與內容。
  3. 訊息:送出成功、必填欄位沒填、格式錯誤時顯示給訪客的提示文字。
  4. 其他設定:放進階設定指令,一般用不到。
Contact Form 7 編輯畫面的表單、郵件、訊息、其他設定四個頁籤
Contact Form 7 編輯畫面的表單、郵件、訊息、其他設定四個頁籤

步驟三:修改預設欄位

預設表單已經有姓名、電子郵件、主旨、訊息內容四個欄位。每個欄位由一段 <label> 文字加上一個表單標籤組成,例如 [text* your-name],星號代表必填。要改欄位名稱,直接修改 <label> 後面的文字即可,中括號裡的標籤不要動。

預設表單的欄位程式碼,每個欄位由 label 文字與表單標籤組成
預設表單的欄位程式碼,每個欄位由 label 文字與表單標籤組成

例如把欄位名稱改得更簡潔:

修改欄位的 label 文字
修改欄位的 label 文字
修改後的欄位名稱
修改後的欄位名稱
繼續修改其他欄位名稱
繼續修改其他欄位名稱
欄位名稱全部改完後的表單程式碼
欄位名稱全部改完後的表單程式碼

步驟四:新增「手機號碼」欄位

編輯框上方有一排標籤按鈕(文字、電子郵件、網址、電話、數字、日期、文字區塊、下拉式選單、核取方塊等),用來產生新欄位。先複製一組現有欄位的程式碼貼在下方,把 <label> 後的文字改成「手機號碼」,並刪掉原本的標籤。

複製一組欄位程式碼貼到下方
複製一組欄位程式碼貼到下方
把 label 文字改成手機號碼並刪除原本的標籤
把 label 文字改成手機號碼並刪除原本的標籤

游標停在剛剛刪掉標籤的位置,按「電話」標籤按鈕,在跳出的視窗中決定是否設為必填,再按「插入標籤」。視窗裡其他欄位(預設值、ID、類別)都是選填,不填也不影響顯示。

電話標籤產生器視窗,可設定必填後插入標籤
電話標籤產生器視窗,可設定必填後插入標籤

按下方「儲存」後到前台查看,表單就多了手機號碼欄位。

前台聯絡表單出現新增的手機號碼欄位
前台聯絡表單出現新增的手機號碼欄位

步驟五:新增「問題種類」下拉式選單

用同樣的方法再複製一組欄位,這次按「下拉式選單」標籤按鈕。在選項欄位中每一行輸入一個選項(例如網站設計、網站維護、其他),按「插入標籤」。

下拉式選單標籤產生器視窗
下拉式選單標籤產生器視窗
在下拉式選單的選項欄位逐行輸入問題種類
在下拉式選單的選項欄位逐行輸入問題種類
插入下拉式選單後前台表單的問題種類欄位
插入下拉式選單後前台表單的問題種類欄位

步驟六:設定郵件頁籤

切到「郵件」頁籤,這裡決定你收到的通知信長什麼樣子:

Contact Form 7 郵件頁籤的設定欄位
Contact Form 7 郵件頁籤的設定欄位
  1. 收件者:收到表單內容的信箱,可以填多組,用半形逗號隔開。
  2. 寄件者:建議維持預設的「網站名稱 <wordpress@你的網域>」,也就是用網站自己網域的信箱寄出。不要把寄件者改成訪客填的 Email,很容易被收件伺服器判定為偽冒而進垃圾信匣,外掛也會跳出設定錯誤的提示。
  3. 主旨:信件主旨,可以用 [your-subject] 帶入訪客填寫的主旨。
  4. 其他標頭:預設有 Reply-To: [your-email],收到信直接按「回覆」就會回給填表的訪客。
  5. 郵件內文:信件內容。剛剛新增的欄位要在這裡加進去,否則信裡不會出現。
郵件頁籤的收件者欄位
郵件頁籤的收件者欄位
郵件頁籤的寄件者欄位
郵件頁籤的寄件者欄位
郵件頁籤的主旨欄位
郵件頁籤的主旨欄位
主旨欄位對應到表單中的主旨標籤
主旨欄位對應到表單中的主旨標籤
其他標頭欄位中的 Reply-To 設定
其他標頭欄位中的 Reply-To 設定
郵件內文欄位的預設內容
郵件內文欄位的預設內容

把新欄位的郵件標籤加進內文

郵件頁籤上方會列出可以使用的郵件標籤,例如 [your-name] [your-email] [your-subject] [your-message] [tel-842] [menu-165],後面兩個就是剛剛新增的電話與下拉式選單(數字是自動產生的,每個網站不同)。在內文輸入「手機號碼:」,後面貼上對應的標籤;問題種類也一樣。

郵件頁籤上方列出可用的郵件標籤
郵件頁籤上方列出可用的郵件標籤
在郵件內文貼上手機號碼的郵件標籤
在郵件內文貼上手機號碼的郵件標籤
在郵件內文加入問題種類的郵件標籤
在郵件內文加入問題種類的郵件標籤

儲存後送出一次測試,收到的信就會包含新欄位的內容。

測試送出後收到的通知信,包含手機號碼與問題種類
測試送出後收到的通知信,包含手機號碼與問題種類

步驟七:自訂提示訊息

「訊息」頁籤可以修改各種提示文字,例如送出成功、必填欄位未填、Email 格式錯誤,改成符合網站語氣的說法,或換成其他語言。

訊息頁籤中可自訂的提示文字
訊息頁籤中可自訂的提示文字
修改後的提示訊息文字
修改後的提示訊息文字

步驟八:把表單放到頁面上

表單標題下方會顯示這個表單的短代碼。新版 Contact Form 7 的短代碼 id 是一串英數字,例如 [contact-form-7 id="1a2b3c4" title="聯絡表單 1"](舊版是數字 id,舊的寫法仍可使用)。複製整段(包含中括號),貼到頁面的短代碼區塊、文章或小工具中即可;用區塊編輯器的話,也可以直接新增「Contact Form 7」區塊再選擇表單。

表單編輯畫面上方顯示的短代碼
表單編輯畫面上方顯示的短代碼

「其他設定」頁籤一般不需要更動,有特殊需求(例如送出後導向感謝頁)時再查官方文件。

測試時先把收件者設成自己的信箱,確認信件能收到、內容正確。如果信件一直收不到或進垃圾信匣,通常是主機的寄信功能問題,可以參考 WordPress SMTP 設定教學 改用 SMTP 寄信。

常見問題

Contact Form 7 送出的資料會存在後台嗎?

不會,Contact Form 7 預設只把內容寄成 Email,不會存進資料庫。想在後台查看與匯出填寫紀錄,可以另外安裝儲存外掛,例如 Contact Form CFDB7。

Contact Form 7 怎麼防垃圾訊息?

可以在「聯絡表單 >整合」設定 Google reCAPTCHA 或 Cloudflare Turnstile。要注意 Contact Form 7 內建整合的 reCAPTCHA 是 v3(背景自動判斷),不再提供「我不是機器人」打勾框,申請金鑰時要選對類型。

Contact Form 7 是免費的嗎?

是,Contact Form 7 本身完全免費,沒有付費版;需要條件欄位、資料儲存等功能時,透過其他免費或付費的擴充外掛加上。

結語

Contact Form 7 的介面不像拖曳式表單那麼直覺,但邏輯很固定:在「表單」用標籤按鈕新增欄位,在「郵件」把對應的郵件標籤放進內文,再把短代碼放到頁面。寄件者維持網站網域的信箱、用 Reply-To 回覆訪客,並在上線前實際送出一次測試,就能確保每一筆詢問都收得到。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。