n8n Form node#
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.
Setting up the node#
Set default selections with query parameters#
You can set the initial values for fields by using query parameters with the initial URL provided by the n8n Form Trigger. Every page in the form receives the same query parameters sent to the n8n Form Trigger URL.
Only for production
Query parameters are only available when using the form in production mode. n8n won't populate field values from query parameters in testing mode.
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:
- Production URL:
https://my-account.n8n.cloud/form/my-form
- Fields:
name
:Jane Doe
email
:jane.doe@example.com
With query parameters and percent-encoding, you could use the following URL to set initial field values to the data above:
1 |
|
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.
Defining the form using 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
: The label that appears above the input field.fieldType
: Choose fromdate
,dropdown
,email
,file
,number
,password
,text
, ortextarea
.- Use
date
to include a date picker in the form. Refer to Date and time with Luxon for more information on formatting dates. - When using
dropdown
, set the choices withfieldOptions
(reference the example below). By default, the dropdown is single-choice. To make it multiple-choice, setmultiselect
totrue
. - When using
file
, setmultipleFiles
totrue
to allow users to select more than one file. To define the file types to allow, setacceptFileTypes
to a string containing a comma-separated list of file extensions (reference the example below).
- Use
placeholder
: Specify placeholder data for the field. You can use this for everyfieldType
exceptdropdown
,date
, andfile
.requiredField
: Require users to complete this field on the form.
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 |
|
Form Ending#
Use the Form Ending Page Type to end a form and either show a completion page or redirect the user to a URL. Only one Form Ending page is displayed 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.
- Fill in Completion Title to set the
h1
title on the form. - 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.
- Fill in Completion Title to set the
When using Redirect to URL, fill in the URL field with the page you want to redirect to when users complete the form.
Forms with branches#
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#
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.
Workflows that may execute multiple branches#
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 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.
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):
Node options#
Select Add Option to view more configuration options:
- Form Title: The title for your form. n8n displays the Form Title as the webpage title and main
h1
title on the form. - Form Description: The description for your form. n8n displays the Form Description as a subtitle below the main
h1
title on the form. Use\n
or<br>
to add a line break. - Button Label: The label to use for your form's submit button. n8n displays the Button Label as the name of the submit button.
Running the node#
Build and test workflows#
While building or testing a workflow, use the Test URL in the n8n Form Trigger. 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:
- Select Test 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.
- Select Test Workflow. n8n opens the form. When you submit the form, n8n runs the workflow.
Production workflows#
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.
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.