表单概述 - Webflow 帮助
Last updated on 10/9/2025@mrbirddev
添加和配置 Webflow 表单。
表单是网络上最强大的工具之一,无论是收集电子邮件通讯注册还是潜在客户的工作咨询,都可以高效地捕捉信息。使用 Webflow,您可以完全自定义和优化表单以满足您的需求。您可以从 添加面板 → 元素 → 表单 将表单块添加到您的网站。
表单结构
表单块继承其父元素的全宽度,并包含三个子元素:
- 表单 — 包含所有表单输入和元素
- 成功消息 — 表单成功提交时返回的消息
- 错误消息 — 表单提交出现问题时返回的消息
表单结构
您可以根据需要在表单中添加或删除以下任何表单元素以自定义您的表单:
表单元素 | 目的 |
---|---|
字段标签 | 用于描述表单字段的功能或目的。字段标签对于可访问性至关重要。 |
输入框 | 用于收集单行数据,如对问题的简短回答(例如,姓名或电子邮件地址) |
文件上传 | 允许网站访问者将文件附加到他们的表单提交中 |
文本区域 | 允许网站访问者输入多行数据,如长消息 |
复选框 | 用于输入数据,网站访问者可以选择一个或多个选项 |
单选按钮 | 用于输入数据,网站访问者只能从多个选项中选择一个 |
下拉选择 | 允许网站访问者从下拉列表中选择选项。允许多选 |
reCAPTCHA | Google 服务,防止表单垃圾邮件 |
提交按钮 | 提交表单中收集的所有数据。没有 提交按钮 的表单是不完整的 |
表单元素只能添加在表单块内。
如何配置表单元素
您可以双击表单元素(例如,输入框、提交按钮)以打开其设置。 每个表单元素根据其类型有不同的输入设置:
输入设置 | 目的 | 其他说明 |
---|---|---|
名称 | 标识表单提交中的字段 | 不适用 |
必填 | 让您要求填写表单字段才能提交表单 | 阻止空提交 |
占位符 | 在输入时显示的文本会消失;不应替代标签或重要说明 | 辅助技术或翻译工具不可用;可从状态菜单设置样式 |
文本类型 | 指定输入类型(例如,电子邮件、电话、密码) | 电话接受字符并显示键盘;密码隐藏输入字符 |
自动聚焦 | 决定页面加载时字段是否自动聚焦 | 注意滚动/跳转问题或隐藏字段阻止提交 |
提交按钮
提交按钮的设置允许您设置:
- 按钮文本:按钮上显示的内容(默认:“提交”)
- 等待文本:点击后替换按钮的内容,直到提交完成(默认:“请稍候…”)
如何管理表单设置
自定义成功和错误状态
选择表单块并进入表单块设置以:
- 正常:默认状态
- 成功:成功提交后的消息
- 错误:提交失败后的消息
我们建议在错误状态中包含一个电子邮件地址,以防网站访问者提交表单时遇到问题。
设置表单名称
您设置的名称将表单与其提交数据关联。如果不设置唯一名称,所有提交数据将显示在“电子邮件表单”下。请使用描述性名称来区分表单。
管理表单提交和通知
- 在表单块设置中指定收件人。
- 在网站设置 → 表单 → 表单通知中访问高级通知。
- 对于完整网站所有者:在网站设置 → 表单 → 表单提交中访问/管理表单数据。
在表单提交时重定向网站访问者
在重定向字段中添加一个URL,以便在提交后将用户发送到其他地方。
设置自定义操作
添加自定义操作以将提交发送到其他地方(例如HubSpot)。添加此操作时,Webflow 不会处理或发送通知。您还可以连接应用程序以实现更多集成。
查看应用程序连接
连接的应用程序将出现在连接中。注意:除非您完全绕过Webflow处理,否则发送表单数据到Webflow始终会出现。
表单数据和GDPR
此处内容仅提供信息,并非法律建议。
- 如果您从欧盟居民收集个人数据(包括通过表单),您就是GDPR下的数据控制者。
- 获取适当的收集数据的同意。
- 如果为客户构建网站,请教育他们了解其责任。
- 如果将数据连接到第三方(例如Zapier),请审查责任。
了解更多:
故障排除
如果您的表单无法提交:
- 如果您启用了reCAPTCHA,请确保所有表单都包含它。否则,提交将失败。
- 如果您有隐藏字段,请确保这些字段的自动聚焦已关闭。
- 免费/未托管的网站限制为总共50次表单提交。升级您的网站计划以移除限制。
如果问题仍然存在,请联系客户支持。
如果您导出您的网站,Webflow将**不会处理表单提交。** 使用第三方工具来收集它们或嵌入第三方表单集成。
Last updated on 10/9/2025@mrbirddev
Recent Articles