WPForms 教學：5 分鐘客製 WordPress 表單 (設定超直覺)

最後更新時間：2025-11-21，由 Dean 更新

建立一個網站，為了讓客戶能夠順利與我們聯絡，一定會需要建立聯絡表單。

先前我們已經介紹過 Contact Form 7 這款 WordPress 表單外掛，而其實有另外一款 WPForms 也非常知名，並且相對 Contact Form 7 更友善新手，可以不用碰到任何的語法或代碼。

接下來，我會實際教你怎麼使用這款外掛。

WPForms 是什麼？

WPForms 是一款 WordPress 的表單外掛，以超過 2000 個表單模板，以及直覺的區塊拖拉設計最為知名，號稱即便是新手也只需要 5 分鐘就能夠客製出一款精美的表單。

除了一般表單功能外，它還有幾個特色：

• 能串接金流系統：免費版就能夠串接 Stripe，付費版更支援 Paypal、Square 等金流。
• 一站式表單管理：付費版能夠做到直接在 WordPress 後台就能管理所有表單。
• 與多款工具整合：與非常多款工具或外掛整合，像是：Slack、Zapier、Google Sheets、MonsterInsights、SeedProd 等等。

在功能的支援上非常強大，介面操作又十分直覺，這也讓他們從 2016 年創立至今，累積了全球 600 多萬個網站用戶，也成為了 WordPress 上數一數二的表單外掛。

STEP 1：安裝並啟用 WPForms

首先，我們到 WordPress 後台安裝外掛的地方，搜尋 “WPForms”。

你應該會看到兩個 WPForms，要注意，安裝的是有一隻熊的那個外掛，不是一隻鴿子的。

STEP 2：新增表單模板

step 1

安裝完外掛後，在左側會出現 “WPForms” 的選項，點進去。

接著，你應該會看到 “Create Your Form” 的按鈕，直接點它，開始建立第一個表單。

step 2

會出現非常多表單模板，像是註冊表單、客服表單、商用表單、行銷表單、活動企劃表單等等。

你可以依照你的需求，挑選合適的模板。當然，你也可以直接點 “Blank Form” 建立空白表單。

接下來，我會使用 “Simple Contact Form” 做示範。

STEP 3：編輯表單資料

step 1

WPForms 的表單欄位編輯很直覺，可以直接拖曳區塊來建立。

像是，我想建立一個「服務預約表單」，上面除了名稱與信箱外，我也想要讓客戶直接選擇他要的服務。

那我就可以在左側的「欄位 (Fields)」挑選 “Checkboxes” 區塊，直接拉到右方的編輯區。

step 2

當你把你要的欄位都拖曳到右方後，就可以來一個個編輯欄位資訊。

首先，先點選「一般設定 (General)」，就可以設定「欄位名稱」、「欄位是否必填」等。

step 3

一般設定做完，基本上表單就可以用了。

但如果你想要讓表單使用體驗更好，那你還可以進行「進階設定 (Advanced)」。

像是下圖中，「Name」這個欄位，進階設定就是你可以設定「欄位的寬度」，還可以設定「表格中的提示文字 (還沒填寫前，會顯示的文字)」或「預設內容 (如果沒填寫，會自動帶入的內容)」。

當然，如果你想要寫 CSS 來客製表單的外觀，也可以在這邊做設定。

當你都設定完之後，記得要到右上角按 “Save” 儲存。

step 4

剛剛我們都是設定「欄位內容」，接著還需要做整個表單的設定。

左側選單點選「Settings」>「General」，你可以為你的選單取名、添加一些說明，或是新增標籤做管理。

另外，如果你有發現，剛剛在設定表單內容時，最下方的按鈕是無法更改的，如果你想要更改按鈕上的文字，也會需要在這邊進行設定；當你填完表單送出後，傳送中的文字也能做設定。

如果這些沒設定，預設都會是英文，容易影響使用者體驗。

STEP 4：設定郵件通知

當表單設定完成後，我們還需要設定郵件通知，只要有人填寫表單，管理者就能即時收到通知。

在左側選單點「Settings」>「Notifications」，在右側就會顯示通知郵件的模板設定。

在郵件通知設定中，有幾個設定：

• Send To Email Address：當有人填寫表單時，要通知的信箱。預設是網站信箱，也可修改成指定信箱。
• Email Subject Line：這封通知郵件的標題。可以自行設定。
• From Name：通知郵件寄送者的名稱。預設會帶入網站名稱，可自行修改。
• From Email：寄送通知郵件會使用的信箱。可自行修改。
• Reply-To：當你收到通知郵件後，直接回覆的話，會收到的信箱。一般而言，會設定成填單人的信箱。
• Email Message：通知郵件中的內文。會自動帶入表單內容。

在選項中，你會看到一些用 { } 顯示的代碼，這個叫作「智慧標籤 Smart Tags」，也就是因為你不知道表單欄位會被填什麼內容，所以就給每個欄位一個代稱，在傳送通知郵件時，就可以自動代入該欄位的數值。

舉例來說，{field_id=”2″} 代表我表單中的第二個欄位，而我表單第二欄位是「電郵信箱」，所以當我收到通知郵件時，內容就會直接顯示填表者填寫的電郵信箱。

WPForms 預設有非常多的智慧標籤，詳細可參考官方列表。

STEP 5：設定表單提交後的動作

當用戶填完表單後，我們也能夠讓系統自動執行一些動作，來增加使用者體驗。

我們點選左側選單的「Settings」>「Confirmations」，並在右側選擇「Message」的形式，下方就可以設定你在用戶填完表後，希望跳出的訊息。

當然，如果你有設計感謝頁，也可以選擇「Show Page」的形式，並選擇你設計好的感謝頁。

如果你想要讓用戶填完表後，自動被導到某個網址 (可以是自己網站的網址，也可以是外部的網址)，那就選擇「Go to URL (Redirect)」類型，並在下方貼上你想要自動跳轉的網址。

STEP 6：實際測試表單

當表單全部設定完之後，為了確認表單能不能夠使用，還必須要實際測試表單。

step 1

點選右上角的 “Embed”，會跳出一個視窗，詢問你要將表單嵌入原本的頁面，還是新的頁面。

因目前還在測試階段，所以我是建議不要直接嵌入原先的頁面，而是點選 “Create New Page” 建立新頁面。

step 2

會需要替要建立的新頁面輸入一個標題，輸入完後點 “Let’s Go”。

step 3

頁面會直接跳轉到頁面編輯區，一般來說會自動帶入你剛剛設定的表單。

如果系統沒有幫你自動帶入表單，你可以到左側的「區塊」中，搜尋 “form”，並找到 “WPForms” 的區塊，插入。

step 4

確認表單有嵌入頁面後，點選預覽，就可以在前台看到整個表單的模樣了。

這時候，你可以嘗試填看看表單，並按送出，體驗整個填表的流程。

step 5

如果填寫有成功，你剛剛設定會收到通知郵件的信箱，應該就會收到一封郵件。

避免垃圾郵件的方法：設定驗證碼

網站上放置表單，最擔心的就是會被機器人瘋狂灌垃圾訊息。

所以，建議在設定完表單之後，還需要另外設定 reCAPTCHA 驗證碼，它是 Google 的驗證系統。

step 1

在 WordPress 後台左側選單，點選 “WPForms”>”Settings”。

進入頁面後，上方頁籤選 “CAPTCHA”，並選擇 “reCAPTCHA” 這個驗證方式。

step 2

接著，你會需要先向 Google 申請一組 reCAPTCHA 的金鑰，才能夠做串接。

進入到 Google reCAPTCHA 頁面中，並點擊上方「v3 Admin Console」的選項。

step 3

會出現一個頁面，需要填入相關資訊：

• 標籤：可以自己設定標籤名稱 (自己能辨識就好，建議以網域名稱做區分)
• reCAPTCHA 類型：建議直接選擇 reCAPTCHA v3。
• 網域：填入你的網域 (不用加 https://)

以上都完成後，下方的條款記得勾選，然後就能夠提交進入下一步。

step 4

下個畫面，系統就會出現兩組代碼，一組為「金鑰」、一組為「密鑰」，複製起來。

step 5

回到 WPForms，剛剛的頁面往下拉，會看到幾個設定。

Type 選擇 “reCAPTCHA v3″，下面兩欄則分別貼上剛剛的金鑰。

完成後，點 “Save Settings”。

這樣，你的表單就成功加上驗證機制了，會大幅降低垃圾訊息的機率。

WPForms 與 Contact Form 7 哪個好？

WPForms 跟 Contact Form 7 都是 WordPress 上非常知名的外掛，兩款都有各自的強項，以下分享差異：

	WPForms	Contact Form 7
優點	1. 拖曳式設計，使用起來很直覺 2. 有許多模板，可依照需求選擇	1. 自由度高，免費就能做到很多功能 2. 支援非常多國語言，包含繁體中文
缺點	1. 免費版只支援基本功能 2. 只有英文版的操作介面	1. 要用程式代碼編輯，門檻相對較高 2. 預設外觀有點陽春，需要另外設計
適用對象	任何人，尤其是 WordPress 新手	工程師、前端設計師
適用網站	電商網站，有跟電商外掛整合	形象網站，外觀客製化程度高

WPForms 表單常見問題