如何在没有自定义后端的情况下处理 Webflow 表单提交

Webflow 的联系表单开箱即用，颜值在线，但它的内置处理机制只做一件事：把提交数据发到你的邮箱。它不会把数据存进数据库、不会对接 CRM，也不会触发任何自定义逻辑。如果你需要的不只是一封邮件通知，就必须把 Webflow 的表单提交数据路由到外部服务。好消息是，整个过程不需要写一行后端代码。

Webflow 默认给你什么

Webflow 内置的表单处理器做三件事：向网站所有者发送邮件通知、显示提交成功提示，以及在 Webflow 控制台记录提交记录（付费套餐才有）。对于小型网站的基础联系表单来说够用，但只要你有以下任何一个需求，它就会立刻捉襟见肘：

• 向填写表单的用户自动回复邮件
• 将提交数据转发到指定的团队收件箱或 CRM
• 条件逻辑（例如按产品兴趣分配线索）
• 超出 Webflow 基础 honeypot 机制的垃圾邮件过滤
• 带时间戳和重试机制的可靠投递记录

以上功能原生均不支持。你需要一个外部层，而现实可行的方案有三种。

原生集成 - Zapier 和 Make

Webflow 与 Zapier 和 Make（前身为 Integromat）有直接集成。每当有新的表单提交，触发器就会触发，你可以串联任意动作：往 Google Sheets 添加一行、在 HubSpot 创建联系人、发一条 Slack 消息，等等。

这是大多数设计师首选的无代码路径，配置步骤如下：

1. 在 Webflow 中，进入 项目设置 > 集成 ，连接你的 Zapier 账号。
2. 在 Zapier 中，新建一个 Zap，触发器选择 Webflow - New Form Submission 。
3. 按名称选择对应的表单。
4. 添加动作步骤（Gmail、Slack、Airtable 等）。
5. 用真实提交测试，然后启用该 Zap。

Make 在复杂工作流上价格更实惠，但两个平台都引入了外部依赖：一旦 Zapier 或 Make 宕机，或者你的账号触及配额上限，提交数据就会悄悄丢失或积压在队列里。

使用 Webflow Webhook

Webflow webhook 是一条更直接的路径。每当有表单提交，Webflow 就会向你指定的 URL 发送一个 HTTP POST 请求。你控制接收 endpoint，因此可以对 payload 做任何处理。

配置步骤如下：

1. 在 Webflow 中，进入 项目设置 > 集成 > Webhooks 。
2. 点击 添加 Webhook ，触发事件选择 表单提交 。
3. 粘贴你的接收服务的 endpoint URL。
4. 保存，然后用真实提交进行测试。

Webflow 发送的 payload 是一个 JSON 对象，包含所有字段的值、表单名称以及站点元数据。典型的 payload 结构如下：

{
  "name": "Contact Form",
  "site": "my-webflow-site",
  "data": {
    "Name": "Jane Smith",
    "Email": "[email protected]",
    "Message": "Hi, I'd like a quote."
  },
  "submittedAt": "2024-11-15T10:22:00Z"
}

问题在于：你需要有东西来接收这个 webhook。可选方案包括一个小型 Cloudflare Worker 、一个 Pipedream 工作流，或者一个专用的表单后端。自己写接收器，恰恰就是本文想帮你避免的"自建后端"问题。这也是表单转邮件服务成为最简洁方案的原因。

用表单服务替换表单 endpoint

你完全可以绕过 Webflow 的表单处理器，直接把表单的 action 属性指向第三方表单服务。该服务接收 POST 请求、验证数据、过滤垃圾信息，然后把结果发到你的邮箱。你这边不需要任何后端。

在 Webflow 中的操作流程如下：

1. 在 Webflow 设计器中，选中你的表单元素。
2. 在 表单设置 面板中，将 Action 字段设置为表单服务的 endpoint URL（例如 https://sendform.net/!your-form-id ）。
3. 将 Method 设置为 POST 。
4. 确保每个输入框都有 name 属性 - Webflow 默认会设置这些。
5. 发布网站，测试一次提交。

这种方式完全绕过了 Webflow 的表单处理器。提交数据直接从访客的浏览器发往表单服务，你收到邮件，服务负责重试和垃圾过滤，而 Webflow 只作为 UI 层存在。

同样的方式适用于任何静态或无代码网站。如果你同时在 GitHub Pages 或 Cloudflare Pages 上托管网站， 免费托管静态网站并让联系表单正常工作 这篇文章介绍的正是同一套方案。

Sendform 与其他方案对比

有多个表单服务可以与 Webflow 配合使用。以下是主流选项在联系表单场景中最关键维度上的对比：

Sendform 在几个具体方面表现突出，这些优势在表格里体现不完：

• 零摩擦配置： 无需先注册账号，直接获取表单 endpoint URL。粘贴到 Webflow 的 Action 字段，完成。
• 默认不存储提交数据： Sendform 将数据发送到你的邮箱后不会在服务器上留存，这是符合 GDPR 要求的正确默认行为。Formspree 等竞品会把所有提交记录存在自己的控制台，意味着用户数据会无限期地留在第三方服务器上。
• 对开发者友好，同时也适合无代码用户： 不像 Zapier 那样需要维护工作流，也不像 Netlify Forms 那样绑定特定托管平台，无论是 Webflow、GitHub Pages 还是其他任何平台都能用。
• 诚实的免费套餐： 没有"升级才能解锁跳转"这类套路，不会用功能墙把你推向付费计划。

该选哪种方案？

正确答案取决于表单提交后你实际需要做什么：

• 只需要邮件通知： 用 Sendform。把 endpoint URL 粘贴到 Webflow 的 Action 字段，两分钟搞定。
• 邮件通知 + CRM 或表格同步： 用 Sendform 负责邮件投递，再可选地添加一个由收件邮件触发的 Zapier 步骤，或者在你的套餐支持的情况下使用 Sendform 的 webhook 输出。
• 复杂的多步自动化： 把 Webflow webhook 接入 Make 或 Zapier 是合理选择，但要预留付费套餐的预算。
• 已经在用 Netlify： Netlify Forms 对简单场景没问题，但任何有实际流量的网站很快就会撞上每月 100 次的上限。

对于绝大多数 Webflow 联系表单来说，无非就是姓名、邮箱、留言三个字段，要求稳定地落到收件箱，Sendform 是最快、最简洁的路径。不需要后端，不用盯着每月任务配额，也不会有提交数据躺在你早就忘记的第三方控制台里。

无需编写后端，轻松处理 Webflow 联系表单

Sendform 提供现成的表单 endpoint，直接粘贴到 Webflow 的 Action 字段即可，表单提交数据即时送达你的收件箱，内置垃圾过滤，默认符合 GDPR 要求。

免费试用 Sendform →