Welcome! Anytime you create an n8n automation some input data must be used to start the workflow thereafter the input data is transformed into something else.
One of the most common means available to input data are HTML forms. Here I will breakdown the steps necessary to add HTML forms to your n8n workflow.
If you are an n8n beginner then I think this post will be quite useful so let's get started!
Triggers and actions
Inside n8n there are two types of nodes: triggers and actions. Triggers are used at the beginning of the workflow, these are the ones that kick start everything while actions are nodes other than the trigger.
HTML form trigger node
In this case I want to implement the HTML form trigger node to display an HTML form to the user. Once the user submits the data the workflow carries out the remaining steps.
Let's create an HTML form in n8n
In order to show you how this works let's create an HTML form with the aid of the trigger node. Once the HTML form trigger node is selected then the settings window opens automatically.
Follow the next steps to create the HTML form:
Fill in the Title and Description text fields. These are essential so users can grasp the intention of the HTML form.
In this case let's build an HTML form with three different text fields : Name, age and gender. Head over to the section called Form Elements and introduce a label and choose an element type for each form element.
Press the button Execute step and a pop-up window opens which displays a testing version of the HTML form.
Fill in the fields inside the test HTML form and press the button submit. A notification displays.
Close the test pop-up window and check the response generated by the n8n HTML form node. A JSON object was created which contains the input data.
Top comments (0)