Hello and welcome to another episode of Webflow and Co, where I teach you the underlying code you’re 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 backend 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 backend written in, in a PHP or whatever to actually read the data that’s being sent via post.
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.
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 backend 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.
In the course uh, where we’ll build our own backend and process the data as you might do with your own um backend 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.
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.
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, 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 coding [Music]