Overview
This node implements a customizable HTML form trigger for n8n workflows. It allows users to create and serve fully custom forms with various input elements such as text fields, dropdowns, file uploads, and more. When the form is submitted, the node captures the submission data and triggers the workflow.
Common scenarios include:
- Collecting user feedback or contact information via a web form.
- Uploading files through a custom interface integrated into an automation.
- Creating surveys or questionnaires with multiple choice and text inputs.
- Embedding interactive forms in websites or applications that trigger automated workflows upon submission.
Practical example:
A marketing team can use this node to build a "Contact Us" form with fields for name, email, message, and file attachments. When a visitor submits the form, the workflow can automatically send a confirmation email, store the data in a CRM, and notify the sales team.
Properties
| Name | Meaning |
|---|---|
| Html Template | Custom HTML code defining the entire form layout and styling. Supports placeholders for dynamic content like form title and description. |
| Form Name | The internal name of the form (used for identification). |
| Form Path | URL path segment where the form will be accessible (e.g., "webhook"). Required to define the form's endpoint. |
| Form Title | Title displayed at the top of the form page. |
| Form Description | Text or HTML shown below the form title to guide users on filling out the form. |
| Form Elements | Collection of form fields to include. Each element has: - Field Name (label shown above input) - Element Type (text, email, dropdown, file, hidden, etc.) - Placeholder text - Options for dropdowns - Whether field is required - Other type-specific settings like multiple selection for dropdowns or accepted file types for file inputs. |
| Respond When | Defines when the node responds to the form submission: - Immediately when form is received - After the entire workflow finishes |
Output
The node outputs JSON data representing the submitted form values keyed by their field names. For example, each form input's value is available in the output JSON under its configured name.
If the form includes file inputs, the node handles uploaded files accordingly, making them available as binary data attached to the output items.
The output structure typically looks like:
{
"fieldName1": "value1",
"fieldName2": "value2",
...
}
For multi-select dropdowns, selected options are provided as JSON-stringified arrays.
Dependencies
- No external services or API keys are required by the node itself.
- The node relies on n8n's webhook infrastructure to serve the form and receive submissions.
- The HTML template uses embedded JavaScript templating syntax for dynamic content insertion.
- The form submission uses standard HTTP POST requests handled by the node's webhook.
Troubleshooting
- Form not loading / "Problem loading form" message: This usually happens if the workflow is deactivated or the form path is incorrect. Ensure the workflow is active and the form path matches the URL used.
- Required fields not validating: The client-side validation script enforces required fields. If fields are missing or incorrectly named, validation may fail silently. Check that all required fields have proper names and are included in the form elements.
- File uploads not working: Verify that the file input field allows multiple files if needed and that accepted file types are correctly specified.
- Redirects after submission not working: If using redirect URLs, ensure they are valid and properly configured in the form properties.
- Error messages during submission: Network errors or server issues may cause submission failures. Check browser console logs and network requests for details.
Links and References
- n8n Webhook Documentation
- HTML Forms MDN Reference
- Handlebars Templating Syntax (used in the HTML template)
This summary is based solely on static analysis of the provided source and property definitions.