Skip to content

n8n Form 节点#

使用 n8n Form 节点创建多步骤的用户界面表单。您可以在其中添加其他具有自定义逻辑的节点来处理用户输入。您必须使用 n8n Form Trigger 节点 启动工作流。

Workflow preview placeholder.

设置节点#

使用查询参数设置默认选择#

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

仅适用于生产环境

查询参数仅在生产模式下使用表单时可用。n8n 不会在测试模式下从查询参数填充字段值。

使用查询参数时，需要对使用特殊字符的字段名称或值进行 百分号编码。这确保 n8n 使用给定字段的初始值。您可以使用 URL Encode/Decode 等工具使用百分号编码格式化查询参数。

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

  • 生产 URL：https://my-account.n8n.cloud/form/my-form
  • 字段：

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

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

这里，百分号编码将 @ 符号（@）替换为字符串 %40，将空格字符（）替换为字符串 %20。这将为这些字段设置初始值，无论它们出现在表单的哪个页面上。

显示自定义 HTML#

您可以通过向表单添加 Custom HTML 自定义 HTML 字段在表单上显示自定义 HTML。这提供了一个 HTML 框，您可以在其中插入任意 HTML 代码作为表单页面的一部分显示。

您可以使用 HTML 字段通过包含链接、图像、视频等内容来丰富您的表单页面。n8n 将在正常文档流中与其余表单字段一起渲染内容。

由于自定义 HTML 内容是只读的，默认情况下这些字段不包含在表单输出数据中。要在节点输出中包含原始 HTML 内容，请使用 Element Name 元素名称字段为数据提供名称。

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

如果您使用表单结束页面类型，您可以通过将 On n8n Form Submission 在 n8n 表单提交时参数选择为 Show Text 显示文本来完全自定义发送给用户的最终页面（包括使用 <script>、<style> 和 <input> 元素）。

包含隐藏字段#

可以在表单中包含字段而不向用户显示它们。当您想要向表单传递不需要交互式用户输入的额外数据时，这非常有用。

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

在服务表单时，您可以使用查询参数为隐藏字段传递值。

使用 JSON 定义表单#

使用 Define Form > Using JSON 使用 JSON 对象数组 定义表单字段。每个对象通过使用这些键的组合定义单个字段：

  • fieldLabel：在渲染表单上输入字段上方显示的标签。
  • fieldName：用于 Form 节点输出并在表达式中引用字段的字段名称。
  • 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、checkbox、radio、date 和 file 之外的每个 fieldType。
  • defaultValue：指定将在表单元素中预填充或预选的值。你可以将此用于除 password、html、hiddenField 和 file 之外的每个 fieldType。
  • requiredField：要求用户在表单上完成此字段。

一个显示所需通用格式和可用键的 JSON 示例：

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
// 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": "[email protected]"
  },
  {
    "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"
  }
]

表单结束#

使用 Form Ending 页面类型结束表单，显示完成页面、将用户重定向到 URL 或显示自定义 HTML 或文本。即使 n8n 执行包含 Form Ending 节点的 多个分支，每次执行也只显示一个 Form Ending 页面。

使用 On n8n Form Submission 在 n8n 表单提交时 时选择以下选项：

  • Show Completion Screen 显示完成屏幕：向用户显示最终屏幕以确认他们已提交表单。 - 填写 Completion Title 完成标题 以设置表单上的 h1 标题。 - n8n 将 Completion Message 完成消息 显示为表单上主 h1 标题下方的副标题。使用 <br> 添加换行符。 - 选择 Add option 添加选项 并填写 Completion Page Title 完成页面标题 以设置浏览器选项卡中的页面标题。
  • Redirect to URL 重定向到 URL：表单完成时将用户重定向到指定的 URL。 - 在 URL 字段中填写用户完成表单时要重定向到的页面。
  • Show Text 显示文本：显示由任意纯文本和 HTML 定义的最终页面。 - 在 Text 文本 字段中填写您希望显示的 HTML 或纯文本内容。
  • Return Binary File 返回二进制文件：完成时返回二进制文件。 - 填写 Completion Title 完成标题 以设置表单上的 h1 标题。 - n8n 将 Completion Message 完成消息 显示为表单上主 h1 标题下方的副标题。使用 <br> 添加换行符。 - 提供包含要返回给用户的二进制文件的 Input Data Field Name 输入数据字段名称。

带有分支的表单#

n8n Form 节点在接收到来自前一个节点的数据时执行并显示其关联的表单页面。在使用 n8n 构建表单时，为了避免混淆，重要的是要了解当发生分支时表单的行为方式。

具有互斥分支的工作流#

包含互斥分支的表单工作流按预期工作。n8n 将根据提交的数据和您概述的条件执行单个分支。在执行时，n8n 将显示分支中的每个页面，最后以具有 Form Ending 表单结束 页面类型的 n8n Form 节点结束。

此工作流演示了互斥分支。每个选择只能执行单个分支。

Workflow preview placeholder.

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

同时向多个分支发送数据的表单工作流需要更多注意。当多个分支在执行期间接收数据时（例如，来自 switch 节点），n8n 顺序 执行每个接收数据的分支。到达一个分支的末尾后，执行将移动到下一个有数据的分支。

n8n 每次执行只执行一个 Form Ending n8n Form 节点。当表单工作流的多个分支接收数据时，n8n 忽略除与最后分支关联的 Form Ending 节点之外的所有 Form Ending 节点。

此工作流可能在执行期间执行多个分支。在这里，n8n 顺序执行所有有效分支。这影响 n8n 执行哪些 n8n Form 节点（特别是显示哪个 Form Ending 节点）：

Workflow preview placeholder.

节点选项#

选择 Add Option 添加选项 以查看更多配置选项：

  • Form Title 表单标题：您的表单标题。n8n 将 Form Title 表单标题 显示为网页标题和表单上的主 h1 标题。
  • Form Description 表单描述：您的表单描述。n8n 将 Form Description 表单描述 显示为表单上主 h1 标题下方的副标题。此字段支持 HTML。使用 <br> 添加换行符。表单描述还会填充页面的 HTML meta description。
  • Button Label 按钮标签：用于表单提交按钮的标签。n8n 将 Button Label 按钮标签 显示为提交按钮的名称。
  • Custom Form Styling 自定义表单样式：使用 CSS 覆盖公共表单界面的默认样式。该字段预填充了默认样式，因此您只需更改需要的内容。
  • Completion Page Title 完成页面标题：表单最终完成页面的标题。

运行节点#

构建和测试工作流#

在构建或测试工作流时，使用 n8n Form Trigger 节点 中的 Test URL 测试 URL。使用测试 URL 确保您可以在编辑器 UI 中查看传入数据，这对调试很有用。

有两种测试方式：

  • 选择 Execute Step 执行步骤。n8n 打开表单。当您提交表单时，n8n 运行节点和任何前置节点，但不运行工作流的其余部分。
  • 选择 Execute Workflow 执行工作流。n8n 打开表单。当您提交表单时，n8n 运行整个工作流。

生产工作流#

当您的工作流准备就绪时，通过打开触发器节点并在 From URLS 来源 URL 选择器中选择 Production URL 生产 URL 来切换到使用 n8n Form Trigger 的 Production URL 生产 URL。然后您可以发布工作流，当用户提交表单时，n8n 会自动运行它。

使用生产 URL 时，请确保您已保存并发布工作流。通过表单触发器流动的数据在使用生产 URL 时在编辑器 UI 中不可见。

模板和示例#

Template widget placeholder.