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

WPForms 教學:WordPress 拖曳式表單外掛,免費版建立聯絡表單步驟

WordPress 外掛推薦發布 2020.12.22更新 2026.10.02閱讀約 5 分鐘
WPForms 教學:WordPress 拖曳式表單外掛,免費版建立聯絡表單步驟

重點整理
WPForms 是拖曳式的 WordPress 表單外掛,免費版在外掛庫的名稱是 WPForms Lite(2026 年 10 月版本 2.0.2.1、啟用網站超過 500 萬個)。用範本建立聯絡表單、拖曳增減欄位、儲存後用「嵌入」或區塊放進頁面,三個步驟就能上線。要注意免費版不會把表單內容存在後台,只能靠 Email 通知收件;要在後台查看與匯出填寫紀錄、使用條件邏輯與檔案上傳,需要升級 Pro。

網站上的聯絡表單,是訪客看完內容後主動聯繫你的入口。表單太複雜沒人想填,收不到通知又等於白做。這篇用 WPForms 示範從安裝、用範本建立聯絡表單、放到頁面,到設定 Email 通知的完整流程,也說明免費版和付費版的差別,讓你判斷要不要升級。

WPForms 有哪些功能?

WPForms 的特色是「不用寫程式、用拖曳就能做表單」。免費版就包含:

  • 拖曳式表單編輯器:從左側把欄位拖到表單裡,即時預覽。
  • 表單範本:聯絡表單、訂閱表單、意見回饋等,選了就能改。
  • 響應式設計:手機、平板、電腦都能正常填寫。
  • Email 通知與確認訊息:有人送出表單時寄信給你,並顯示感謝訊息或導向指定頁面。
  • 垃圾訊息防護:內建防護預設開啟,也能串接 Google reCAPTCHA、hCaptcha 或 Cloudflare Turnstile。
  • Stripe 金流:免費版就能建立基本的付款表單。

多頁表單、檔案上傳、條件邏輯、後台查看填寫紀錄、更多金流與電子報串接,則屬於 Pro 付費功能。

官方網站:wpforms.com

步驟一:安裝 WPForms 並新增表單

到 WordPress 後台「外掛 >安裝外掛」,搜尋 WPForms,安裝並啟用。啟用後左側選單會出現「WPForms」,點「新增表單」開始建立。

在 WordPress 外掛頁面搜尋並安裝 WPForms
在 WordPress 外掛頁面搜尋並安裝 WPForms

步驟二:選擇表單範本

先替表單取一個名稱,再從範本中挑一個最接近需求的。這裡用最常見的「簡易聯絡表單」示範。範本只是起點,之後都能自由修改;部分範本需要付費版才能使用,畫面上會標示。現在也可以用 AI 描述需求,讓外掛先產生表單草稿再微調。

WPForms 的表單範本選擇畫面,以簡易聯絡表單示範
WPForms 的表單範本選擇畫面,以簡易聯絡表單示範

步驟三:拖曳欄位設計表單

進入編輯器後,左側是可用的欄位,點一下或拖曳就能加入表單;右側是即時預覽。範本裡已經有姓名、Email、留言等基本欄位,點選欄位可以修改標籤文字、設定必填或加上說明。

WPForms 表單編輯器,左側欄位清單、右側表單預覽
WPForms 表單編輯器,左側欄位清單、右側表單預覽

依照網站需求調整欄位,例如加入電話、服務項目下拉選單。欄位越少,填寫意願通常越高,只留真正需要的資訊就好。

點選表單欄位後在左側修改欄位選項
點選表單欄位後在左側修改欄位選項

步驟四:儲存並把表單放到頁面上

設計完成後,按編輯器右上角的「儲存」。

WPForms 編輯器右上角的儲存按鈕
WPForms 編輯器右上角的儲存按鈕

放到頁面有兩種方式:

  • 嵌入功能:在表單編輯器按「嵌入」,可以選擇放進現有頁面或建立新頁面,外掛會自動帶你到頁面編輯畫面。
  • 區塊或短代碼:在區塊編輯器新增「WPForms」區塊並選擇表單;或在「WPForms >所有表單」複製表單的短代碼,貼到頁面、小工具或頁面編輯器的短代碼元件中。
WPForms 所有表單列表,顯示每個表單的短代碼
WPForms 所有表單列表,顯示每個表單的短代碼
把 WPForms 短代碼貼到頁面內容中
把 WPForms 短代碼貼到頁面內容中

發佈頁面後到前台檢查,表單就會出現在頁面上。記得用手機也看一次。

聯絡表單在網站前台顯示的樣子
聯絡表單在網站前台顯示的樣子

步驟五:設定 Email 通知,確保收得到表單內容

免費版不會把表單內容存在 WordPress 後台,每一筆填寫都是靠 Email 通知寄給你,所以這一步一定要設定好。回到表單編輯器的「設定 >通知」,確認通知已開啟,收件地址填你常用的信箱,主旨與內容可以用欄位標籤帶入填寫者的資料。

WPForms 表單設定中的通知頁面,設定收件信箱與信件內容
WPForms 表單設定中的通知頁面,設定收件信箱與信件內容

設定完一定要自己填一次表單測試。如果收不到信,多半是主機的寄信功能被擋或被歸類為垃圾郵件,這時可以安裝 SMTP 外掛(例如 WP Mail SMTP 或 Post SMTP),改用正式的郵件帳號寄送,設定方式可以參考 WordPress SMTP 設定教學。

在外掛頁面搜尋 Post SMTP 寄信外掛
在外掛頁面搜尋 Post SMTP 寄信外掛

常見問題

WPForms Lite 可以在後台查看表單填寫紀錄嗎?

不行,WPForms Lite 不會把填寫內容存在網站後台,只能透過 Email 通知收到。外掛有「填寫內容備份」(Lite Connect)選項,開啟後內容會備份在 WPForms 的雲端,升級 Pro 後可以匯入;要直接在後台查看、搜尋與匯出,需要 Pro 版。

WPForms 免費版夠用嗎?

只需要一般聯絡表單、靠 Email 收件的話,免費版就夠用。需要多頁表單、讓訪客上傳檔案、依答案顯示不同欄位(條件邏輯),或要在後台管理填寫紀錄,才需要考慮 Pro,價格以官網顯示為準。

WPForms 和 Contact Form 7 該選哪一個?

想要拖曳操作、即時預覽,選 WPForms;想要完全免費、功能用外掛擴充,而且不排斥編輯表單標籤,選 Contact Form 7。Contact Form 7 的用法可以參考 Contact Form 7 教學。

結語

WPForms 讓沒有程式背景的人也能在幾分鐘內做出好看的聯絡表單:選範本、拖曳欄位、嵌入頁面。真正要花心思的是「收得到」:免費版完全依賴 Email 通知,上線前務必實際送出一次測試,確認信件有進收件匣。等表單量變多、需要在後台管理資料時,再評估升級 Pro。

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

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

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