Formating solution for the "On form submission" node

Questions
1

Before to create a feature request I’d like to know how you guys are handling this.
Ideally the “on form submission” node would propose it but maybe it should be done using Regex on the output…

Please
I’d be great to have:

  • option “phone number” like “email” enforcing the format of the country

image

  • option “address” with different boxes like this

image
image1043×615 13.4 KB

  • Also for example if I want to collect the contact info of friends. If this a couple, how do you manage to have like an option to repeat just:

    • full name of the spouse
    • email
    • phone number
    • (and not address)

    and also to to have an option for as many kids as they have with:

    • name
    • birthday

Maybe at this point it’s better to use a full on form service but I like the privacy feature of this node! (no intermediary)
Thanks

2

It looks like your topic is missing some important information. Could you provide the following if applicable.

  • n8n version:
  • Database (default: SQLite):
  • n8n EXECUTIONS_PROCESS setting (default: own, main):
  • Running n8n via (Docker, npm, n8n cloud, desktop app):
  • Operating system:
3

@headset907

This is probably not recommended but regarding the first request for enhanced input fields, it is possible to modify the form trigger UI on self-hosted n8n.

Note: The following requires the n8n docker setup.

1. Locate the template file

You’ll need to be root user to modify this file which means you can’t edit from within the n8n editor and you’ll likely have to restart n8n for changes to show.

/usr/local/lib/node_modules/n8n/templates/form-trigger.handlebars

2. Add the `intl-tel-input Library

In form-trigger.handlebars, add the following lines.

<!-- add to <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css">

<!-- add to <body> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.min.js"></script>
<script>
  const inputs = document.querySelectorAll("input[type='tel']");
  Array.from(inputs).forEach(function(input) {
    window.intlTelInput(input, {
      loadUtils: () => import("https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js"),
    });
  });
</script>

3. When building form, set field type set to “tel”

To set a form field type to “tel”, you won’t find this option in the dropdown so instead switch this from “fixed” to “expression” and type it in manually.

When you run the form, any fields with type of “tel” should be transformed into the widget version.

image
image725×366 10.8 KB

image

4. Figure out Styling and Validation

So downside is there’s no client side validation, you’ll have to add that in the existing script in the same template.

Would definitely be interesting if n8n allows for editing these templates in the future.

2 Likes
4

Wow! Amazing, @Jim_Le! I’ll definitely look into this. Thank you!
Congratulations on the award, by the way!
I’m slowly working my way up to better understand how n8n works, and looking into your templates is at the top of my list!
Thanks, man!

1 Like