@loopsaaage/n8n-nodes-form-trigger
v0.3.9
Published
Form builder and trigger for n8n workflows
Downloads
1,152
Maintainers
loopsaaageReadme
n8n-nodes-form-trigger
This is an n8n community node. It lets you create a form to start your n8n workflows.
n8n is a fair-code licensed workflow automation platform.
Installation
Compatibility
Usage
Resources
Version history
Installation
Follow the installation guide in the n8n community nodes documentation.
Compatibility
Tested against 0.191.1 and 0.192.2
Usage
Form Trigger
Add the Form Trigger node to your workflow and either use the form builder or add your own custom html for your form. Once running use the Webhook GET URL.
When using custom HTML for your form make sure you include the name field for your form items unless you also change the javascript for the submission.
Rich Form Trigger
The Rich Form Trigger node provides enhanced form capabilities with support for:
- Text Input: Supports drag & drop text files, paste, and keyboard input
- Image Input: Supports hover-to-paste images, click to select, and drag & drop images
- Image Preview: Automatic preview of selected images
- File Validation: Configurable maximum file size and accepted image types
Add the Rich Form Trigger node to your workflow, configure the text and image input options, and use the Webhook GET URL to access the form.
Resources
Form HTML
When coming up with your CSS the below HTML is the default structure used, In a future release using HTML from a file may be supported.
<html>
<head>
<title>{REPLACED WITH PAGE TITLE}</title>
<link rel="stylesheet" href="{REPLACED WITH BOOTSTRAP LINK}" crossorigin="anonymous">
<link rel="stylesheet" href="{REPLACED WITH CSS LINK}" crossorigin="anonymous">
<script src="{REPLACED WITH JQUERY LINK}" type="text/javascript"></script>
<script type="text/javascript">
${REPLACED WITH SUBMISSION JS}
</script>
</head>
<body>
<div class="container">
<div class="page">
<div id="status" style="display: none" class="alert alert-danger">
<p id="status-text" class="status-text">{REPLACED WITH MESSAGE FROM JS}</p>
</div>
<div class="form">
<h1>{REPLACED WITH PAGE TITLE}</h1>
<p>{REPLACED WITH FORM DESCRIPTION}</p>
<form action='#' method='POST' name='{REPLACED WITH FORM NAME}' id='{REPLCED WITH FORM ID}'>
<div class="item">
{REPLACED WITH CUSTOM HTML OR BUILDER}
</div>
<div class="btn-block">
<button type="submit">{REPLACED WITH SUBMIT LABEL}</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>Version history
0.3.9 - Fixed delete button width issue (now properly sized as small circle) 0.3.8 - Updated icon to use 64x64 size for better visibility 0.3.7 - Updated icon to use 64x64 size for better visibility 0.3.6 - Improved delete button UI (small button in top-right corner), integrated custom logo 0.3.5 - Added button disable and refresh prompt after form submission 0.3.4 - Fixed JSON parsing error on form submission 0.3.3 - Fixed element ID mismatch and improved field initialization 0.3.2 - Fixed click, drag & drop, and paste functionality for image fields 0.3.1 - Images now sent as base64 format, simplified image UI with remove functionality 0.3.0 - Added support for multiple configurable text and image fields 0.2.0 - Added Rich Form Trigger node with text and image input support 0.1.0 - Initial Release