跳到主要内容

n8n 表单节点#

使用 n8n 表单节点可创建包含多个步骤的用户交互表单。您可以在节点之间添加具有自定义逻辑的其他节点来处理用户输入。工作流必须从 n8n 表单触发器节点 开始。

查看工作流文件

节点设置#​

通过查询参数设置默认选项#​

您可以通过 n8n 表单触发器节点 提供的初始 URL，使用 查询参数 为字段设置初始值。表单中的每个页面都会接收到发送至 n8n 表单触发器节点 URL 的相同查询参数。

仅限生产环境

查询参数仅在生产模式下可用。在测试模式下，n8n 不会通过查询参数填充字段值。

使用查询参数时，请对包含特殊字符的字段名或值进行 百分号编码。这能确保 n8n 正确使用指定字段的初始值。您可使用 URL 编码/解码工具 对查询参数进行百分号编码。

例如，假设您的表单具有以下属性：

  • 生产环境 URL：https://my-account.n8n.cloud/form/my-form
  • 字段：
    • name: Jane Doe
    • email: [email protected]

通过查询参数和百分号编码，您可以使用以下 URL 将字段初始值设置为上述数据：

https://my-account.n8n.cloud/form/my-form?email=jane.doe%40example.com&name=Jane%20Doe

此处，百分号编码将 at 符号（@）替换为字符串 %40，将空格字符（ ）替换为字符串 %20。无论这些字段出现在表单的哪个页面，此操作都会为其设置初始值。

显示自定义 HTML#​

通过向表单添加自定义 HTML 字段，可在表单上显示自定义 HTML。该字段提供一个 HTML 输入框，您可插入任意 HTML 代码作为表单页面的组成部分。

您可使用 HTML 字段增强表单页面功能，例如添加链接、图片、视频等内容。n8n 将在常规文档流中与其他表单字段一同渲染该内容。

由于自定义 HTML 内容为只读属性，默认情况下这些字段不会包含在表单输出数据中。若要在节点输出中包含原始 HTML 内容，请通过元素名称字段为数据命名。

HTML 字段不支持 <script>、<style> 或 <input> 元素。

包含隐藏字段#​

可在表单中包含不对用户显示的字段。当需要向表单传递无需用户交互输入的额外数据时，此功能非常实用。

要添加不会显示在表单上的字段，请使用隐藏字段表单元素。在此处可定义字段名称，并可选择通过填写字段值来提供默认值。

提供表单服务时，可通过查询参数为隐藏字段传递值。

使用 JSON 定义表单#​

使用定义表单 > 使用 JSON，可通过 JSON 对象数组定义表单字段。每个对象通过组合以下键来定义单个字段：

  • fieldLabel：输入字段上方显示的标签
  • fieldType：可选类型包括 checkbox、date、dropdown、email、file、hiddenField、html、number、password、radio、text 或 textarea
    • 使用 date 可在表单中包含日期选择器。有关日期格式的详细信息，请参阅使用 Luxon 处理日期和时间
    • 使用 dropdown 时，通过 fieldOptions 设置选项（参考下方示例）。默认情况下下拉菜单为单选模式。设置为多选需将 multiselect 设为 true。作为替代方案，也可将 checkbox 或 radio 与 fieldOptions 配合使用
    • 使用 file 时，将 multipleFiles 设为 true 可允许用户选择多个文件。通过将 acceptFileTypes 设置为包含逗号分隔文件扩展名字符串来定义允许的文件类型（参考下方示例）
    • 使用 hiddenField 可向表单添加隐藏字段。详细信息请参阅包含隐藏字段
    • 使用 html 可在表单上显示自定义 HTML。详细信息请参阅显示自定义 HTML
  • placeholder：指定字段的占位符数据。除 dropdown、date 和 file 外，其余 fieldType 均可使用此参数
  • requiredField：要求用户必须在表单中填写此字段

以下示例 JSON 展示了所需通用格式及可用键：

// Use the "requiredField" key on any field to mark it as mandatory
// Use the "placeholder" key to specify placeholder data for all fields
// except 'dropdown', 'checkbox', 'radio', 'date' and 'file'
// Use the "defaultValue" key to pre-fill a form field or pre-select a 
// value in 'checkbox', 'radio' or 'dropdown' fields

[
  {
    "fieldLabel": "Date Field",
    "fieldType": "date",
    "formatDate": "mm/dd/yyyy", // how to format received date in n8n
    "requiredField": true
  },
  {
    "fieldLabel": "Dropdown Options",
    "fieldType": "dropdown",
    "fieldOptions": {
      "values": [
        {
          "option": "option 1"
        },
        {
          "option": "option 2"
        }
      ]
    },
    "defaultValue": "option 1",
    "requiredField": true
  },
  {
    "fieldLabel": "Multiselect",
    "fieldType": "dropdown",
    "fieldOptions": {
      "values": [
        {
          "option": "option 1"
        },
        {
          "option": "option 2"
        }
      ]
    },
    "multiselect": true // setting to true allows multi-select
  },
  {
    "fieldLabel": "Email",
    "fieldType": "email",
    "placeholder": "me@mail.com"
  },
  {
    "fieldLabel": "File",
    "fieldType": "file",
    "multipleFiles": true, // setting to true allows multiple files selection
    "acceptFileTypes": ".jpg, .png" // allowed file types
  },
  {
    "fieldLabel": "Number",
    "fieldType": "number"
  },
  {
    "fieldLabel": "Password",
    "fieldType": "password"
  },
  {
    // "fieldType": "text" can be omitted since it's the default type
    "fieldLabel": "Text"
  },
  {
    "fieldLabel": "Textarea",
    "fieldType": "textarea",
    "defaultValue": "Lorem ipsum."
  },
  {
    "fieldType": "html",
    "elementName": "content", // Optional field. It can be used to include the html in the output.
    "html": "<div>Custom element</div>"
  },
  {
    "fieldLabel": "Checkboxes",
    "fieldType": "checkbox",
    "fieldOptions": {
      "values": [
        {
          "option": "option 1"
        },
        {
          "option": "option 2"
        }
      ]
    },
    "defaultValue": ["option 1", "option 2"]
  },
  {
    "fieldLabel": "Radio",
    "fieldType": "radio",
    "fieldOptions": {
      "values": [
        {
          "option": "option 1"
        },
        {
          "option": "option 2"
        }
      ]
    }
  },
  {
    "fieldLabel": "hidden label",
    "fieldType": "hiddenField",
    "fieldValue": "extra form data"
  }
]

表单结束#​

使用表单结束页面类型可终止表单，并显示完成页面、将用户重定向至URL，或展示自定义HTML/文本。即使n8n执行包含表单结束节点的多个分支，每次执行也仅会显示一个表单结束页面。

  • 填写完成标题设置表单的h1标题
  • n8n会将完成消息显示为主h1标题下方的副标题，使用\n或<br />添加换行
  • 选择添加选项并填写完成页面标题设置浏览器标签页标题
  • 重定向至URL：表单完成后将用户跳转到指定URL
    • 在URL字段填写用户完成表单后要跳转的页面
  • 显示文本：展示由任意纯文本和HTML定义的最终页面
    • 在文本字段填入需要显示的HTML或纯文本内容
  • 返回二进制文件：完成后返回二进制文件
    • 填写完成标题设置表单的h1标题
    • n8n会将完成消息显示为主h1标题下方的副标题，使用\n或<br />添加换行
    • 提供包含要返回给用户的二进制文件的输入数据字段名称

多分支表单#​

当n8n表单节点接收到前置节点数据时，就会执行并显示关联的表单页面。在使用n8n构建表单时，理解分支场景下的表单行为至关重要。

互斥分支工作流#​

此工作流展示了互斥分支机制，每个选择仅能执行单一分支：

查看工作流文件

可能执行多分支的工作流#​

需要特别注意同时向多个分支发送数据的表单工作流。当多个分支在执行过程中接收数据时（例如通过条件分支节点），n8n会按顺序执行每个接收到数据的分支，完成前一分支后继续执行下一个含数据的分支。

n8n每次执行仅会处理一个表单结束节点。当表单工作流的多个分支接收数据时，系统将忽略最终分支之外的所有表单结束节点。

此工作流在执行过程中可能触发多个分支。此处n8n会顺序执行所有有效分支，这将影响实际执行的n8n表单节点（特别是显示的表单结束节点）：

查看工作流文件

节点选项#​

选择添加选项可查看更多配置项：

  • 表单标题：作为网页标题和表单主h1标题显示
  • 表单描述：作为主h1标题下方的副标题显示，支持HTML，可使用\n或<br />换行，同时会填充页面的HTML元描述
  • 自定义表单样式：通过CSS覆盖公共表单界面的默认样式，字段预填充默认样式便于局部修改
  • 完成页面标题：表单最终完成页的标题

运行节点#​

构建与测试工作流#​

在构建或测试工作流时，请使用n8n表单触发节点中的测试URL。测试URL可确保在编辑界面查看传入数据，便于调试。

两种测试方式：

生产环境工作流#​

使用生产URL时请确保已保存并激活工作流，通过表单触发节点的数据不会在编辑界面显示。

模板与示例#​

✨🤖 使用AI实现多平台社交媒体内容自动创建
作者：Joseph LePage
查看模板详情

AI驱动的社交媒体内容生成与发布器
作者：Amjid Ali
查看模板详情

🚀 通过Gemini将播客转化为爆款TikTok片段+多平台发布✅
作者：Matt F.
查看模板详情

浏览n8n表单集成模板 或 搜索所有模板