Multi Step Form made in Webflow and WeBlocks

hey guys my name is mack and in this episode of roblox academy we are going to create multi-step form in webflow so first let's see how it works we have the first question how many pages your project will have and it's just the example so i will choose for example 6 to 10 and right now this button is blue if i will click it you see that it's gray so i cannot click this button but if i will choose the animations for example basic then it's blue and i can go to the next question right now we need to choose the services it's development only or development and design and this part is very interesting if i will choose development only and i go to the next question we can see list of custom functionalities but let's go back for a bit for a moment and choose developer and design right now when i click next we can see other question for the branding strategy strategy so you can see that this way we are somehow manipulating these questions and we can add some kind of a logic to this multi-step form so let's go next right now we have two inputs where i can type my name my email and click next my company it's weblocks and next okay and we have the summary and this project is designed in webflow and the logic of the form is created in webblocks we block the tool where we can create a code with blocks and in this example the first thing which we need to do to connect webblocks with webflow is to use a button in the form section in a multi-step and this is the button which is responsible for the connection we need to set here what is the next button preview button so first let's see the pre the next button has the attribute block next question and this way we will connect this button with we blocks we can also use not only attribute block but we can also use class id or tag but in this example block will be the best because we can see we can find only this one button with the block with attribute block preview question but we can see a lot of button with class for example button so for the buttons is a very good way to connect it with the block attribute the next thing is active class i will copy this class and i will show you what will happen if i will add an active class to this button it's going to be blue so i've added to this combo class a background color blue and for this button on active it has color of the font blue and border color blue so this is about this active class and start with the tab and every tab has a name in a web flow because this project is created with tabs we have the pages animations services custom functionalities and this way in a webblocks we can jump between these tabs first up has the name pages so we will change this variable because we are using variables to connect we blocks with webflow tabs and the first is pages the next tab has a name animations so to connect it with webflow with webblocks we need to create a new variable animations and right now i can say i can use the first block from forms which is the most using blocks from forms and i can say that if input pages why input pages because inside of the top pages i have a radio input with a name pages and right now i'm saying that if this input pages is going to change i want to set next tab into the animations and let's see what will happen if i will connect first thing i go into settings in a web blocks i copy this script if i'm on a light or or a pro mode if i'm on a free you need to copy and paste this code to the web flow if i'm on a light mode i can just copy and paste the script and it will connect automatically so right now i'm connecting this project with a fresh wavebox project and when i refresh it should work this way if i will click on it you can see that the next button is blue and i can click on it but after that nothing happens here because we didn't set it up in a web blocks we have we can only click preview and then we go back here but that's all we need to set in webblocks what are the next steps for our form and the next step is services this is the next step so we need to add as a variable tab services and right now i can say that if input animations and that's because inside of the in animations tab we have input with the name animations if this input animations will change we want to set next tab for services and exactly the same if input and change services will change we want to set next up which is custom functionalities create new variable custom functionalities and let's set it here okay let's test it so next i can click next i can click next and right now we are stopped and that's because i want to show you something different here we have a lot of inputs here but i think that we should not require choosing them from user we want to set automatically next button blue and active so to do it we can trigger not only input and change but we can trigger on click on click in this button so it means that if we click in a button next we want to set next stop but it needs to happen only on in one circumstances and it's when active tab is custom functionalities only when we are on this page with the custom functionalities we want to set the next tab on click in a button and the next tab is client name okay i'm adding variable client name and i'm adding it here and about this name client name i'm choosing client name name and not only the name and that's important to remember in a way blocks because if i will choose just name and i would use it in a weblogs we have it as a variable name too that's just because the waveblocks is using the variable name somewhere in somewhere different so we can not use just the name we have to write for example client name or service name or anything else but we can't not use just a name as a variable in webblocks so let's go and let's check first if it works so i go next next and right now it's automatically blue so i can go to the next and in this tab we have two inputs so it will also work a little bit different we have two inputs and the first one has a name client name and the next one has a name email so i will copy it i will create a new variable email and right now i can also use input on change and input entrance client name and input on change email and if those input will change we want to go to the company okay company i'm creating a new variable company and if input will change i want to go to the company but if we will set it this way it will set the tab company only if one input will change but if we want to require from user choosing both inputs we need to use a logic and it will be if logic if client name is different than no it means that it's not empty and i want to choose also a name and sorry and end statement and email is also not new then set nextup company and exactly the same here okay so it means that if if both statements are true if it's not no and if it's not new then set next stop for the company but those two are just triggers so [Music] okay when i choose 10 pages advance that will open and design this and right now when i will type mac and here i will type my email i can go to the next step which is company and after company i have the last step summary okay let's add a summary okay and if company will change set next step summary and before we will test it i want just to create a function it's very important to use functions if we have code like that in two places we have exactly the same code so we can put it just in a function for example multi-step check name and email and i can click right button and create the call for this function and this way it's much easier to change in a future okay so we have the summary and let's just test if it works okay okay and right now we are in a summary and right now i would like to add some kind of a logic because you can see that in this tab services we can choose development only and development and design and if we will choose development and design i would like to ask our user one more question about the branding if he has a brand strategy or maybe he don't have it and he needs it it's very important for us to know it but if someone is not choosing the design we should not ask him about that so to create it in a web in we blocks we can say that if input and change services in changing we can use a logic if and say if services is equal to and right now let's check what is the value of this those inputs this input surfaces has a value 1 and this input has a value services 2. so if services is equal to one we want to set next up custom functionalities and let's add else if services is equal to i want to set next tab to branding okay and to make it work i need to set what will happen after branding so i can add a next and the branding and if branding is changing i want to set next up to custom functionalities so we'll go exactly the same way so this way we are just adding one question if services is equal to two okay let's check if it works okay so i'm choosing advanced and right now when i will choose development only we go to custom functionalities but if i would choose development and design we go to the brand strategy and i can go next to that custom functionalities okay and last thing which i would like to show you which we can change in a webblocks about the forms is these kind of things we have here a summary but we have it centered and we have multiplicated this preview button so on the summary we could hide this element okay and to hide it we just need to get the for example class of this or we can connect it with the block attribute in this example let's do it with the block attribute and i will trigger it exactly the same as i triggered this this block on click so when we were triggering the client these custom functionalities with lists of inputs we used on click and in this example to hide element when we are in a tab summary we will use also the on click block so it's triggering the click link clicking in the next it's checking if the active tab is then summary and if it is i want to use animation set oops sorry set display none into the block meeting summary and we when we are clicking in a brief question in the previous question we want to check if active tab is in this example it will be a company but because companies just one step before summary and then we want to set display flex okay last thing which we need to test okay we are closer to this next next okay perfect it's hiding and when i go back it's back here so it works and actually there is one more thing which i would like to show you and it's related to i will just put it here to show you because we have also a price here and i've did a budget calculator tutorial and it's great way to connect multi-step form with budget calculator so and we can do it very easily we can go to the budget calculator project which you can find on youtube or on a webblocks page and you can click just export blocks and if you will export it you will get the xml file we can create in a webblocks a new project i will call it a calculation test and right now i can just delete this test and drag and drop this import here and here we have the calculate budget project and we can use this function just clicking command c and clicking command b here and we have the function for calculate budget and right now we can also use it in all of our input on chain triggers so if we have a trigger input and change we can trigger it also for our calculate budget i can add it here i can add it also here and right now when i will refresh the project you can see that this price is changing if you would like to learn more about it i invite you to the budget calculator tutorial where i teach you step by step how to create calculations with the forms in we blocks and in this project we can connect those two tutorials and use multi-step and budget calculator i hope you like it i hope you will create your own multi-step forms with webblocks where we can add a lot of logic because this is just the beginning for the logic in the multi-step forms you can add much much more logic to your forms and in the next tutorials we will go to the next steps which we can do with the forms i hope you like it if yes you can hit the like button you can subscribe this channel and just test we blocks thank you see you soon

Channel: WeBlocks Academy

Views: 2,322

Keywords:

Id: Q1pa2akJoRk

Length: 21min 3sec (1263 seconds)

Published: Tue Jun 08 2021