Creating and processing webforms with n8n - Jason McFeetors

so um if you've been kind of seeing some of the stuff that i've been doing over the last little while i've been doing a lot of work with uh web forms and i thought i'd share a little bit about some of the things i've been playing around with recently and give you a bit of a sneak peek into how i'm starting to change how we deal with web forms so initially this started out as a bit of a challenge for myself i wanted to see if i could get any then to do some stuff that we hadn't really planned on but because we've got this awesome uh web hook node we can do some very cool things with it and so essentially what we've done is we've taken the web hook load and turned it into a web server and by doing that i can go in and create a bunch of different forms and get them to start to interact with each other so what i've got up on the screen here right now is kind of a different way that i'm starting to play around with web uh web forms and um you know there's typically uh what way i've done in the past is all i've had is a form uh sorry a web hook attached to a set node and that was it i've started to break things out a little bit here and do a couple of different things so the first thing is i'm going to give you guys a little bit of a pro tip i've created this set form that will allow me to quickly and easily jump between the production or the test environment that i'm working in so by simply enabling or disabling this test set form it'll jump to right now it's set to deal with the product of the test side if i disable it it'll automatically jump and use the production side so no having to jump between different screens don't have um urls it just does it from that quick click which makes it really nice to work with the other thing i've done is i've taken and i've broken out my form one of the challenges that i've had working with some of my clients is building out this whole form in one set node and it gets to be a bit cumbersome and people have some challenges around um you know how do they go about and you know find what piece to work on you know we've got the uh designers who are like hey i want to play around with the css but i don't know what all this other stuff is i don't want to break it you know and then we've got the developers who want to work on the scripts so i've started creating this template where i break out the form into these multiple nodes and so if you want to mess around with the css great here it is and you can tweak that and that's all they have to play around with um same thing with the web form itself uh you want to go in here and you'll notice that this is a little bit more jumbled but i've got this piece here so it's pulling information in that allows it to jump and so this is where the test comes in so it'll look for the target and point it either to production or test automatically without having to go in and modify it you we've run into some problems in the past where in fact i just had this happen last week where i went and did a bunch of stuff put it into production and it failed when they showed it to the client only because i forgot to set it uh to production for the web form so this just handles it all for you it makes it way easier um and then again same thing with scripts if you want to do some javascripts uh build them into the form you plunk them in there and then the key that puts it all together is the html form which doesn't look like a whole heck of a lot when i just look at it here but this all it does is builds it together so anybody that's worked with html um frameworks or that kind of stuff will notice this is a very similar pattern where you have these little chunks and pieces you put them together and then in the end you have this one piece that throws it all into one that makes it all work uh so what we've one of the things i'm working on then this is kind of the predecessor to that is the is i'm building a uh nan forms tool kit which will basically allow you to it'll have a whole bunch of these set nodes built out for you and you can drag and drop them into different spots to build your form dynamically and then it'll just spit out whatever form you want ready to go um so what i've been doing in the past is i've been using this tool formbuilder. online you can download the tool actually you keep your own copy and i use this to you know modify my forms make different things

and then if you hit save and copy html it'll just copy the html straight into your uh into your clipboard where you paste it into any then so i i'm working on building kind of this out but instead of using this tool you'll actually just be able to come into here drag and drop these different pieces and away you go and uh and just to kind of show a little bit here one thing to note when you're doing these because you have two web hooks when you are doing stuff in your test environment you have to re-execute every single time that you are accessing the web of the form so if you for example if we hit execute here now and i'm going to refresh my demo then great it spits out the form no problem but you'll notice here that this is all executed and this is stock so if i go now and i submit my form because it's set to demo of course i've got these set i've got to fill them all out if i hit submit now it'll fail because we end up having a um it's not registered but if i go back and i execute this now and i hit submit then it works fine so the interesting thing is that i go back here and i disabled this and i reset my form so my form is not working again i'll have to do a reset uh oops i'm trying to do this the right way there we go and i submit my information because i've changed the change it to point to my service okay so that you notice it didn't go into here it didn't have to hit execute twice because it actually hit the active that one just simply because it turned this on or off so um i think i'm going to stop it there i could you know i've got 10 minutes i could go on for 10 hours but i think but we'll leave it there i'm sure we've got some questions and stuff we can uh kind of talk about uh as well