表單對於任何網站都是必不可少的——從簡單的聯絡表單到複雜的多步驟註冊流程。Elementor Pro 包含一個內建的表單小工具，在許多情況下消除了對單獨表單插件的需求。在本指南中，我們將介紹如何使用 Elementor Pro 創建聯絡表單、註冊表單和多步驟表單，以及電子郵件行銷和 CRM 服務的整合選項。
本教程需要 Elementor Pro。Elementor 的免費版本不包含表單小工具。
Elementor 表單小工具概述
Elementor 表單小工具支持以下字段類型：
| 字段類型 | 使用案例 | 備註 |
|---|---|---|
| 文本 | 姓名、公司、主題行 | 單行文本輸入 |
| 電子郵件 | 收集電子郵件地址 | 包括電子郵件格式驗證 |
| 文本區域 | 消息正文、評論、描述 | 可配置行數的多行文本 |
| 電話 | 電話號碼 | 在手機上觸發數字鍵盤 |
| 數字 | 數量、預算、評分 | 最小/最大/步驟驗證 |
| 網址 | 網站地址 | 網址格式驗證 |
| 選擇 | 下拉選擇（國家、類別） | 單選或多選 |
| 單選 | 從選項中單一選擇（服務類型） | 無下拉的可見選項 |
| 複選框 | 多重選擇（興趣、服務） | 允許多重選擇 |
| 日期 | 約會日期、事件日期 | 原生日期選擇器 |
| 時間 | 約會排程 | 時間選擇控制 |
| 文件上傳 | 簡歷、文件、圖片提交 | 可配置的文件類型和大小限制 |
| 接受 | 條款和條件、GDPR 同意 | 必填的帶鏈接複選框 |
| 隱藏 | 追蹤數據（頁面 URL、推薦來源） | 對用戶不可見 |
| reCAPTCHA | 防垃圾郵件保護 | v2 複選框或 v3 隱形 |
| 蜜罐 | 防垃圾郵件（對人類隱形） | 捕捉機器人的隱藏字段 |
創建聯絡表單
步驟 1：添加表單小工具
- 在 Elementor 編輯器中打開任何頁面
- 在小工具面板中搜索 "表單"
- 將表單小工具拖入佈局中
- 默認表單包括姓名、電子郵件和消息字段
步驟 2：配置表單字段
對於標準聯絡表單，以下字段配置效果良好：
- 姓名（文本字段，必填）– 占位符："您的姓名"
- 電子郵件（電子郵件字段，必填）– 占位符："[email protected]"
- 主題（文本字段，選填）– 占位符："我們能幫助您什麼？"
- 消息（文本區域字段，必填）– 占位符："告訴我們您的項目..."，行數：5
- reCAPTCHA 或 蜜罐 用於防垃圾郵件保護
步驟 3：配置提交後的操作
在 "提交後的操作" 部分，配置用戶提交表單後發生的事情： For related information, see our guide on Elementor complete guide.
- 電子郵件：將表單數據發送到您的電子郵件地址（或多個地址）
- 重定向：提交後將用戶發送到感謝頁面
- 彈出窗口：顯示確認彈出窗口
- Webhook：將表單數據發送到外部 URL（Zapier、Make、自定義 API）
- Mailchimp / ConvertKit / Drip：將訂閱者添加到電子郵件行銷列表
- Slack：向 Slack 頻道發送通知
- Discord：向 Discord webhook 發送通知
步驟 4：設計表單
在 樣式 標籤中，自定義視覺外觀： For related information, see our guide on Elementor templates and kits.
- 表單佈局
- 欄位排列： 堆疊（全寬）或內聯（並排）
- 欄位樣式： 邊框、背景顏色、內邊距、邊框圓角、焦點狀態顏色
- 標籤樣式： 字體系列、大小、顏色、間距
- 按鈕樣式： 背景顏色、文字顏色、邊框、懸停效果、全寬選項
- 訊息： 成功和錯誤訊息的顏色和排版
- 將表單小工具添加到您的頁面
- 在表單欄位列表中，在欄位組之間添加「步驟」欄位類型
- 每個步驟欄位創建一個新步驟，並帶有「下一步」和「上一步」按鈕
- 範例結構：
- 步驟 1：姓名、電子郵件、電話（個人信息）
- 步驟 2：公司、預算、時間表（項目詳情）
- 步驟 3：訊息、文件上傳（附加信息）
- 添加表單小工具並配置欄位（用戶名、電子郵件、密碼）
- 在「提交後操作」下，添加「註冊」操作
- 將每個表單欄位映射到相應的 WordPress 用戶欄位
- 為新註冊設置默認用戶角色
- 可選擇在註冊後將用戶重定向到其帳戶頁面
- Google reCAPTCHA v3： 無形的垃圾郵件檢測，無需用戶互動即可對提交進行評分。建議用於大多數表單
- reCAPTCHA v2： 「我不是機器人」的核取方塊。更明顯，但可能會降低表單完成率
- 蜜罐欄位： 一個隱形欄位，機器人會填寫。如果該欄位包含數據，則提交將被拒絕。無需用戶互動
- 接受欄位： 一個必填的核取方塊（GDPR 同意、條款接受），也可作為機器人的威懾
創建多步驟表單
多步驟表單對於長表單（註冊、申請、調查）非常有用，因為一次顯示所有欄位可能會讓使用者感到不知所措。Elementor Pro 原生支持多步驟表單。 For related information, see our guide on creating landing pages with Elementor.
如何設置步驟
多步驟表單顯示進度指示器，顯示使用者當前所處的步驟。這減少了感知的複雜性，並提高了完成率，相較於一次顯示所有欄位。
創建用戶註冊表單
Elementor Pro 可以在不使用單獨插件的情況下創建 WordPress 用戶註冊表單：
注意：WordPress 默認需要管理員批准新用戶。如果您希望用戶自由註冊，可以在設置 → 一般 → 會員資格中更改此設置。
與電子郵件行銷服務整合
Elementor Pro 直接與流行的電子郵件行銷平台整合：
| 服務 | 整合類型 | 設置步驟 |
|---|---|---|
| Mailchimp | 原生（內建） | 添加 API 金鑰 → 選擇列表 → 映射欄位 |
| ConvertKit | 原生（內建） | 添加 API 金鑰 → 選擇表單 → 映射欄位 |
| ActiveCampaign | 原生（內建） | 添加 API 憑證 → 選擇列表 → 映射欄位 |
| Drip | 原生（內建） | 添加 API 令牌 → 選擇帳戶 → 映射欄位 |
| GetResponse | 原生（內建） | 添加 API 金鑰 → 選擇活動 → 映射欄位 |
| MailerLite | 原生（內建） | 添加 API 金鑰 → 選擇群組 → 映射欄位 |
| HubSpot | 通過 Webhook | 創建 Zapier/Make 連接與 webhook 操作 |
對於每個整合，流程是：在 Elementor 的整合設置中輸入您的服務的 API 金鑰，然後在您的表單中選擇該服務作為「提交後操作」。將您的表單欄位映射到服務的欄位，當表單提交時，訂閱者將自動添加。
垃圾郵件保護策略
聯絡表單容易吸引垃圾郵件機器人。Elementor Pro 提供幾種垃圾郵件防範選項：
我們建議使用 reCAPTCHA v3 結合蜜罐欄位。這提供了兩層垃圾郵件保護，且不會對用戶造成任何可見影響。
在用戶體驗中。
Elementor 表單與專用表單插件
| 功能 | Elementor 表單 | Gravity Forms | WPForms |
|---|---|---|---|
| 視覺構建器 | 在 Elementor 編輯器內 | 獨立的拖放式 | 獨立的拖放式 |
| 條件邏輯 | 基本（顯示/隱藏字段） | 進階 | 進階 |
| 支付整合 | PayPal 按鈕 | Stripe, PayPal, Square | Stripe, PayPal, Square |
| 計算 | 否 | 是 | 是（專業版） |
| 多步驟 | 是 | 是 | 是 |
| 文件上傳 | 是 | 是 | 是 |
| 條目管理 | 通過 Elementor 提交 | 完整的條目管理器 | 完整的條目管理器 |
| 需要頁面構建器 | 是（Elementor Pro） | 否 | 否 |
Elementor 表單足以用於聯絡表單、電子報註冊和簡單的註冊表單。對於需要支付處理、進階條件邏輯或複雜條目管理的表單，像 Gravity Forms 或 WPForms 這樣的專用表單插件更為合適。
常見問題
我可以在沒有 Elementor Pro 的情況下使用 Elementor 表單嗎？
不可以。表單小工具僅限於 Elementor Pro。如果您需要在 Elementor 的免費版本中使用表單，請使用像 Contact Form 7（免費）、WPForms Lite（免費）或 Gravity Forms（付費）的獨立表單插件。
Elementor 表單提交存儲在哪裡？
表單提交存儲在 WordPress 數據庫中，可以在管理面板的 Elementor → 提交中訪問。您可以查看、導出（CSV）和刪除提交。提交也會發送到您在電子郵件操作中配置的電子郵件地址。
Elementor 表單可以接受文件上傳嗎？
可以。將文件上傳字段類型添加到您的表單中。您可以配置接受的文件類型（PDF、JPG、PNG、DOCX 等）和最大文件大小。上傳的文件存儲在 WordPress 媒體庫中，並與表單提交相關聯。
我如何在 Elementor 表單中添加條件邏輯？
Elementor Pro 支持基本的條件邏輯：根據另一個字段的值顯示或隱藏字段。在字段設置中，啟用「條件」並設置條件（例如，僅在選擇「我是一家企業」單選按鈕時顯示「公司」字段）。對於進階條件邏輯（計算、多級條件），專用表單插件可能更為合適。
我可以使用 Elementor 創建彈出表單嗎？
可以。在 Elementor 中創建彈出模板，在其中添加表單小工具，並設置觸發條件（點擊、滾動百分比、退出意圖、時間延遲）。這對於電子報註冊、潛在客戶獲取和促銷優惠非常有用，而無需將表單添加到主頁面佈局中。
我如何防止 Elementor 表單上的垃圾郵件？
使用 Google reCAPTCHA v3（隱形）結合一個 Honeypot 字段以實現雙層保護。這可以阻止自動機器人，而不會給真實用戶帶來摩擦。對於高垃圾郵件量的表單，考慮添加一個接受字段（必填複選框）作為第三層。
獲取 Elementor Pro 與表單構建器
訪問表單小工具、主題構建器、WooCommerce 構建器和 100 多個專業小工具。無需額外插件即可視覺化構建表單。
瀏覽 Elementor Pro →
