n8n-nodes-formcraft

An Advanced Form node for n8n — build multi-step forms with conditional logic directly from a visual editor embedded in your workflow, no external service required.

---

Features

• Visual builder — drag-and-drop form editor served at your webhook URL (/builder)
• Multi-step forms — split your form into multiple steps with a progress indicator
• Conditional logic — show/hide steps and individual fields based on values from other fields (AND/OR)
• 22 field types — text, choice, dates, file upload, rating, slider, custom PrimeVue components…
• Label/value separation — display one label, submit a different value for any choice field
• File uploads — files are forwarded as binary data in the n8n workflow
• Anti-spam honeypot — invisible field to detect bots
• Theme customization — primary color, background, font, font size
• Basic Auth — optional credential protection on the public form
• Builder access control — builder restricted to authenticated n8n users (same-origin session)

---

Installation

From the n8n UI (recommended)

1. Go to Settings → Community nodes
2. Search for n8n-nodes-formcraft
3. Install and restart n8n

Manually (self-hosted)

cd ~/.n8n/nodes   # or your custom nodes directory
npm install n8n-nodes-formcraft

---

Quick start

1. Add an Advanced Form node to your workflow
2. Activate the workflow
3. Open the production webhook URL shown in n8n (e.g. https://your-n8n.com/webhook/abc123)
4. To design your form, append /builder to that URL: https://your-n8n.com/webhook/abc123/builder
5. Build your form visually, then click Save — the schema is stored and immediately served to users

Note: The builder is only available on the production webhook (active workflow) and requires you to be signed in to n8n.

---

Builder

Opening the builder

GET /webhook/{webhookId}/builder

The builder is served as a single-page app. It requires an active n8n session (same browser that is logged in to your n8n instance). Unauthenticated requests show an "Authentication required" screen.

Saving the schema

Click Save in the builder toolbar. The schema is sent to POST /webhook/{webhookId}/builder and stored at:

~/.n8n/formcraft/{nodeId}.json

In test mode the builder is not available. Activate the workflow first.

n8n API key (optional — for future integrations)

Some builder features use the n8n REST API. Create a key in n8n → Settings → API and save it to:

~/.n8n/formcraft/apikey

---

Field types

Text Input

Type	Label	Description
text	Short Text	Single-line text
textarea	Long Text	Multi-line textarea
email	Email	With format validation
password	Password	Masked input, optional strength indicator
number	Number	Numeric input with min/max
url	URL / Link	Validates http:// / https:// prefix
inputmask	Input Mask	Formatted input (phone, IBAN, etc.)

Choice

Type	Label	Description
select	Dropdown	Single selection dropdown
radio	Single Choice	Radio button group
checkbox	Checkboxes	Multiple selection checkboxes
multiselect	Multi Select	Searchable multi-select dropdown
selectbutton	Choice Buttons	Inline button group, single or multiple
toggleswitch	Toggle	On/Off boolean switch

All choice fields support label/value separation: display one text to the user, submit a different value to your workflow.

Special

Type	Label	Description
date	Date	Date picker, returns YYYY-MM-DD
daterange	Date Range	Start + end date picker, returns ["YYYY-MM-DD", "YYYY-MM-DD"]
fileupload	File Upload	File picker, forwarded as binary data in n8n
rating	Rating	Star rating (1–10 stars)
slider	Slider	Numeric range slider

Layout

Type	Label	Description
html	HTML Block	Static HTML rendered in the form (not submitted)
primevue	PrimeVue Block	Custom Vue template with full PrimeVue component access
divider	Divider	Visual separator with optional label
honeypot	Anti-spam	Invisible field — non-empty value indicates a bot

---

PrimeVue Block

The PrimeVue Block compiles and renders arbitrary Vue templates at runtime with access to all PrimeVue components.

Use v-model="value" to bind the block's value to the form data:

<Knob v-model="value" valueTemplate="{value}%" />

<InputText v-model="value" placeholder="Custom field..." class="w-full" />

The value is submitted under the component's variable name (JSON key) like any other field.

Not supported inside PrimeVue Block: Editor component (requires additional setup).

---

Conditional logic

Step and field visibility can be controlled by conditions evaluated against the current form data.

Operators: equals, not equals, contains, not contains, is empty, is not empty, greater than, less than

Multiple conditions can be combined with AND or OR.

---

Output data

Regular fields

Fields are submitted as a JSON object:

{
  "first_name": "Jane",
  "email": "jane@example.com",
  "gender": "female",
  "appointment": "2026-06-15",
  "availability": ["2026-06-01", "2026-06-30"],
  "score": 4
}

File uploads

Files are submitted as a base64 data URL and automatically converted to binary data in n8n:

{
  "resume": {
    "name": "cv.pdf",
    "type": "application/pdf",
    "size": 123456
  }
}

The binary data is accessible as $binary.resume in subsequent nodes.

Anti-spam honeypot

The honeypot field is included in the output. Add an IF node after the form to filter spam:

{{ $json.honeypot_field_name }} is empty → legitimate
{{ $json.honeypot_field_name }} is not empty → spam

---

Node parameters

Parameter	Description
Authentication	None or Basic Auth — protects the public form URL
Form Title	Sets the browser tab title
Form Schema	JSON schema — managed via the visual builder
Success Message	Message shown after a successful submission

---

License

MIT — © Yohann Joyeux