Creating a 'native' Multi-Step Form: Webflow Forms Masterclass

hello and welcome to another episode of webflow and co where i teach you the underlying code your writing and webflow this episode is going to be the second in our webflow forms masterclass series and today we're going to be looking at form submissions we're going to be taking a deeper look into what is happening when a form submits the different types and we're going to end up with a multi-stage form which we'll submit to webflow in the end so i've already created a form here um and all it's simply doing is a um it's just a first name field and if i take a look into here and look at our form options just to quickly run through we obviously have our different states i don't think there is anything confusing or or whatever about that but do let me know if you want to know more about what's happening here we have our form name which will of course be the name of the form that gets submitted to webflow so you can distinguish it in the back end the redirect url is essentially when there's when it's successful where does it go afterwards you might take users to a splash screen which uh thanks them or or maybe um recommends different products if if you want the user to go somewhere else after the form submitted then this is where you would direct them and of course you would use a relative link their example here a success but all you'd need to do is just pay to put the page um name that you want to that you want to redirect the user to we're not going to be doing anything like that in this example um but just to let you know that that's there the action will be the where the form data sends to now this is very very important if you leave it blank then it's going to send to webflow it's going to send to itself um if you want to send to another page which is specifically what we're going to be doing but we're going to do it later on in the episode you would again put the page name in there and that will send the form data to that now here we get to the kind of crux of the episode really and understanding the different method types so method will be how the form is submitted so here we have two different types we have get and post and it's really important you understand that post can only be understood by backend languages so you need a a back end written in in a php or whatever to actually read the data that's being sent via post and typically this is a way a far more secure way of sending login information for instance because it cannot be read through the url which leads us nicely onto get get can be read by javascript and again you can you can see where we're going with this of the multi-stage form it can be read by javascript just to recap we're not going to be redirecting we're going to be sending to ourself the same page and we'll we'll consume the data and process the data so the easiest way to see a form kind of actions is by going into the network tab of your inspector panel and this will show the various different networking activity that is that is happening on the form so this is purely asking me for my name so i'm going to put my name here and submit the form so here we go this is this has arrived in our network panel and if we click on it then we can start to see a little bit more about what actually happened so first of all you can see this the url that this was sent to now this is not the url of our website it's actually very specific a specific url that's probably tied to my webflow account or something like that now if you remember we actually set the method as get now my guesses or my understanding is that if we don't set an action i we're not controlling where this form submission goes to webflow itself overrides that method so that's why we're seeing a both a different url and just below it you can see that it's actually sent via a post method and we've got a response of ok and i guess this is the the sort of ip address that we sent the form to and various things like that so here we can see the response once again these headers are understood by back end codes we don't really have any access to any of these via javascript um and then we get the request headers this is what was sent to the back end so the back end code itself could understand the content type it could understand the host it can understand the referral but most importantly right down the bottom here you can see the data that was sent to the back end the name of the form which again is something out of our control um that that is that is sent but it matches perfectly up with the form name there we get the source which again is something we don't control this is just the url of my project test is again something webflow does but here's where it gets interesting because there's my field that i put as full name and sam gregory and this is the data that was sent to the back end the actual data itself dolphin again is another uh webflow thing we don't have control over that that's just that's um what webflow adds probably to uh for for webflow to understand uh you know that this was sent from a default url or something i'm not too sure we're not really concerned with stuff like that so this shouldn't be crazy uh rocket science to you we are just submitting a form to webflow's own backend now what about actually actually using get so we can do this inside a webflow by actually overriding the action now i've pre-created uh some pages here for our tutorial later on um and so i've created a page too here now uh this will send via a get and and we should be able to see the result of a get when i publish this type my first name my full name rather and hit submit so you can see we've navigated to page two now right at the top here you can see that we have a network entry and what you can see here is that after this question mark we have the name of the input that i had and then the value that i put in there so just by looking at the code of this you can see the name is full name and what i put in that entry was my name now if we add another um if we add another input element in here move this around a name of message for instance and publish that i'm going back here my message to you clear our network go back into here you can see that the query parameters that's what these are called query parameters have been broken up by an and and this separates and this will go on and on and on depending on how many inputs you've put into your form so now on this page two we have access to all of this information via javascript because this is client-side front-end and once again if we scroll down you'll see the query parameters again have been broken up full name sam gregory message my message to you so here we can see the two different ways you can send form data um post is typically used for thing for security things like logins and various other aspects and if you've built your own backend you can actually post to that back end and read that data and we'll be doing that a bit later on in the course uh where we'll build our own back end and process the data as you might do with your own um back end service or something like that but for this episode we're going to stay on track with the get as we have access to all that data that we've sent in our front-end code where we'll be using it to build a multi-part form so once again here is my here is my first uh step of the form and i've created two more steps um the second part will ask for our age the third part will display the data and then allow us to then submit the final form containing all of the data we've built up over the course of the journey so let's dig into how the the makeup of these these different pages and understand kind of what is going on so the first thing we want to do is in our first page in our first form we just simply want to put a get request to the next page that we want to send our data to so quite simple um and i guess the most important thing here is just to remember what what you've named your input so the next page we're going to ask our user for their age and quite simply we've got a text field here with a name of age now this html embed element is actually within the form so it does need to be within the form we've got two things in here and i've put them together so that we we don't get lost and understood but we have a hidden input and this is going to be where we store the first name that was inserted in the previous step um that we're going to store it and not display it and we're actually assigning it the same name as the previous step just to give us a bit less to make it a little bit less confusing to remember all these different components so the first thing we do in our script here is that we're actually getting the url parameter first name now this is a custom method that i have created i got this from an article which i'll link below there there are ways to get it but using this url search params and we have all these methods here and you can feel free to use those but just know the actual browser support for these methods so which is why i've gone the route of a simple javascript function which will forever work and it's something we've utilized in our webflow project so jumping back in this is a function but you might ask where this function is written now i've got an episode where i kind of think about how we can organize our javascript uh you haven't seen that i'll leave a link below and up in the cards where you can watch that episode but essentially if we go if we take a look at our project settings you'll see here from our previous episode that i've got a wf modules object here and there's our get url parameter i'm not going to go in too in depth on what is actually happening here but just know that we have access to get url parameters which is exactly the same function that our tool gave us but i've modified it slightly to use more up-to-date javascript but ultimately it's the same function jumping back into our project and looking at our code so we use that function to get the query parameter full name and store that in a constant which in our case gonna is gonna be sam gregory and then what we do we get the hidden input by getting element by id called hidden input and you can see that id there and we set the value to whatever is in the url query parameter which will be whatever the person sends like the examples i've just shown you i've been putting sam gregory so this would say full name equals sam gregory so let's just quickly demonstrate that jump back into our project and quickly demonstrate what's happening there so if i type my full name sam gregory we submit it you can see that i have full name equals sam plus gregory in the url and look at this embed here's our javascript that's run you can see that it's set the value as it of it as sam gregory and that's a hidden input you can't see that anywhere on the page so you can see that our javascript is working there and um and everything's working hunky during this stage so thinking about the third and final step of this journey let's take a look at the form settings on the second page so now jumping back into our second page let's take just a quick look about how the form is has been made up so it's a form and the only thing we've done is set a third page to send all our data to as a get request so whatever's going to be in this side of this form is going to send it to the third page and if we dive into the third page you can see that i've written hi name and wow your age aren't you growing fast now i've wrapped this in a span tag and you can do that by highlighting the text of a heading or whatever text you want and then hitting the paintbrush there so i've got a span here and i've given it a class of name similarly in here i've got my age with a class of age jumping into our html embed element here which again is still inside the form now i've got two hidden inputs one with the name of full name and one with the name of age again these are arbitrary you can name them whatever you want um but these just note that these will be the items that are sent to whatever form service that you're using so i've got two hidden inputs one for my full name one for my age and you can see i'm getting the parameters there of the url of full name and the and the parameter of age there so you can see here that i'm query selecting an imp an element with an with an attribute of name and a value of full name which again is name full name and i'm setting the value to my query query parameter here similarly here i'm getting a uh selecting a an element with an attribute of name with a value of age attribute of name value of age and setting the value of that to the query string that was passed from the second page just for just for um stylistic reasons we jump into my javascript here i'm setting i'm getting my span with the class of name and setting the full the text to full name and i'm getting our spam with the class of age and setting the text to age now you might ask how i'm able to get these values well because they were posted because they were in our script that's above where this where this is loaded um we have access to these variables later on in the page because now they've been set so i can just use them and use them in our in our on on-page javascript in the footer so there we go so now finally taking a look at this form all i've simply got now is i've left all my defaults and i've let the method be post because again because the action is default it's going to submit to webflow so jumping back into our example here you can see that our form has an action of page three if i put my age in here and submit that what i'd expect to happen is that your the url of the third page will have both sam gregory and age in it because we've got a hidden input with a value of sam gregory and we're about to put in my age into the age field so by submitting that we go through to the third page so taking a look at my url you've got the age of three and full name sam gregory so you can see those two values have been passed into the third page and what you'll see here i'm displaying my name and i'm displaying my age here now this is just purely visual because you might want to summarize what the user has put in in the various form stages i i this is just an example at this stage and i can go through how i'm how i'm doing it now taking a look at our embed you can see that that has now worked you can see it set the value as sound gregory and the age of three and it's all within our form here so when i hit submit here it submits to webflow and then jumping into my project settings and looking at my form submission data you can see that a few seconds ago the full name was sam gregory and the age was three so the interesting thing about get requests is that because your page is reacting to query parameters in the url you can actually send someone directly to a page mid journey and as long as you have those items in the url you can actually then populate what the rest of the journey might actually look like so for example here i'm on the first page of my journey and i'm going to paste in the the page to go to page 2 and i want to set the full name as sam and if i hit enter there and inspect the code you'll see that my javascript has run and the full name has been set to sam which is something i passed into the url directly similarly if i went to page three and we want to set the age to whatever it is that we want and hit enter i can send someone directly through to that page and it has populated all the values that we expected and if i submit that then and take a look at our submissions you'll see that the full name and age has been submitted completely normally as if i had gone through the journey so there we go that's what we've looked at today is the two different types of form submissions and how you might use them and we've now built a multi-stage form entry system which at the end submits to our webflow form data i understand there's a lot of moving parts in this episode um so do let me know in the comments if there was anything that was confusing it was a very confusing episode to try and record but just by remembering kind of some key key things like the the names of our input elements we're able to then use those and and write them to the new hidden inputs in our in our following page this can go on and on and on we can ask for multiple things in the next stage say something like an address and as long as we keep using get to then pass through to our next page then we have access to all of those values later on in the journey so hope you enjoyed this episode again leave me a like if you did and if you want to see more of this content and if you want to see more of just kind of how we how we understand code and webflow then please do subscribe to the channel and if you want to support me on patreon head over to patreon.com fake sam gregory until next time happy no [Music] coding you

Channel: Samuel Gregory

Views: 3,091

Keywords: Webflow, HTML, CSS, JavaScript, Web, development, web, fundamentals, website, code, learn, coding, webflow, build, websites, nocode, no, codenocode, accessibility, seo, search, engine, optimisation, Basics, Learn, learning, html, web fundamentals, webflow masterclass

Id: iIvNhCeYRDg

Length: 19min 0sec (1140 seconds)

Published: Wed Apr 28 2021