跳到主要内容
FormFlow

用生成的组件把表单嵌入你自己的网站

从“获取代码”复制表单生成的组件，粘贴到你自己的页面，并设置访客点击“发送”后到达的位置。包含步骤、标记示例，以及粘贴副本的局限。

本文由机器翻译。 阅读英文原文

The generated component in FormFlow's Get code dialog: a Copy to clipboard button above a code block whose first sixteen lines are the HTML style rules for the embedded form, such as .ff-form, .ff-label and .ff-input.

表单并不一定需要 FormFlow 提供的页面。如果你已经有自己的网站，可以把表单生成的组件粘贴进去，让访客一直停留在你自己的页面上。本教程涵盖复制、粘贴，以及事后最常让人意外的两件事：访客点击“发送”后会到达哪里，以及之后更改表单字段会发生什么。嵌入功能从 v1.0.0 起就是 FormFlow 的一部分。

你需要准备什么

一个至少有一个字段的表单，以及一个你自己的页面，可以在其中粘贴 HTML，或者 Blade、Vue 或 React 文件。你不需要托管页面，托管页面仅在付费套餐中提供。“获取代码”不会检查你的套餐，所以使用 Free 套餐的团队同样可以嵌入表单。套餐的提交额度仍然适用于该表单收到的内容。

复制生成的组件

  1. 在面板中打开表单。在编辑器顶部点击“获取代码”。对于从未收到过提交的表单，它是高亮显示的按钮；对于其他所有表单，它位于“工具”下。表单列表的每一行也有“获取代码”操作。

  2. 窗口的标题是“可粘贴的组件”。它的第一行是“将您的表单指向”，后面跟着表单的端点，端点以表单的令牌结尾。你的页面只需要这个地址。

  3. 选择一种“风格”。同一种风格驱动所有标签页和“预览”，默认是 Minimal。风格会写入复制的内容，所以之后换风格意味着要重新复制。

  4. 选择适合你技术栈的标签页：HTML、Blade、Vue 或 React。“预览”标签页会在面板内绘制 HTML 版本，让你在粘贴任何内容之前先检查一下。

  5. 点击标签页顶部的“复制到剪贴板”标记，然后把结果粘贴到你页面中希望显示表单的位置。

HTML 副本包含什么

HTML 标签页是一个向你的表单端点提交的普通表单。下面是一个带电子邮箱字段的表单的节选示例。YOUR_FORM_TOKEN 代表令牌，实际副本中最前面还有一个包含该风格 CSS 的 style 元素。

<form action="https://formflow.digital/api/v1/f/YOUR_FORM_TOKEN" class="ff-form" lang="en" dir="ltr" method="post">
    <div class="ff-group">
        <label class="ff-label" for="ff-email" dir="auto">Email<span aria-hidden="true"> *</span></label>
        <input class="ff-input" id="ff-email" name="email" type="email" dir="auto" autocomplete="email" required>
    </div>
    <!-- ...one group per field... -->

    <div aria-hidden="true" class="ff-honeypot">
        <label for="ff-ff_xxxxxxxx">Leave this field empty</label>
        <input autocomplete="off" id="ff-ff_xxxxxxxx" name="ff_xxxxxxxx" tabindex="-1" type="text">
    </div>

    <button class="ff-button" type="submit">Send</button>
</form>

有两处值得说明。字段名称，例如 name="email"，就是你的提交中显示为答案的名称，所以请在表单中修改它们，而不是在你的页面里改。屏幕外的输入框是一个垃圾信息陷阱，人看不到，机器人却往往会填写。它的名称为每个表单单独生成，这里显示为 ff_xxxxxxxx。请保留它。

决定访客最后到达哪里

HTML 和 Blade 副本是原生表单。有人点击“发送”时，浏览器会向 FormFlow 提交，并显示 FormFlow 的回应。没有设置重定向时，这个回应是一条简短的 JSON 消息。它是准确的，但不是你希望访客读到的内容。面板在该设置旁边也是这么说的：“纯 HTML 表单的提交者将收到原始 JSON 响应。”

  1. 在表单编辑器中，打开“投递”标签页。

  2. 在“提交者最后到达哪里”下，在“将提交者重定向至”中填入你自己网站上的感谢页面。它必须是 http 或 https 地址。

  3. 保存表单。

React 和 Vue 副本的工作方式不同。它们在后台提交，并就地显示自己的确认消息，所以重定向只对 HTML 和 Blade 有意义。

限制提交可以来自哪里

默认情况下，表单接受来自任何来源的提交。在“安全”标签页的“提交可以来自哪里”下，“允许的来源”只接受主机名，不带协议或路径。它的提示文字说明，列表为空表示允许任何来源。添加你网站的主机名，例如 example.com，来自其他来源的提交就会被拒绝。其下方的开关“拒绝没有 Origin header 的提交”还会拒绝完全不带来源的提交。

如果从你页面发出的测试提交被拒绝，通常是主机名拼写有误。FormFlow 会保留你可以处理的被拒绝提交，所以请先修正列表，然后到面板的“拒绝”下把它们恢复。

Turnstile 与你的内容安全策略

还有两件事，只有在你用到时才适用。第一，“安全”标签页上的“需要 Turnstile 验证”开关（即 Cloudflare Turnstile 挑战）。FormFlow 内置的 Turnstile 密钥只覆盖 FormFlow 自己提供的页面，所以在你自己的网站上，你需要自己的 Cloudflare Turnstile 密钥，并填入“团队设置”。没有的话，副本中会带有占位符 YOUR_TURNSTILE_SITE_KEY，来自你页面的每一条提交都会被判为垃圾信息。

第二，如果你的网站发送内容安全策略，“获取代码”会打印出需要添加的指令，位于以“如果您的网站使用内容安全策略 (CSP)”开头的那一行。对于普通副本，这包括：允许 'self' 和 challenges.cloudflare.com 的 script-src，针对 challenges.cloudflare.com 的 frame-src，以及针对你表单端点来源的 connect-src。请从窗口中复制这一行，而不是从这里复制，因为它是为你的表单生成的。

检查是否正常工作

  1. 打开你的页面，通过粘贴的表单发送一条测试内容。

  2. 确认你到达了预期的位置：你的感谢页面，或者 React、Vue 副本中的确认消息。

  3. 在面板中打开“提交”，找到这条内容。如果找不到，请先查看“拒绝”，再做任何更改。

需要了解的局限

  • 粘贴的副本不会跟随表单字段之后的更改，除非你使用“实时渲染”或重新复制。

  • 风格在你复制时就已固定。之后无法从表单中更改。

  • 重定向只适用于原生表单。

  • “允许的来源”只是收窄浏览器流量，并不会对任何人进行身份验证。

把你的第一个表单指向 FormFlow。

无需搭建后端，无需托管前端。

免费开始