Build Multi-Step Forms in Webflow (Ultimate Guide)

in this video I'm going to show you how you can build multi-step forms in webflow and here I have such a multi-step form this is a gym onboarding form and I can click on sign up I can type in my name if I don't fill out all of the required Fields you can see there's even some custom designed and styled validation message so I have to fill out everything and here if I get to the third step there's even some conditional logic inv involved here so for example if I click on endurance you can see I get redirected to the step what is your favorite endurance exercise but if I were to click on strength I get redirected to a completely different step called in what way do you want to improve your strength so depending on the selection or the input that the website visitor makes they get redirected to a different step inside of the form so this is the conditional logic and branching and we're also going to learn how to set this up today and to build all of this we are going to use a tool called input flow so input flow is a web Flow app that you can install inside your web flow account and the way this works is basically you build all of your form elements all of your form steps inside of the webflow designer so you you have full design control over it and afterwards you use input flow to add the multi-step functionality to add the calculations to add the logic the validation and everything that is required for an advanced multi-step form and before we get right into it I want to make a little disclaimer I am the founder I'm the creator of input flow so if I today say that input flow is a great software that it's a great tool then I'm obviously going to be a little bit biased here so my recommendation to you is try it out yourself see if input flow is the right fit for your project and if you have any questions you can reach out to me at any point in time let's go to the webflow designer uh I have already prepared all of the form elements and all of the form steps so that we can save a little bit of time I'm quickly going to show you the structure of it so right here I have this section called section onboarding there's this image right here and here I have the onboarding form this is just a normal webflow form nothing special about it this is the form block this is the form element and now inside of this form element we have all of the different steps nested as diff blocks so these are just diff blocks with the class onboarding step applied to it because this is an onboarding form and inside of these diff blocks you have your form elements so you have your headings your input Fields your buttons and everything that is needed for the form itself so let's recap normal webflow form with all of the form elements inside of diff blocks and these diff blocks will later represent the multiple form steps and right now they are all stacked below each other this is the basic starting point and just in case you haven't done it make sure before we start to go into input flow make sure that all of your input Fields like your text input Fields your radio buttons and everything if you click on the settings icon right here that they have a proper and descriptive field name so where it says text field settings that the name is descriptive so in this case it's called last name this is a good name because later if we start to work with it if we start to set up the conditions based on the input fields we have to know what the fields are and if you give the fields a generic name like for example field 10 or field 15 you're not going to know the purpose of the field so make sure all of your input Fields all of your checkboxes all the radio buttons all the select elements have a proper and descriptive name really important okay now what we have to do next is we have to actually install the input Flow app and to do that you can just go to the website input flow.io and click on install webflow app and once you click that you get redirected to the webflow app Marketplace and here you can click on the install button and then you have to select where you want to install input flow on which website on which webflow project or if you want to use it on multiple project you can just use uh your entire workspace and once you've done that and have clicked the button again you have now completed the installation you can go back to your web flow designer reload the webflow designer and then inside of the left sidebar there is this apps icon you click it and then there is a list of all of the apps that you have currently installed I have three right now and the second one is input flow so I click the launch button and start the app if you have never opened up input flow before you will see this screen right here the authentication screen and if you don't have an account yet you have to create an account first to create an account you can click on sign up here where it says don't have an account yet sign up here and then you switch to the signup screen and then you just type in your email address and choose a good password that you can remember this will take about I don't know 20 seconds and then you're done and afterwards you click on create account wait a few seconds and then you will be redirected to the actual input Flow app and this is how the input Flow app looks like at first when you open it up after you logged in or signed up for an account before we start to work with this input Flow app we have to do one more little preparation and that is we have to add the input flow script to the page because no matter how beautifully you create and design and build your form without the input flow script it will not work and to get to the input flow script you just go to the website docs. input flow.io this is the documentation website you will find a lot of different documentation articles for all of the different input flow features and functionalities much more in depth than I will cover it today in this video so definitely worth checking out docs. input flow.io but now in this case we're just going to go to the second menu Point called adding the script and here where it says copy the following code we copy this script element and this is the only time with input flow you will ever have to interact with code everything else is completely no code and in fact right here this is not really interacting with code we just have to copy and paste it that's all there is to it so I click this copy icon go back to input flow and then on all the pages where I want to build a multi-step form I add this script tag so I in this case this form is located on the homepage so I click on the page settings of the homepage and then scroll down go to the first custom code block where where it says inside of the head tag then I paste this and click on Save and then I am done now we've successfully added the script to the web flow site the first thing that we're going to do with input flow is we are going to use the elements manager to connect all of the relevant form elements to input flow so that input flow knows how to deal with them and can manage them the elements manager is this view right here you can also get to the elements manager at any point in time by clicking on this ele elements menu button so I click on elements and then this one opens up you can think of the elements manager like a setup assistant the first element that we are going to connect to input flow is the form itself so I open the Navigator right here click on the form and then it says connect this form with input flow and I click the button connect and now it says success form is now connected to input flow perfect now input flow knows that we want this to be a multistep form next I'm going to connect the individual form steps so I'm going to start with the first step right here I click on it and then you can see it says turn selected element into and then I have a couple of options in this case I want to turn it into a step so I click the step button I enter a name I'm going to call this first step welcome step you can call your steps whatever you want you don't have to remember the names but you have to recognize them so you have to make sure that all of your names are descriptive because later we're going to need these names to uh connect the different form steps and add the multi-step functionality so make sure when you enter a name that you know which Step this name is referring to so I enter the step name and click on create step and now it says successfully created new Step called Welcome step let's do that for the Second Step as well I select the SE Second Step the second div block here basically turn selected element into step I click the step button again and this one I call what's your name because this is the step where I ask the user what is your name and then I create this step successfully created new Step called what's your name perfect let's keep going so this is the third step and this is the main Fitness goal step so I click on turn selected element into step and name of the step is main Fitness goal and I create this step okay and for all of the other steps I've already done that as a preparation for this video as you can see when I click on this it already says selected element is a step and here the name of the step and also for the other steps this is the favorite endurance exercise step this is the what exactly do you want to work on the physique Focus step uh the body fat step and and so on so forth you get the idea what I want to do next is I want to connect all of the next and back button if we go to the final the complete version of this form you can see that we have these buttons right here when I click on sign up I go to the next step when I click on next step I go to the next step and if I click this button up here I go back to the previous step so these are our next and back buttons and we also have to tell input flow which buttons are our next and back buttons and to do that I'm just going to click on this button and then it says turn selected element into and this time I'm going to click on next button turn element into a next button perfect let's also do this for this button I click on the button turn it into a next button I click on this button turn it into a next Button as well and I think for all of the other next buttons I've already done it yes as you can see if I click on this it says selected element is a next button up here I have one one single back button for the entire form which is always visible so I select this back button and turn selected element into a back button and now we've connected all of the buttons this is all the preparation that we have to do for now and we can now build the multi-step functionality but before we can do that whenever you make changes to the form to the form structure or you make changes with the elements manager what you have to do is you have to publish your webflow project you have to publish it to your staging domain so the one with the wef flow.io you don't have to publish it to your production domain only the staging domain so I select the staging domain and publish to the selected domain now you may ask yourself okay that's all really interesting but what happens in the background when you connect these elements to input flow and that is a very good question and I'm going to show this to you now for example if I click on this form step right here and up here in the settings panel if I click on it you can see input flow added to custom attributes it added an if- ID attribute and an if- step attribute and it also does for all of the other elements it always adds some type of attribute for example this next button gets the attribute if element equals button- next you don't have to worry about these attributes you don't have to manage them yourself input flow manages them for you just don't touch them keep them as they are and don't delete them don't modify them and then everything will work as expected and another question that you may ask yourself is wait a minute we connected a few different elements but we did not connect the input Fields the input elements so for example this text input or this radio input right here we did not connect this to input flow and that is true but what we did is if I go up to levels you can see we connected the form itself to input flow it's a selected form is managed by input flow and this form also received an ID which you by the way should not touch as well just keep it as it is um and because we connected the form to input flow all of the form input Fields all of the form input elements are automatically connected and managed by input flow itself so whenever we make a change to an input field or whenever we add a new one or whenever we remove uh an input field input flow tracks these changes and automatically manages or removes these IDs right here that happens in the background and you don't have to worry about it let's quickly recap we have now connected all of the relevant elements with the elements manager which is kind of a setup assistant and we have published after we did this preparation we have published the webflow project to the wef flow.io staging domain and now that we've done that we can get to the really fun part which is the form editor so I click on this menu button called form editor and now here in the form editor I can click on this load elements button at the top right with this load icon and as soon as I click this you can see it says successfully synced new form elements into puts and steps and all of the steps that we just created are now visible in the sidebar and we can start to work with them when I say we can now work with these steps what I mean is we can drag these steps onto the canvas so I can take this welcome step and drag it onto the canvas move it around and connect it with other steps so for example if I drag the second step onto the canvas to what's your name step and the main Fitness goal step the third step I can connect the steps with each other so I'm going to zoom in a little bit you can zoom in by scrolling with your mouse wheel or with your touchpad and then I can click on this black small black square at the bottom of the step and hold my left mouse key and draw a connection and I draw the connection to the center of the next step then I release my mouse key and now you can see there's this small Arrow which means the connection was successful created and I'm going to do the same thing for the wat's your name step I click on it draw a connection to the main Fitness goal step and now there's a connection as well you can always move the steps around by clicking and dragging them on the canvas this is the start of our form these are our first three steps okay so why don't we look at the current state of the page to see what has already happened now so this is how it looked like a few moments ago remember all of the individual steps stacked below each other no multi-step functionality whatsoever and now that we've done our preparation with input flow added the script and started to work with the form editor if I now reload this page you can see suddenly all of the steps except for the first one disappear and then when I click the next button we can see we already can go to the next step and if I click it again we already go to the third step because the first three steps are all connected but if I were to click on next again here nothing happens because there's no step after it so let's keep going and this main Fitness goal step is the really interesting step of the form because as you might remember from the start depending on the selection that the website visitor makes here we want to send them to a different step so if they select endurance we want to send them to the step what is your favorite endurance exercise if they select strength we want to ask them what are their strength goals and if they select physique we want to ask them if they want to build muscle or if they want to lose weight so three different potential next steps depending on the selection that the website visitor makes here and to build that in input flow we just have to drag all of the potential next three steps onto the canvas I'm going to take the what are your strength goal steps I'm going to take the favorite endurance exercise step and the physique Focus step and drag them all onto the canvas and now I'm going to draw a connection to all of these three next steps so I'm going to draw a connection from the main Fitness goal to favorite endurance exercise I draw a connection to main Fitness goal to what are your strength goals and to physique Focus as you could see as soon as I created this the second outgoing connection so as soon as I connected the second potential Next Step these yellow conditional blocks showed up because now we somehow have to tell input flow when we want to send the user to which Next Step because we have three of them and input flow does not know when to send the user to which Next Step so we have to tell it to input flow and that is also why these conditional blocks at the beginning when they're not configured are yellow because they mandatory yellow means they are important you have to fill them out let's start with the first one let's create the condition that decides when we want to send the user from Main Fitness goal to the favorite endurance exercise step so I click on the conditional block create the condition and this is the condition and we have to select an element so if element in this case I'm going to choose the radio group fitness goal which consists of the radio button physique strength and endurance if Fitness goal is endurance then we want to send the user to this favorite endurance exercise step and just as a little side note if we go to the radio group fitness goal so this is the radio group right here called Fitness goal you can see here is the group name Fitness goal and all of these three radio buttons have this group name Fitness call and that is why inside of this conditional block I can select this radio group name I close this again and I set up the condition for the Second Step the second potential step I click on this condition main Fitness goal to what are your strength goals we want to do that create condition if the radio group fitness goal is strength so if the user selected strength and for the last one we can also do that so main Fitness goal to physique Focus create a condition if Fitness goal is physique perfect and now if we go to the live side again and reload you can see now if I make a selection here if I select endurance we get redirected to the endurance exercise step just like we configured it if I go back and select strength we go to a different step called in what way do you want to improve your strength and if I select the physique radio button we go to the step what exactly do you want to work on so the physique Focus step it is important to know that the conditions that we just set up are super basic and super simple conditions so as you can see there is only one subcondition but what you can do with input flow you can create really Advanced logical conditions conditions so for example I have as you can see a lot of different options right here for the function so I can say if something is or if it's not or if it contains a certain set of characters if it is empty if it is not empty lots of different options and there are even more options if you select an input field with another type for example a number input then you will have functions related to numbers like greater than smaller than and this way you can build really complex and interesting logical branching conditions and you can also chain conditions so at any point in time you can click on the settings icon right here and then you get three buttons the ant button the or button and the delete button the delete button is obvious when you click on it the condition will disappear if I click the end button I get a second sub condition and once I've have configured this the entire condition will only be true so we only will send the user user from the main Fitness goal to the physique Focus step if both of the subconditions are true so if this one is true and this one is true and you could also if I click the settings icon again add an or condition if I click on or then this is a logical or rule so in this case these two must be true or this one must be true in order for us to send the user from the main Fitness goal to the physique Focus step my recommendation to you is keep these conditions as simple as possible but sometimes when you need a more advanced logical rule you can use these logical and or or chaining and if you're not certain or if you're not 100% sure how they work then you can either take a deeper look at the documentation the docs. input flow.io has a few interesting articles on that where it says branching and conditions or you can just contact me or contact the input flow support and then we will help you figure it out as well I'm going to delete these two conditions again so I click the settings icon delete them because for this in this case we only need a very simple condition okay let's keep going after the physique Focus step after these three steps I want to send the user to the personal training session step so I want to ask the user do you want to have a personal training session and connect the favorite endurance exercise to the personal training session the strength goal step to the personal training session and the physique Focus step to the personal training session however the physique Focus step has one special case because if we go to the final version of the form the already completed version that I built I'm quickly going to fill this out and select physique now here there's another logical branching so if a user select lose weight they get to the step what is your current body fed percentage and only then will they get to the step where they get asked if they want to have a personal training session if the user selects they want to build muscle they immediately go to the personal training session question okay let's set that up I'm going to drag the body fat percentage step onto the canvas create another connection put this here let's also move the conditional block over here so that it's a little more obvious and put this here and then after the body fed percentage step I want also want to ask the user for a personal training session I have to set up a condition again um I want to send the user from physique Focus to body fat if create condition physique focus is lose weight and the second condition now what I could do is create condition if physique focus is buil muscle but there's an even easier way I can use a helper function if I click on choose function here called any other case which is kind of a catch all Rule and the way this works now is if the physique focus is lose weight then we want to send the user to body fat and in any other case no matter what selection they made we want to send them directly to the personal training session so this is a nice little helper condition that will come in handy a lot of times okay and now our form is almost complete we just have to add the contact method and then depending on what the user chooses in the contact method as you can see down here they have two options email or WhatsApp so if they so I drag the two steps onto the canvas I connect them and also set up the conditions contact method to Whatsapp number if contact method is WhatsApp and create condition if contact method is email we want to send them to the email address question and now we can zoom out a little bit and we see our entire multi-step form diagram I think this looks really cool and not only does it look cool it is now complete we have now completed the entire multi-step functionality and if we go to the live website reload the page we can now click through the entire form you can see I can make a selection I can select physique if I select lose weight I have to enter my body fat percentage I go to the next step I can select if I want to have a personal training session I'm going to select maybe and if I select email I go to to the email address final step where I can submit the form or if I select WhatsApp I go to the WhatsApp number step and I can also submit the multi-step form and by default this is a normal webflow form submission so if I type in my WhatsApp phone number and click on submit form you can see in the background this is a normal webflow form submission so input flow has a lot more functionalities than I just showed you um as you can see you have some blocks right here and also inside of a step you also have additional functionalities like calculations and validations I don't want to show you all of these other functionalities today I would only like to show you one more functionality because it's really important and really cool in my opinion and that is this validations functionality if we take a look at the complete and final example uh and click on sign up and then immediately try to go to the next step without filling out the first and the last name you can see we cannot do that there's this custom error element that shows up with a custom error message so input flow or the multi-step form complaints to the user please enter your first name and please enter your last name and this type of validation is really easy to set up with input flow and I'm going to show you how you can do that so let's set up the validation I click on what's your name I want to set up the validation for this step and create a validation then I have to select an input element that I want to validate in this case I'm going to validate the first name field input element first name is not valid if the first name is empty that's what I'm going to choose right now but as you can see you again have lots of different options right here that you could choose from to validate or invalidate uh input field but I'm going to choose a very simple function the is empty function and if the input element is not valid I want to display an error message please enter your first name I'm also going to do that for the last name field so I add a validation input Element last name is not valid if the last name is empty and I'm going to display the error message please enter your last name and again this is a very simple condition I could also like I did with the branching with the conditional blocks here the same holds true for the validation that I can at any point in time chain conditions together with this and or the or button to build some more complex and custom validations but in this case I'm going to delete this again because we are going to keep it simple for this tutorial okay now we've created the validation logic but what we have not done yet and what we absolutely have to do for this to work is we have to set up or create the error elements where the error message will be displayed I switch back to the elements manager up here and then I go to the what's your name step where we set up the validation right here and below the input field what I'm going to do now is I'm going to add a text block and usually inside of this text block I'm going to put a filler text like something like error message will be displayed here something like that and I copy this text block and also put it below the second input element that I want to validate and now these elements are not error elements yet because input flow does not know that we want to show the error message inside of these elements so what we have to do is we have to connect these error elements to input flow like we did at the very beginning of the tutorial with the steps and the next buttons I click on this error element and then it says turn selected element into and I click on error message turned element into an error element and I do that for this one as well turn element into an error turned element into an error element and the cool part about this is this error element is just a normal webflow element just a normal web flow text block which means we can add a class to it and style it exactly how we want it to look in this case I already created a class so that we can save a little bit of time so as you can see I added a white background and centered the text let's also add this class to this one the class name again is completely irrelevant you can name your class names however you want input flow does not care and now that we've created these new elements and connected them with the elements manager we have to publish the webflow project to The wef flow.io Domain again remember every time you make changes or connect an element or remove a form element you have to publish your webflow project to The wef flow.io Domain again so I publish it to the selected domain I reload this so this is our form I click on sign up and if I try to go to the next step you can see our error messages show up and we cannot go to the next step unless these two fields are valid in this case they just don't have to be empty so I'm going to type in my first name and try to go to the next step and that doesn't work because there's still the second field please enter your last name I enter my last name and go to the next step again and only now the multi-step form lets me go to the next step which is really cool I think and as you could see we in the web flow designer we did not have to tell input flow that this error element is related to this input field input flow will automatically look for the next error element of an invalid field inside of a step and will display the error message inside of that next error element so that means if you put the error element below the input field it is immediately the next one and this is where the error message will be displayed that is the general idea okay and now one more very important information for you as you can see right here up there at the top right it says upgrade so the way the input flow pricing structure works if we take a look at the uh the pricing table here the way the input flow pricing structure works is you can use input flow on your web flow.io domain completely for free unlimited without paying anything the idea with that is that you can try out and test out input flow on your staging domain as long as you want you can see if it's a good fit for your client project for your own project or if it's not a good fit and in case it is a good fit and you want to publish the multi-step form to a custom domain then we ask you to upgrade to one of the paid plans and these paid plans they are they have unlimited forms and unlimited webflow project so if you have one plan for example this startup plan you can use this for unlimited forms and unlimited webflow projects across accounts across workspaces if you have any questions regarding input flow or if you want to know something about it or if you are if you have some issue setting up your form you can write a comment here in on YouTube or you can just contact me uh using the input flow support you can just write Mike at input flow. IO and then I'll quickly get back to you also if you are not sure whether input flow meets your Project's requirements you can also send me an email and then I'll take a look at your project and I can give you a good estimation whether or not input flow is a good fit for you and your project I recommend you to go to input flow.io now and install the input Flow app again you can install it and test it out completely for free and uh just work and play a little bit with it and I think you're going to have a lot of fun thank you for tuning in this was Mike and see you next time bye

Channel: Mike Pecha

Views: 5,408

Keywords:

Id: TLxTJE5ii_w

Length: 35min 31sec (2131 seconds)

Published: Wed Feb 28 2024