Setting up a Custom n8n Form

Requires Pro Plus or higher

  1. Click Add Element

  2. Click Form to create a new Form element.

  3. Set Type to Custom, then Send to n8n.

  4. Set Webhook URL to the URL associated with the n8n workflow's Webhook Node. If you're setting up a new webhook or reconfiguring an existing one, click the Send Test Event button when instructed by n8n.

    If the webhook is configured to use authentication, be sure to configure that in the next step before attempting to send a test event (otherwise it'll fail).
  5. (Optional) Configure the webhook's Authentication method if one is in use.

  6. Click Fields

  7. Click the first field (labeled "Untitled") to expand it.

  8. Assign the field a short, descriptive Label. This label will appear either within the field itself or directly above it (depending on how you've styled your form).

  9. Set the field's Type. The following types are currently supported:

    TextAccepts a short, single line of text.
    EmailAccepts a valid email address (eg. user@domain.ext).
    Text AreaAccepts multiple lines of text.
    SelectAccepts a single option chosen from a dropdown menu.
    CheckboxAccepts either a "checked" or "unchecked" state.
    PhoneAccepts a valid phone number.
    NumberAccepts a valid integer, decimal or currency value.
    DateAccepts a valid date (eg. 2016-03-07). When clicked, opens the browser's native date picker dialog.
    FileAccepts a single file upload (up to 16MB).
    HiddenAccepts a single line of predefined text.
  10. (Optional) Configure any options specific to the field's type.

  11. (Optional) Check Optional to make the field optional.

  12. (Optional) Assign the field an ID. If omitted, an ID will be automatically generated based on the field's label.

  13. (Optional) Assign the field a Default Value.

  14. Click Add to add additional fields, repeating steps 7 through 12 for each.

  15. With the form's fields now in place, click back to Form

  16. (Optional) Choose an On Success behavior.

  17. (Optional) Choose an On Failure behavior.

  18. (Optional) Click the Button tab and change the form's submit button Label.

  19. (Optional) If available, check Collect UTM parameters to automatically include all detected UTM parameters as additional fields. The following fields will be populated if detected: utm_source, utm_medium, utm_campaign, utm_term, and utm_content.

  20. You're done! The site should now have a fully functional custom n8n form.