表单对于任何网站都是必不可少的——从简单的联系表单到复杂的多步骤注册流程。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（不可见）结合一个蜜罐字段，以实现双层保护。这可以阻止自动机器人，而不会给真实用户增加阻力。对于高垃圾邮件量的表单，考虑添加一个接受字段（必填复选框）作为第三层。
获取带表单构建器的 Elementor Pro
访问表单小部件、主题构建器、WooCommerce 构建器和 100 多个专业小部件。无需额外插件即可可视化构建表单。
浏览 Elementor Pro →
