n8n 表单节点#

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

设置节点#

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

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

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

举个例子，假设你有一个包含以下属性的表单：

• 生产环境URL: https://my-account.n8n.cloud/form/my-form
• Fields:
  • 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。无论这些字段出现在表单的哪个页面，这都将设置它们的初始值。

Displaying custom HTML#

You can display custom HTML on your form by adding a Custom HTML field to your form. This provides an HTML box where you can insert arbitrary HTML code to display as part of the form page.

You can use the HTML field to enrich your form page by including things like links, images, videos, and more. n8n will render the content with the rest of the form fields in the normal document flow.

Because custom HTML content is read-only, these fields aren't included in the form output data by default. To include the raw HTML content in the node output, provide a name for the data using the Element Name field.

The HTML field doesn't support

包含隐藏字段#

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

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

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

使用JSON定义表单#

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

• fieldLabel: 输入框上方显示的标签文本。
• fieldType: Choose from date, dropdown, email, file, number, password, text, or textarea.
  • 使用 date 在表单中添加日期选择器。有关日期格式化的更多信息，请参考 Date and time with Luxon。
  • 使用dropdown时，通过fieldOptions设置选项（参考下方示例）。默认情况下下拉框是单选模式。如需启用多选功能，请将multiselect设为true。
  • 使用file时，将multipleFiles设为true以允许用户选择多个文件。要定义允许的文件类型，请将acceptFileTypes设置为包含逗号分隔文件扩展名列表的字符串（参考下方示例）。
• placeholder: 为字段指定占位数据。除了dropdown、date和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

// 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": "me@mail.con"
	},
	{
		"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"
	}
]

表单结束#

Use the Form Ending Page Type to end a form and either show a completion page, redirect the user to a URL, or display custom HTML or text. Only one Form Ending page displays per execution, even when n8n executes multiple branches that contain Form Ending nodes.

在使用On n8n Form Submission时，请在这些选项之间进行选择：

• Show Completion Screen: Shows users a final screen to confirm that they submitted the form.
  • 填写Completion Title来设置表单上的h1标题。
  • n8n 将完成消息显示为表单主标题h1下方的副标题。使用\n或
可添加换行符。
  • 选择添加选项并填写完成页面标题以设置浏览器标签页中的页面标题。

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

Use Show Text to display a final page defined by arbitrary plain text and HTML. Fill in the Text field with the HTML or plain text content you wish to show.

带分支的表单#

每当n8n表单节点接收到来自前一个节点的数据时，它就会执行并显示其关联的表单页面。在使用n8n构建表单时，为了避免混淆，理解表单在分支发生时如何表现非常重要。

具有互斥分支的工作流#

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

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

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

将数据同时发送到多个分支的表单工作流需要更加谨慎。当多个分支在执行过程中接收数据时（例如来自switch节点），n8n会按顺序执行每个接收数据的分支。当一个分支执行结束时，工作流会继续执行下一个含有数据的分支。

n8n 每次执行仅运行单个表单结束n8n表单节点。当表单工作流的多个分支都接收到数据时，n8n会忽略所有表单结束节点，仅处理与最终分支关联的那个节点。

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

节点选项#

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

• 表单标题: 表单的标题。n8n会将表单标题显示为网页标题和表单上的主h1标题。
• Form Description: The description for your form. n8n displays the Form Description as a subtitle below the main h1 title on the form. This field supports HTML. Use \n or
to add a line break. The Form Description also populates the HTML meta description for the page.
• 按钮标签: 用于表单提交按钮的标签。n8n将按钮标签显示为提交按钮的名称。

运行节点#

构建和测试工作流#

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

有两种测试方式：

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

生产工作流#

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

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

模板和示例#