Skip to content

n8n 表单节点#

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

View workflow file

节点设置#

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

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

仅限生产环境

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

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

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

  • 生产环境 URL: https://my-account.n8n.cloud/form/my-form
  • 字段:
    • name: Jane Doe
    • email: jane.doe@example.com

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

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

在此示例中，百分号编码将 at 符号 (@) 替换为字符串 %40，空格字符 () 替换为字符串 %20。这将设置这些字段的初始值，无论它们出现在表单的哪个页面。

显示自定义 HTML#

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

您可以使用 HTML 字段来丰富表单页面，包括链接、图片、视频等内容。n8n 会在正常文档流中将这些内容与其他表单字段一起渲染。

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

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

包含隐藏字段#

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

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

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

使用 JSON 定义表单#

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

  • fieldLabel: 显示在输入框上方的标签文本
  • fieldType: 可选类型包括 date（日期）、dropdown（下拉框）、email（邮箱）、file（文件）、number（数字）、password（密码）、text（文本）或 textarea（多行文本）
    • 使用 date 类型可在表单中包含日期选择器。关于日期格式化，请参考 使用 Luxon 处理日期和时间
    • 使用 dropdown 类型时，通过 fieldOptions 设置选项（参考下方示例）。默认情况下下拉框为单选模式，如需多选需将 multiselect 设为 true
    • 使用 file 类型时，将 multipleFiles 设为 true 可允许选择多个文件。通过 acceptFileTypes 设置允许的文件类型，值为逗号分隔的文件扩展名字符串（参考下方示例）
  • placeholder: 指定字段的占位文本。除 dropdown、date 和 file 类型外，其他类型均可使用
  • requiredField: 设为 true 表示该字段为必填项

以下示例 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
// 在任何字段上使用 "requiredField" 键可将其标记为必填项
// 使用 "placeholder" 键可为除 'dropdown'、'date' 和 'file' 外的所有字段指定占位文本

[
	{
		"fieldLabel": "日期字段",
		"fieldType": "date",
		"formatDate": "mm/dd/yyyy", // 定义在 n8n 中接收日期的格式
		"requiredField": true
	},
	{
		"fieldLabel": "下拉选项",
		"fieldType": "dropdown",
		"fieldOptions": {
			"values": [
				{
					"option": "选项1"
				},
				{
					"option": "选项2"
				}
			]
		},
		"requiredField": true
	},
	{
		"fieldLabel": "多选下拉",
		"fieldType": "dropdown",
		"fieldOptions": {
			"values": [
				{
					"option": "选项1"
				},
				{
					"option": "选项2"
				}
			]
		},
		"multiselect": true // 设为 true 启用多选功能
	},
	{
		"fieldLabel": "邮箱",
		"fieldType": "email",
		"placeholder": "me@mail.con"
	},
	{
		"fieldLabel": "文件",
		"fieldType": "file",
		"multipleFiles": true, // 设为 true 允许多文件选择
		"acceptFileTypes": ".jpg, .png" // 允许的文件类型
	},
	{
		"fieldLabel": "数字",
		"fieldType": "number"
	},
	{
		"fieldLabel": "密码",
		"fieldType": "password"
	},
	{
		// "fieldType": "text" 可省略，因为这是默认类型
		"fieldLabel": "文本"
	},
	{
		"fieldLabel": "多行文本",
		"fieldType": "textarea"
	}
]

表单结束页#

使用 表单结束页 页面类型来结束表单，可以显示完成页面、重定向用户到指定 URL 或展示自定义 HTML/文本。即使 n8n 执行了包含分支的表单，每次执行也只会显示一个表单结束页。

当选择 在 n8n 表单提交时 时，有以下选项：

  • 显示完成页面：向用户展示最终确认页面
    • 填写 完成标题 设置表单的 h1 标题
    • n8n 会将 完成信息 显示为主标题下方的副标题。使用 \n 或 <br> 添加换行
    • 选择 添加选项 并填写 完成页标题 设置浏览器标签页标题

当选择 重定向到 URL 时，在 URL 字段填写用户完成表单后要跳转的页面地址。

使用 显示文本 展示由纯文本或 HTML 定义的最终页面。在 文本 字段中输入要展示的 HTML 或纯文本内容。

带分支的表单#

当 n8n 表单节点收到前一个节点的数据时，就会执行并显示其关联的表单页面。在使用 n8n 构建表单时，为避免混淆，理解表单在分支情况下的行为非常重要。

互斥分支的工作流#

包含互斥分支的表单工作流会按预期工作。n8n 会根据提交的数据和设定的条件执行单一分支。执行过程中，n8n 会显示分支中的每个页面，最终以 表单结束页 类型的 n8n 表单节点结束。

以下工作流展示了互斥分支的情况。每个选择都只会执行单一分支。

View workflow file

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

同时向多个分支发送数据的表单工作流需要特别注意。当多个分支在一次执行中接收数据时（例如来自 switch 节点），n8n 会按顺序执行每个接收数据的分支。当一个分支执行完毕后，执行流程会转移到下一个有数据的分支。

n8n 每次执行仅运行单个 表单结束 n8n Form 节点。当表单工作流的多个分支接收数据时，n8n 会忽略除最后一个分支关联的表单结束节点外的所有其他表单结束节点。

以下工作流在一次执行中可能会运行多个分支。此处，n8n 会按顺序执行所有有效分支。这会影响 n8n 执行哪些表单节点（特别是显示哪个 表单结束 节点）：

View workflow file

节点选项#

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

  • 表单标题：表单的标题。n8n 会将 表单标题 显示为网页标题和表单上的主 h1 标题。
  • 表单描述：表单的描述信息。n8n 会将 表单描述 显示为表单主 h1 标题下方的副标题。此字段支持 HTML，可使用 \n 或 <br> 添加换行。表单描述还会作为页面的 HTML meta description 内容。
  • 按钮标签：表单提交按钮的显示文本。n8n 会将 按钮标签 显示为提交按钮的名称。

运行节点#

构建与测试工作流#

在构建或测试工作流时，请使用 n8n Form Trigger 中的 测试 URL。使用测试 URL 可以确保您能在编辑器界面查看传入数据，这对调试非常有用。

有两种测试方式：

  • 选择 测试步骤。n8n 将打开表单。当您提交表单时，n8n 会运行该节点及之前的所有节点，但不会执行工作流的其余部分。
  • 选择 测试工作流。n8n 将打开表单。当您提交表单时，n8n 会运行整个工作流。

生产环境工作流#

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

使用生产 URL 时，请确保已保存并激活工作流。通过生产 URL 时，编辑器界面不会显示流经 Form Trigger 的数据。

模板与示例#

Very quick quickstart

by Deborah

View template details
AI agent that can scrape webpages

by Eduard

View template details
Pulling data from services that n8n doesn’t have a pre-built integration for

by Jonathan

View template details
Browse n8n 表单（n8n Form） integration templates, or search all templates