n8n Form 节点

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

View workflow file

设置节点

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

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

仅适用于生产环境

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

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

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

• 生产 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

这里，百分号编码将 @ 符号（@）替换为字符串 %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 定义表单

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

• fieldLabel：显示在输入字段上方的标签。
• fieldType：从 date、dropdown、email、file、number、password、text 或 textarea 中选择。
  • 使用 date 在表单中包含日期选择器。有关格式化日期的更多信息，请参阅 Date and time with Luxon。
  • 使用 dropdown 时，用 fieldOptions 设置选项（参考下面的示例）。默认情况下，下拉列表是单选的。要使其多选，将 multiselect 设置为 true。
  • 使用 file 时，将 multipleFiles 设置为 true 以允许用户选择多个文件。要定义允许的文件类型，将 acceptFileTypes 设置为包含逗号分隔文件扩展名列表的字符串（参考下面的示例）。
• placeholder：为字段指定占位符数据。您可以为除 dropdown、date 和 file 之外的每个 fieldType 使用此选项。
• requiredField：要求用户在表单上完成此字段。

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

// 在任何字段上使用 "requiredField" 键将其标记为必填
// 使用 "placeholder" 键为除 'dropdown'、'date' 和 'file' 之外的所有字段指定占位符数据

[
	{
		"fieldLabel": "Date Field",
		"fieldType": "date",
		"formatDate": "mm/dd/yyyy", // 如何在 n8n 中格式化接收的日期
		"requiredField": true
	},
	{
		"fieldLabel": "Dropdown Options",
		"fieldType": "dropdown",
		"fieldOptions": {
			"values": [
				{
					"option": "option 1"
				},
				{
					"option": "option 2"
				}
			]
		},
		"requiredField": true
	},
	{
		"fieldLabel": "Multiselect",
		"fieldType": "dropdown",
		"fieldOptions": {
			"values": [
				{
					"option": "option 1"
				},
				{
					"option": "option 2"
				}
			]
		},
		"multiselect": true // 设置为 true 允许多选
	},
	{
		"fieldLabel": "Email",
		"fieldType": "email",
		"placeholder": "[email protected]"
	},
	{
		"fieldLabel": "File",
		"fieldType": "file",
		"multipleFiles": true, // 设置为 true 允许选择多个文件
		"acceptFileTypes": ".jpg, .png" // 允许的文件类型
	},
	{
		"fieldLabel": "Number",
		"fieldType": "number"
	},
	{
		"fieldLabel": "Password",
		"fieldType": "password"
	},
	{
		// "fieldType": "text" 可以省略，因为它是默认类型
		"fieldLabel": "Text"
	},
	{
		"fieldLabel": "Textarea",
		"fieldType": "textarea"
	}
]

表单结束

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

使用 On n8n Form Submission 时选择以下选项：

• Show Completion Screen：向用户显示最终屏幕以确认他们已提交表单。
  • 填写 Completion Title 设置表单上的 h1 标题。
  • n8n 将 Completion Message 显示为表单上主 h1 标题下方的副标题。使用 \n 或 <br> 添加换行符。
  • 选择 Add option 并填写 Completion Page Title 以设置浏览器标签中的页面标题。

使用 Redirect to URL 时，在 URL 字段中填写用户完成表单时要重定向到的页面。

使用 Show Text 显示由任意纯文本和 HTML 定义的最终页面。在 Text 字段中填写您希望显示的 HTML 或纯文本内容。

带分支的表单

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

具有互斥分支的工作流

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

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

View workflow file

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

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

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

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

View workflow file

节点选项

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

• Form Title：表单的标题。n8n 将 Form Title 显示为网页标题和表单上的主 h1 标题。
• Form Description：表单的描述。n8n 将 Form Description 显示为主 h1 标题下方的副标题。此字段支持 HTML。使用 \n 或 <br> 添加换行符。Form Description 还填充页面的 HTML meta description。
• Button Label：用于表单提交按钮的标签。n8n 将 Button Label 显示为提交按钮的名称。

运行节点

构建和测试工作流

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

有两种测试方法：

• 选择 Test Step。n8n 打开表单。当您提交表单时，n8n 运行该节点和任何前面的节点，但不运行工作流的其余部分。
• 选择 Test Workflow。n8n 打开表单。当您提交表单时，n8n 运行工作流。

生产工作流

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

使用生产 URL 时，确保您已保存并激活工作流。使用生产 URL 时，通过 Form trigger 流动的数据在编辑器 UI 中不可见。

模板和示例

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 表单 integration templates, or search all templates