Elementor 表單教學：欄位、通知信、多步驟一次上手

要辦一場活動開放線上報名，你第一個念頭通常是找一支報名表單外掛裝上去，欄位填一填、收件信箱設定好，才發現要讓系統自動寄確認信給報名者，還得再裝一支寄信外掛，外掛一支一支疊上去，網站反而變得又重又難顧。

其實如果你的網站本來就在用 Elementor，尤其是 Pro 版，內建的 Elementor 表單（Form）小工具就能一次做到這些事：自己拉欄位、設必填驗證、送出後同時寄通知信給自己與確認信給對方，甚至直接把名單送進行銷工具，完全不用再多裝一支外掛。少一支外掛，網站就少一個要顧相容性、要顧安全更新的麻煩。

這篇就從拖進第一個 Form 小工具開始，一路拆到欄位怎麼設計、送出後動作怎麼串、表單太長怎麼拆成多步驟，讓你把整套流程走一遍就能上手。

Elementor 表單是什麼？為什麼不用再裝表單外掛？

Elementor 表單指的是 Elementor Pro 版才有的 Form 小工具，把它拖進頁面就會自動生成一個基本表單，預設帶著姓名、Email、訊息三個欄位。跟一般外掛做法不同的地方是，Elementor 表單不只負責畫出欄位，訪客送出的資料可以直接存進 WordPress 後台，也能同時觸發寄信、跳轉頁面、串接行銷平台等一連串動作。免費版的 Elementor 沒有這顆小工具，要用得先確認你的站已經升級到 Pro。

這也是為什麼很多本來裝了三四支表單外掛的網站，換成 Elementor 表單之後可以一次砍掉大半：蒐集資料、寄通知信、串行銷工具，原本要分別裝三支外掛做的事，在同一顆小工具裡就能設定完。這篇的示範一律以 Elementor 目前的容器（Container）版面為準，如果你的編輯器介面看起來還是舊版的區塊（Section）與欄（Column），建議先把站台更新到最新版再往下做。

接下來的每一步都建立在這個基礎上，先從欄位怎麼設計開始。

表單欄位怎麼設計，才收得到你要的資訊？

把 Form 小工具拖進頁面之後，第一件事是把預設的三個欄位改成你真正需要的樣子。在左側面板裡，先幫表單本身取個名字，方便日後在後台一堆表單裡找得到它；接著點進姓名欄位，把標籤改成你要的名稱，例如把單一的姓名拆成姓和名兩個欄位，作法是把原本的欄位直接複製一份，改個標籤，再各自把欄寬設成 50%，兩個欄位就會並排在同一列，不會占掉兩行版面。

每個欄位點開之後，會看到內容跟進階兩個分頁。內容分頁管的是使用者看得到的部分：標籤（欄位名稱）、提示文字（放在欄位裡的淺色說明字，像是「請輸入您的手機號碼」）、必填開關，還有前面提過的欄寬。進階分頁則是給系統用的：預設值可以先幫欄位帶入一個常見答案，讓使用者不用每次都手動輸入；欄位 ID 則是之後寫通知信、串接行銷工具時，系統辨認這一格是哪個欄位的依據，同一張表單裡不能有兩個欄位共用同一個 ID，不然系統會分不清楚該抓哪一格的內容。

欄位類型怎麼挑，表單才篩得出你要的資料

欄位的類型決定了訪客能填什麼、系統怎麼驗證。最基本的文字（Text）什麼都能填，適合姓名這種自由格式的欄位；電子郵件（Email）會自動檢查格式，訪客打錯格式就送不出去，直接省掉你事後清理無效信箱的工夫；電話（Tel）、多行訊息（Textarea）也是類似邏輯，一個管格式、一個管長篇內容。

如果表單需要讓訪客選而不是打字，下拉選單（Select）、單選（Radio）、核取方塊（Checkbox）三種都能用，差別在單選只能勾一個，核取方塊可以勾好幾個，適合像「你對哪些服務項目有興趣」這種可以複選的問題。日期、時間欄位會直接跳出對應的選擇器，訪客只能照固定格式點選，不用擔心手動輸入亂填或格式跑掉。

如果需要收檔案，像是應徵者要上傳履歷、設計案要收參考圖，檔案上傳（File Upload）欄位有三種寄送方式可選：把檔案存在伺服器、只寄一個下載連結給你，方便事後追蹤；直接把檔案當附件寄出，不留存在伺服器上，安全性比較高；或是兩種都做。前者好找但相對沒那麼安全，後者難以事後追查但比較不留把柄，依你收到的檔案敏感度決定要選哪一種。另外還有一個隱藏欄位（Hidden），訪客看不到，你可以拿它預埋一些系統資訊，例如訪客是從哪個頁面填表單的。

必填欄位跟表單驗證，怎麼設才不怕漏填

確定欄位類型之後，記得回頭檢查必填開關有沒有打開，沒開的話，訪客就算跳過那一格也照樣能送出表單，你收到的資料可能缺東缺西。開啟必填記號，欄位旁邊會出現提示符號，讓訪客一眼看出哪些是非填不可的，不用等送出失敗才發現漏填。

表單驗證則分成兩種模式：一種是瀏覽器預設，直接沿用訪客瀏覽器內建的檢查機制和提示訊息；另一種是自訂，你可以自己寫送出成功或失敗時要顯示的文字，讓語氣跟你網站的其他頁面一致，也能換成中文的提示，不用讓訪客看到瀏覽器原生的英文錯誤訊息。

欄位顧好之後，表單能不能取代外掛，關鍵還是在送出之後系統幫你做了哪些事。

表單送出後，你想讓它做什麼？

欄位設計完，真正決定這顆表單能不能取代外掛的關鍵在送出後動作。這裡可以一次疊加好幾個動作，同一次送出既存進後台、又寄通知信給你、又自動回覆給對方、還能同時把名單送進行銷工具，而不是只能二選一。預設一定會有的動作叫收集提交，負責把每一筆資料存進 WordPress 後台，之後不管其他動作有沒有設定成功，這筆資料至少都留得住，這是最基本、幾乎不該關掉的一個動作。

通知信怎麼設定，你才會第一時間知道有人填表單

加上 Email 這個動作，訪客一送出表單，系統就會寄一封信到你指定的信箱。可以設定的欄位不少：收件人、主旨、內文，內文預設放的是一個叫 [all-fields] 的短碼，代表把這張表單所有欄位的內容都塞進信裡；如果你只想收特定幾個欄位，把這個短碼刪掉，改貼你要的欄位短碼即可。另外還能設定寄件信箱、寄件人名稱、回覆地址，甚至加副本、密件副本，讓團隊裡其他人也同步收到通知。

Elementor 官方文件裡也提到，像 Gmail 這類信箱服務對寄件信譽的審查愈來愈嚴格，通知信偶爾會被判成垃圾信，建議把網站信件交給專門的寄信服務處理，跟一般網頁伺服器分開送，送達率會明顯提升，不用只靠猜測是哪裡出了問題。

自動回覆、導向頁面，讓訪客知道表單真的送出去了

除了通知你自己，也可以再加一個 Email 2 動作，設定成自動寄給填表單的訪客本人，內容像是「我們已經收到您的訊息，會在一個工作天內回覆」，讓對方安心，不用擔心表單是不是真的送出去了。

導向（Redirect）動作則是讓訪客送出表單後，直接跳到一個獨立的感謝頁面，而不是停在原地看一句成功訊息。這個做法還有個附加好處，感謝頁的網址可以拿去 GA4 或廣告後台設成轉換目標，之後想追蹤有多少人真的送出表單，就有明確的頁面可以抓，不用只靠猜測後台的提交筆數。如果你的表單旁邊還有彈出視窗，彈出視窗動作也能設定送出後自動打開或關閉指定的視窗，例如送出報名表之後彈出一個優惠券視窗。

動作設定完，表單已經能自己處理通知與導向，剩下的就是要不要把名單直接送進其他系統。

串接行銷工具，Elementor 表單自動幫你收名單

如果你的目的是蒐集電子報訂閱名單或潛在客戶名單，一筆一筆手動匯出到行銷平台既慢又容易漏。Elementor 表單在送出後動作清單裡，原生就列了好幾家常見的電子報與行銷自動化平台，像是 ActiveCampaign、ConvertKit、Drip、GetResponse、MailChimp、MailerLite，選好平台、貼上該平台給你的 API 金鑰，再把表單裡的姓名、Email 欄位對應到平台的對應欄位，訪客一送出表單，名單就直接進了平台的清單裡，不用再自己整理 CSV 匯入。

如果你要串的平台不在原生清單裡，例如想把資料同步進 Google 試算表、丟進 Slack 或 Discord 通知團隊，可以改用 Webhook 動作，搭配 Zapier 這類自動化服務。做法是先在 Zapier 那端建好一個接收表單資料的網址，把這串網址貼進 Elementor 表單的 Webhook 設定裡，之後在 Zapier 那邊接上你要串的服務就完成了，只是比起原生整合，這條路多了一道要先在對方平台設定好接收端的手續。

串接想清楚之後，回頭看表單本身，如果欄位多到訪客填不完，串接再多平台也留不住名單。

表單欄位太多沒人填完？改用多步驟表單

一次攤開七、八個欄位的表單，很容易讓人看了就想關掉分頁。這時候可以靠一種特殊的欄位類型 Step，把長表單拆成好幾個步驟，每個步驟只露出兩三個欄位，填起來的壓力感明顯低很多。做法是在表單欄位清單裡新增一個 Step 類型的欄位，再把它拖到你想切開的位置，比如拖到 Email 欄位跟詳細需求欄位中間，表單就會在那裡斷開成兩頁，前一頁自動出現下一步按鈕，後一頁自動出現上一步與最後送出用的提交按鈕，不用自己額外加按鈕。

步驟指示器的樣式也能自己選，可以顯示成純文字、圖示、數字，或是進度條，進度條的好處是讓訪客看得到自己填到全部的幾成，填到一半放棄的機率會比完全看不到進度時低一些。表單愈長、欄位愈多的情境，愈值得拆成多步驟。

表單好填只是留住名單的一半，擋得住垃圾送出，收到的名單才會乾淨。

擋垃圾表單，不用再裝一支防護外掛

表單一旦公開在網路上，遲早會遇到機器人程式亂灌垃圾資料，這個問題也一樣不用另外裝防護外掛，Elementor 內建就有兩種做法可以擋。首選是 reCAPTCHA v3，訪客完全不用勾任何東西，Google 會在背景根據瀏覽行為自動算出一個分數，分數太低的才會被判定可疑，對訪客的干擾最小；次選是 reCAPTCHA v2，也就是常見的「我不是機器人」勾選框，或是完全隱形的驗證徽章。

設定流程分兩段：先到 Google reCAPTCHA 的網站，選你要的版本、登記你的網域，拿到一組網站金鑰跟密鑰；接著回到 WordPress 後台的 Elementor 設定裡找到整合頁面，把這兩組金鑰貼進去存檔。最後回到表單編輯畫面，新增一個欄位、類型選 reCAPTCHA 或 reCAPTCHA v3，表單上就會出現驗證徽章。

如果不想多繞一趟 Google 申請金鑰的流程，還有一個更輕量的做法叫 Honeypot（蜜罐），這是一個訪客看不到、但機器人程式看得到的隱藏欄位。真人不會去填一個看不見的欄位，機器人程式卻分辨不出這個欄位是隱藏的，只要那格有值，系統就直接判定是垃圾送出，自動擋掉。適合流量沒特別大、不想多一道驗證畫面的表單。

防護顧好之後，最後要確認的是，這些好不容易收進來的資料，你知不知道去哪裡查。

送出的表單資料，要去哪裡查？

表單設定得再完整，最後還是要記得去哪裡看訪客送出的內容。第一個管道是 WordPress 後台 Elementor 底下的提交紀錄（Submissions），只要前面的收集提交動作沒關掉，每一筆送出都會存底，之後想核對、想匯出整理都找得到；第二個管道就是前面設定的通知信，直接在信箱裡看最快。

建議兩個管道都留著，不要只選一個。信件雖然即時，但偶爾會被判成垃圾信、或是團隊裡剛好沒人查信；後台紀錄雖然不即時，卻是最後一道備援，兩者互補才不容易漏接訪客的訊息。

從拖進第一個 Form 小工具開始，把欄位設計對、必填驗證顧好，送出後動作一次疊上通知信與行銷串接，需要的話再拆成多步驟表單、掛上防垃圾機制，一顆 Elementor 表單小工具就能撐起一整套會蒐集、會通知、也會串接的表單系統，不用再為了收一封訪客訊息，另外多裝一支表單外掛。