n8n 表单节点#

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

View workflow file

设置节点#

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

您可以通过在 n8n 表单触发器提供的初始 URL 中使用查询参数来设置字段的初始值。表单中的每个页面都会接收发送给 n8n 表单触发器 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#

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

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

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

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

包含隐藏字段#

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

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

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

使用 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 之外的每个 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', 'date' and 'file'

[
	{
		"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"
				}
			]
		},
		"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"
	}
]

表单结束#

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

使用在 n8n 表单提交时时可选择以下选项：

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

具有分支的表单#

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

具有互斥分支的工作流#

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

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

View workflow file

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

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

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

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

View workflow file

节点选项#

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

表单标题：表单的标题。n8n 将表单标题显示为网页标题和表单上的主要 h1 标题。
表单描述：表单的描述。n8n 将表单描述显示为表单上主要 h1 标题下方的副标题。此字段支持 HTML。使用 \n 或 <br> 添加换行符。表单描述还会为页面填充 HTML 元描述。
按钮标签：用于表单提交按钮的标签。n8n 将按钮标签显示为提交按钮的名称。
自定义表单样式：使用 CSS 覆盖公共表单界面的默认样式。该字段会预填充默认样式，因此您只需更改需要的部分。
完成页面标题：表单最终完成页面的标题。

运行节点#

构建和测试工作流#

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

有两种测试方法：

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

生产工作流#

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

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

模板和示例#

此页面是否

💬 微信

🚀 与作者交流

关注公众号

n8n实战笔记
📚 教程 💡 案例 🔧 技巧

添加微信

1对1 专业指导
⚡ 快答 🎯 定制 🚀 支持

添加后请直说来意，看到会回复。谢谢