Skip to content

n8n 表单节点#

¥n8n Form node

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

¥Use the n8n Form node to create user-facing forms with multiple steps. You can add other nodes with custom logic between to process user input. You must start the workflow with the n8n Form Trigger node.

Workflow preview placeholder.

设置节点#

¥Setting up the node

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

¥Set default selections with query parameters

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

¥You can set the initial values for fields by using query parameters with the initial URL provided by the n8n Form Trigger node. Every page in the form receives the same query parameters sent to the n8n Form Trigger node URL.

Only for production

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

¥Query parameters are only available when using the form in production mode. n8n won't populate field values from query parameters in testing mode.

使用查询参数时，请将任何包含特殊字符的字段名称或值标记为 percent-encode。此功能确保 n8n 使用给定字段的初始值。你可以使用 URL 编码/解码 等工具，通过百分比编码格式化查询参数。

¥When using query parameters, percent-encode any field names or values that use special characters. This ensures n8n uses the initial values for the given fields. You can use tools like URL Encode/Decode to format your query parameters using percent-encoding.

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

¥As an example, imagine you have a form with the following properties:

  • 生产环境 URL：https://my-account.n8n.cloud/form/my-form

¥Production URL: https://my-account.n8n.cloud/form/my-form

  • 字段：

¥Fields:

  • name：Jane Doe

  • email：jane.doe@example.com

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

¥With query parameters and percent-encoding, you could use the following URL to set initial field values to the data above:

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

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

¥Here, percent-encoding replaces the at-symbol (@) with the string %40 and the space character () with the string %20. This will set the initial value for these fields no matter which page of the form they appear on.

显示自定义 HTML#

¥Displaying custom HTML

你可以通过向表单添加自定义 HTML 字段来显示自定义 HTML。这提供了一个 HTML 框，你可以在其中插入任意 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.

你可以使用 HTML 字段来丰富表单页面，例如添加链接、图片、视频等内容。n8n 将按照正常的文档流程，将内容与其他表单字段一起渲染。

¥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.

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

¥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.

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

¥The HTML field doesn't support <script>, <style>, or <input> elements.

如果你使用的是 表单结束符 页面类型，则可以通过将“n8n 表单提交时”参数设置为“显示文本”来完全自定义发送给用户的最终页面（包括使用 <script>、<style> 和 <input> 元素）。

¥If you're using the Form Ending Page Type, you can fully customize the final page that you send users (including the use of <script>, <style>, and <input> elements) by selecting the On n8n Form Submission parameter to Show Text.

包含隐藏字段#

¥Including hidden fields

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

¥It's possible to include fields in a form without displaying them to users. This is useful when you want to pass extra data to the form that doesn't require interactive user input.

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

¥To add fields that won't show up on the form, use the Hidden Field form element. There, you can define the Field Name and optionally provide a default value by filling out the Field Value.

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

¥When serving the form, you can pass values for hidden fields using query parameters.

使用 JSON 定义表单#

¥Defining the form using JSON

使用“定义表单”>“使用 JSON”以 JSON 对象数组 定义表单字段。每个对象都使用以下键的组合来定义一个字段：

¥Use Define Form > Using JSON to define the fields of your form with a JSON array of objects. Each object defines a single field by using a combination of these keys:

  • fieldLabel：显示在已渲染表单的输入字段上方的标签。

¥fieldLabel: The label that appears above the input field on the rendered form.

  • fieldName：用于表单节点输出以及在表达式中引用该字段的字段名称。

¥fieldName: The field name that is used in the output of the Form node and to reference the field in expressions.

  • fieldType：选择 checkbox、date、dropdown、email、file、hiddenField、html、number、password、radio、text 或 textarea。

¥fieldType: Choose from checkbox, date, dropdown, email, file, hiddenField, html, number, password, radio, text, or textarea.

  • 使用 date 在表单中包含日期选择器。有关日期格式的更多信息，请参阅 使用 Luxon 处理日期和时间。

    ¥Use date to include a date picker in the form. Refer to Date and time with Luxon for more information on formatting dates.

  • 使用 dropdown 时，使用 fieldOptions 设置选项（参考以下示例）。默认情况下，下拉菜单为单选。要将其设置为多选题，请将 multiselect 设置为 true。或者，你也可以将 checkbox 或 radio 与 fieldOptions 一起使用。

    ¥When using dropdown, set the choices with fieldOptions (reference the example below). By default, the dropdown is single-choice. To make it multiple-choice, set multiselect to true. As an alternative, you can use checkbox or radio together with fieldOptions too.

  • 使用 file 时，将 multipleFiles 设置为 true 以允许用户选择多个文件。要定义允许的文件类型，请将 acceptFileTypes 设置为包含以逗号分隔的文件扩展名列表的字符串（请参考以下示例）。

    ¥When using file, set multipleFiles to true to allow users to select more than one file. To define the file types to allow, set acceptFileTypes to a string containing a comma-separated list of file extensions (reference the example below).

  • 使用 hiddenField 向表单添加隐藏字段。有关更多信息，请参阅 包含隐藏字段。

    ¥Use hiddenField to add a hidden field to your form. Refer to Including hidden fields for more information.

  • 使用 html 在表单上显示自定义 HTML。有关更多信息，请参阅 显示自定义 HTML。

    ¥Use html to display custom HTML on your form. Refer to Displaying custom HTML for more information.

  • placeholder：指定字段的占位符数据。你可以对除 dropdown、checkbox、radio、date 和 file 之外的所有 fieldType 节点使用此凭据。

¥placeholder: Specify placeholder data for the field. You can use this for every fieldType except dropdown, checkbox, radio, date, and file.

  • defaultValue：指定表单元素中将预填充或预选的值。你可以对除 password、html、hiddenField 和 file 之外的所有 fieldType 节点使用此凭据。

¥defaultValue: Specify a value that will be pre-filled or pre-selected in the form element. You can use this for every fieldType except password, html, hiddenField and file.

  • requiredField：要求用户在表单中填写此字段。

¥requiredField: Require users to complete this field on the form.

示例 JSON，展示了所需的一般格式和可用键：

¥An example JSON that shows the general format required and the keys available:

  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": "me@mail.com"
  },
  {
    "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 执行包含表单结束节点的 多个分支 调用也是如此。

¥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.

使用“表单提交时”功能时，请选择以下选项之一：

¥Choose between these options when using On n8n Form Submission:

  • 显示完成屏幕：向用户显示最终屏幕，以确认他们已提交表单。

¥Show Completion Screen: Shows users a final screen to confirm that they submitted the form.

  • 填写“完成标题”以设置表单上的 h1 标题。

    ¥Fill in Completion Title to set the h1 title on the form.

  • n8n 将完成消息显示为表单主标题 h1 下方的副标题。使用 \n 或 <br> 添加换行符。

    ¥n8n displays the Completion Message as a subtitle below the main h1 title on the form. Use \n or <br> to add a line break.

  • 选择“添加”选项，并在“完成页面标题”中填写内容，以设置浏览器标签页中的页面标题。

    ¥Select Add option and fill in Completion Page Title to set the page's title in the browser tab.

  • 重定向到 URL：表单填写完毕后，将用户重定向到指定的 URL。

¥Redirect to URL: Redirect the user to a specified URL when the form completes.

  • 在“URL”字段中填写用户填写表单后要重定向到的页面。

    ¥Fill in the URL field with the page you want to redirect to when users complete the form.

  • 显示文本：显示由任意纯文本和 HTML 定义的最终页面。

¥Show Text: Display a final page defined by arbitrary plain text and HTML.

  • 在“文本”字段中填写你希望显示的 HTML 或纯文本内容。

    ¥Fill in the Text field with the HTML or plain text content you wish to show.

  • 返回二进制文件：完成后返回一个二进制文件。

¥Return Binary File: Return a binary file upon completion.

  • 填写“完成标题”以设置表单上的 h1 标题。

    ¥Fill in Completion Title to set the h1 title on the form.

  • n8n 将完成消息显示为表单主标题 h1 下方的副标题。使用 \n 或 <br> 添加换行符。

    ¥n8n displays the Completion Message as a subtitle below the main h1 title on the form. Use \n or <br> to add a line break.

  • 提供包含要返回给用户的二进制文件的输入数据字段名称。

    ¥Provide the Input Data Field Name containing the binary file to return to the user.

带分支的表单#

¥Forms with branches

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

¥The n8n Form node executes and displays its associated form page whenever it receives data from a previous node. When building forms with n8n, to avoid confusion, it's important to understand how forms behave when branching occurs.

具有以下特性的工作流互斥分支#

¥Workflows with mutually exclusive branches

包含互斥分支的表单工作流可以正常工作。n8n 将根据你提交的数据和你设定的条件执行单个分支。代码执行时，n8n 将显示分支中的每个页面，最终显示一个 n8n 表单节点，其页面类型为“表单结束”。

¥Form workflows containing mutually exclusive branches work as expected. n8n will execute a single branch according to the submitted data and conditions you outline. As it executes, n8n will display each page in the branch, ending with an n8n Form node with the Form Ending page type.

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

¥This workflow demonstrates mutually exclusive branching. Each selection can only execute a single branch.

Workflow preview placeholder.

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

¥Workflows that may execute multiple branches

同时向多个分支发送数据的表单工作流需要更加谨慎。当多个分支在执行期间接收到数据时（例如，来自 switch 节点），n8n 会执行每个接收到数据的分支 sequentially。当一个分支执行完毕后，程序将跳转到下一个包含数据的分支。

¥Form workflows that send data to multiple branches at the same time require more care. When multiple branches receive data during an execution (for example, from a switch node), n8n executes each branch that receives data sequentially. Upon reaching the end of one branch, the execution will move to the next branch with data.

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

¥n8n only executes a single Form Ending n8n Form node for each execution. When multiple branches of a form workflow receive data, n8n ignores all Form Ending nodes except for the one associated with the final branch.

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

¥This workflow may execute more than one branch during an execution. Here, n8n executes all valid branches sequentially. This impacts which n8n Form nodes n8n executes (in particular, which Form Ending node displays):

Workflow preview placeholder.

节点选项#

¥Node options

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

¥Select Add Option to view more configuration options:

  • 表单标题：表单的标题。n8n 将表单标题显示为网页标题和表单主标题 h1。

¥Form Title: The title for your form. n8n displays the Form Title as the webpage title and main h1 title on the form.

  • 表单描述：表单的描述。n8n 将表单描述显示为表单主标题 h1 下方的副标题。此字段支持 HTML。使用 \n 或 <br> 添加换行符。“表单描述”还会填充页面的“HTML 元描述”声明。

¥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 <br> to add a line break. The Form Description also populates the HTML meta description for the page.

  • 按钮标签：表单提交按钮的标签。n8n 将按钮标签显示为提交按钮的名称。

¥Button Label: The label to use for your form's submit button. n8n displays the Button Label as the name of the submit button.

  • 自定义表单样式：使用 CSS 覆盖公共表单界面的默认样式。该字段会预先填充默认样式，因此你可以仅更改所需的内容。

¥Custom Form Styling: Override the default styling of the public form interface with CSS. The field pre-populates with the default styling so you can change only what you need to.

  • 完成页面标题：表单最终完成页面的标题。

¥Completion Page Title: The title for the final completion page of the form.

运行节点#

¥Running the node

构建和测试工作流#

¥Build and test workflows

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

¥While building or testing a workflow, use the Test URL in the n8n Form Trigger node. Using a test URL ensures that you can view the incoming data in the editor UI, which is useful for debugging.

测试有两种方法：

¥There are two ways to test:

  • 选择“执行步骤”。n8n 打开表单。当你提交表单时，n8n 会运行该节点及其之前的任何节点，但不会运行工作流的其余部分。

¥Select Execute Step. n8n opens the form. When you submit the form, n8n runs the node and any previous nodes, but not the rest of the workflow.

  • 选择“执行工作流”。n8n 打开表单。当你提交表单时，n8n 会运行整个工作流。

¥Select Execute Workflow. n8n opens the form. When you submit the form, n8n runs the workflow.

生产工作流#

¥Production workflows

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

¥When your workflow is ready, switch to using the n8n Form Trigger's Production URL by opening the trigger node and selecting the Production URL in the From URLS selector. You can then activate your workflow, and n8n runs it automatically when a user submits the form.

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

¥When working with a production URL, ensure that you have saved and activated the workflow. Data flowing through the Form trigger isn't visible in the editor UI with the production URL.

模板和示例#

¥Templates and examples

Template widget placeholder.