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

---|---
此处，百分比编码将 at 符号（`@`）替换为字符串 `%40`，将空格字符替换为 `%20`。无论这些字段出现在表单的哪个页面，这都会为它们设置初始值。

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

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

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

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

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

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

要添加不会在表单上显示的字段，请使用 **隐藏字段** 表单元素。在此处，您可以定义 **字段名称**，并可以选择性地填写 **字段值** 来提供一个默认值。

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

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

*   `fieldLabel`: 显示在输入字段上方的标签。
*   `fieldType`: 从 `checkbox`（复选框）、`date`（日期）、`dropdown`（下拉菜单）、`email`（电子邮件）、`file`（文件）、`hiddenField`（隐藏字段）、`html`（HTML）、`number`（数字）、`password`（密码）、`radio`（单选按钮）、`text`（文本）或 `textarea`（文本区域）中选择。
    *   使用 `date` 可在表单中包含日期选择器。有关格式化日期的更多信息，请参阅 使用 Luxon 处理日期和时间。
    *   使用 `dropdown` 时，使用 `fieldOptions` 设置选项（参考下面的示例）。默认情况下，下拉菜单是单选。要使其为多选，请将 `multiselect` 设置为 `true`。作为替代方案，您也可以将 `checkbox` 或 `radio` 与 `fieldOptions` 一起使用。
    *   使用 `file` 时，将 `multipleFiles` 设置为 `true` 以允许用户选择多个文件。要定义允许的文件类型，请将 `acceptFileTypes` 设置为一个包含逗号分隔的文件扩展名列表的字符串（参考下面的示例）。
    *   使用 `hiddenField` 可向表单添加隐藏字段。有关更多信息，请参阅 包含隐藏字段。
    *   使用 `html` 可在表单上显示自定义 HTML。有关更多信息，请参阅 显示自定义 HTML。
*   `placeholder`: 指定字段的占位符数据。除了 `dropdown`、`date` 和 `file` 之外，您可以将此用于所有 `fieldType`。
*   `requiredField`: 要求用户必须在表单上填写此字段。

以下是一个展示所需通用格式及可用字段的 JSON 示例：

| ```
// 在任何字段上使用 "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"
},
{
"fieldType":"html",
"elementName":"content",// 可选字段。可用于在输出中包含 HTML
"html":"<div>自定义元素</div>"
},
{
"fieldLabel":"复选框",
"fieldType":"checkbox",
"fieldOptions":{
"values":[
{
"option":"选项 1"
},
{
"option":"选项 2"
}
]
}
},
{
"fieldLabel":"单选按钮",
"fieldType":"radio",
"fieldOptions":{
"values":[
{
"option":"选项 1"
},
{
"option":"选项 2"
}
]
}
},
{
"fieldLabel":"隐藏标签",
"fieldType":"hiddenField",
"fieldValue":"额外表单数据"
}
]

### 表单结束页面#

使用**表单结束页面**类型可终止表单流程，并展示完成页面、跳转至指定URL，或显示自定义HTML/文本内容。即使n8n执行包含表单结束节点的多个分支，每次执行也仅会显示一个表单结束页面。

在使用**n8n表单提交**时，可选择以下操作：

* **显示完成界面**：向用户展示最终确认提交的界面
  * 填写**完成标题**以设置表单的主标题（`h1`）
  * n8n会将**完成消息**作为副标题显示在主标题下方，使用`\n`或`<br>`可添加换行符
  * 选择**添加选项**并填写**完成页面标题**以设置浏览器标签页的标题

* **跳转至URL**：表单完成后将用户重定向至指定网址
  * 在**URL**字段中填写用户完成表单后要跳转的页面地址

* **显示文本**：通过任意纯文本和HTML定义最终显示页面
  * 在**文本**字段中填入需要展示的HTML或纯文本内容

* **返回二进制文件**：完成后返回二进制文件
  * 填写**完成标题**以设置表单的主标题（`h1`）
  * n8n会将**完成消息**作为副标题显示在主标题下方，使用`\n`或`<br>`可添加换行符
  * 提供包含要返回给用户的二进制文件的**输入数据字段名称**

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

#### 互斥分支工作流#
包含互斥分支的表单工作流会按预期工作。n8n 将根据提交的数据和您设定的条件执行单个分支。在执行过程中，n8n 将显示该分支中的每个页面，最终以**表单结束**页面类型的 n8n 表单节点作为结束。
此工作流演示了互斥分支。每个选择只能执行单个分支。
查看工作流文件

#### 可能执行多分支的工作流#
同时向多个分支发送数据的表单工作流需要更加注意。当多个分支在执行期间接收到数据时（例如来自条件分支节点），n8n 会按顺序执行每个接收到数据的分支。当一个分支执行完毕后，执行流程将转移到下一个包含数据的分支。

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

此工作流在一次执行过程中可能会执行多个分支。在此情况下，n8n 会按顺序执行所有有效分支。这将影响 n8n 实际执行的表单节点（特别是显示的**表单结束**节点）：
查看工作流文件

### 节点选项#
选择**添加选项**以查看更多配置选项：
  * **表单标题**：表单的标题。n8n 会将**表单标题**显示为网页标题和表单主 `h1` 标题。
  * **表单描述**：表单的描述。n8n 会将**表单描述**显示为表单主 `h1` 标题下方的副标题。此字段支持 HTML，可使用 `\n` 或 `<br>` 添加换行。表单描述还会填充页面的 HTML meta description。
  * **按钮标签**：表单提交按钮的标签。n8n 会将**按钮标签**显示为提交按钮的名称。
  * **自定义表单样式**：使用 CSS 覆盖公共表单界面的默认样式。该字段预填充了默认样式，方便您仅修改需要调整的部分。
  * **完成页面标题**：表单最终完成页面的标题。

## 运行节点#
### 构建和测试工作流#
在构建或测试工作流时，请使用 n8n 表单触发器节点 中的 **测试 URL**。使用测试 URL 可确保您能在编辑器界面中查看传入数据，这对调试很有帮助。
有两种测试方式：
  * 选择 **执行步骤**。n8n 将打开表单。当您提交表单时，n8n 会运行该节点及之前的节点，但不会运行工作流的其余部分。
  * 选择 **执行工作流**。n8n 将打开表单。当您提交表单时，n8n 会运行整个工作流。

### 生产环境工作流#
当工作流准备就绪后，请通过打开触发器节点并在 **来源 URL** 选择器中选择 **生产 URL**，切换使用 n8n 表单触发器的 **生产 URL**。然后您可以激活工作流，当用户提交表单时，n8n 会自动运行该工作流。
使用生产 URL 时，请确保已保存并激活工作流。通过生产 URL 流入表单触发器的数据不会在编辑器界面中显示。

## 模板和示例#
**✨🤖 使用 AI 自动化多平台社交媒体内容创建**
作者：Joseph LePage
查看模板详情
**AI 驱动的社交媒体内容生成器和发布器**
作者：Amjid Ali
查看模板详情
**Flux AI 图像生成器**
作者：Max Tkacz
查看模板详情
浏览 n8n 表单集成模板，或 搜索所有模板