I'm trying to click links (not radio buttons or other native form node elements) to choose a path to a form can anyone help?

Questions
1

Describe the problem/error/question

I’m trying to use N8N to mock up a web site user interface. Intuitively it feels like this should be easy with N8N and I’ve been able to achieve something close to what I’m looking for using a form trigger node, an if node, and two form nodes after that (one for each branch of the if node). I can do that using one of the native form node elements but when I try to have buttons or links - like you would see on a navigation bar on a website - I can’t figure out how to do that. I’m here asking because I’m trying to cut down the learning curve to achieving a simple example so I can get on with mocking up different configuration of systems to use for the site I’m planning. I thought N8N would make that super easy so that I could iterate fast on different system designs.

Right now all I want to do is simple two choices based on links as element to interact with so if you click one you go to one form and if you click the other you go the other form. I’ve tried using a custom html element in a trigger node to get buttons instead of what’s otherwise natively available in that node but have failed miserably and for a long time.

Here’s the last code I tried. The node executes and the buttons are displayed but they aren’t clickable and there is no corresponding output that could be useful in a following node (eg: an if or switch node). Ultimately, I’ll eventually want to mock up a menu sidebar that uses links to navigate. I understand programming concepts and can write some simple code and html but its been a long time and I didn’t want to get bogged down before being able to do this. Can anyone show me understand without using jargon how to do this?

HTML I Used:

Choose which form you want:

Button A Button B

Information on your n8n setup

  • n8n version: 2.0.2 (locally installed)
  • Database (default: SQLite): Default
  • n8n EXECUTIONS_PROCESS setting (default: own, main): Don’t know
  • Running n8n via (Docker, npm, n8n cloud, desktop app): Docker
  • Operating system: Ubuntu 24.04
2

Hey @blahboybaz !

I am afraid that you cannot use “custom” elements in the way you are thinking.

Form node is very strict with how it works, dropdown, checkboxes and custom css is allowed.

But to achieve your desired flow, you can simply use questions and let user choose A or B etc… And with an IF node that routes to next form.

Here is a very good example in the docs, you can copy the workflow from there:

Cheers!

1 Like
3

@Parintele_Damaskin Thanks!

4

Uhh.. curious question though. I thought I read somewhere that it is possible to create custom nodes if you wanted to? I mean.. is there a possibility I could create a node that does what I want? Assuming it could be done easily enough?

1 Like
5

Yea, definitely you can build your own custom node… but it need some JavaScript and Typescript knowledge… actually is a npm package, so “easily enough” it depends on the complexity and skills.

Here you can find as well additional info about this :

Cheers!

1 Like
6

@Parintele_Damaskin Right on

1 Like
7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.