 What's up Elementor fans? All right, we got something new. Elementor has just released a new feature. It's the multi-steps form and this one came as a request from you. You guys voted on it through a poll that was done on the Facebook group. So for the last night, I spent several hours and today as well trying to learn the ins and outs of this, like what are the possibilities that this new multi-step feature adds? What can be done and how can this improve our websites that we built? So I spent the hours on it making this video now that way you don't have to spend hours just 10 minutes and you should be able to learn and be able to apply this new feature to your websites. What's up everyone? I'm Jeffrey from Lightbox and this is Building Businesses with Elementor. This is where we focus on growing your web design business and elevating your Elementor skills. All right, so let's dive in. In this video, we're going to just give a quick look into how the multi-step feature works. First, really quick, let me break down and explain. A multi-step form is a different type of form where you would fill out one piece of information and click the next button and you would take your users on a journey through the contact form. It could also have applied conditional logic to it, which means you could have one question and then the next answer would depend on that question. Really quick, let me give you an example and show you. So here is your traditional contact form right here and you can see there's a lot of questions. There's a lot of things to fill out and what happens most of the time when you have a contact form like this with a lot of different inputs, your users will start to fill it out but they won't finish it. You're going to lose a lot of leads by having too long of a form but then you see a form like this. It's less intimidating. It gives a different user interaction because it gives you micro interactions which is good for UI and I'll show you how it works real quick. So this one right here says to put our name, let's add our name, select on next. What's the business name? Lightbox. How many employees do we have? Six to ten. What services are we looking for? Let's say UI, UX. What's our current URL? Now I'm just doing this real fast. Don't worry, we're going to go through this step by step on how to build a form like this. It's just an example to show how it works. All right, and then let's leave a message, let's just say message here. Next and then let's leave an email. Let me leave a fake one and then you would click send. So that is the experience of filling out a contact form like this right here but in a step by step type of style. Let's go ahead and build one of these and I'm sure after this video once we've built one of these and once I've shown exactly how everything works, then you'll be able to be good to go. You'll be able to add this to your website. So the first step you're going to want to take when building a form like this, a multi-step form is take time to plan it out. Don't just build it on the whim. You got to really think about it because a multi-step form is meant to increase conversions but if used wrong, you can actually harm the conversions and make things worse for your website. Now when I started building the first form practicing around with it, I was trying to just make input fills and step by step as I was building it and I saw wait this isn't working, it's not making sense. So instead I took a step back and I thought about what I want to say and what the end goal was. So first think about what is the goal to this on our form that we're creating right here. The end goal is collecting the email and getting enough information where we could schedule a meeting for a potential client. So what I did is and what I suggest to do let's take a look right here. Here we go and so right here I wrote out all the steps. So before building the form, take time to write it out. That way you have everything there you could add a little bit of strategy to it like really think about how you want this to work and that way when you're building the form it makes it so much easy because you already have the layout done. So on our form right here what we're going to do is step number one is we're going to ask for their name but we're going to give a cool little personal message. I'm going to say let's start by getting to know each other. What's your name? And then I put in right here text field because that's what we're going to use for this. The second one is what's your business name? Again the text field and this is important for us to know when we're scheduling an appointment with a new client. This way we could do research before the interview. I could take a look on LinkedIn, Facebook and get to know the company before our first consultation meeting. Third one how many employees are in your organization and for here we're going to use a drop down selection to make it a little bit easier that way they don't have to manually put in and think about how many. We're going to give them a selection like one to five, six to ten, eleven to twenty something like that just to make it easy. And again this is an important question to ask your clients to find out before a consultation call and before giving a price on your project because the size of the company does make a big difference on the quotes, the prices and the scope of work. Next one is going to be what services are you looking for and again we're going to use a drop down selection. And this one will add like you know web design, web development, e-commerce, branding, UI, UX. You guys add whatever your main services are. They might be a website maintenance, SEO, whatever it is that you use. Go ahead and add that here. The next one is what is your current website URL and we'll leave it. This one will leave optional and we do that because maybe some people might not have a URL or a website yet. And again text field and then right here can you tell us more about your project and we'll make this optional too. They don't have to fill it in but we'll use the text area and that's basically like the big box where usually the message is at. And then the last one and here is our goal actually let me fix that should be seven. This is our goal right here. We want to get their email once they complete this give us our email we got the lead and now we can schedule them for a meeting. So I just left a cool little message here we're ready to schedule a free consultation leave your email and we'll send an invitation link and then we'll use the email fill and that's it. So we're set up to go right here. Let me move this back over to the side and we will keep this side by side because I want to use it as a reference why I am building the page. Let's go to the section you're going to add things that we're going to add something right here and everything is going to be done in the form you know at first when I saw multi step form coming out I was looking for a new widget but it's not a new widget it's inside the original form widget it just got more options added to it now so let's go ahead and just type it up and everything kind of looks the same you will see right here you're going to see step settings we'll get into those in a second but I want to start with the input fields and how this works right here so first go ahead and click on the form go to form fields and what's a race all these right here would start fresh start clean and we got our first text area and that's the type right here text type you'll see here we added already our types here so we have already identified what types are going to use the first one is going to be named but we're going to add our own message to this so copy that let's go to the label paste that into the label take out the placeholder I don't want the placeholder on this one and it is going to be required next step is add a new item right here and this is where the multi step comes in on type right here go to the drop down and you'll see the new option right here for step so select step and you'll see it looks kind of funny right here you got this one popped up at the top I think this is just because the whole form has changed but on here this is for your multi step right there you'll see label you can go ahead and give it you can go ahead and label it so we're just going to call this one step one you can call whatever you want but you see right there it's already popping up in fact this is actually step two we need to go back up here to add step one there we go and you see you can put in the text you could add your own message for each step of the way I mean it's brilliant what Elementor has done they have thought things out so much when it comes to their forms I think the form widget for Elementor is by far it's definitely my favorite for any type of contact form building in fact for the last two years I don't think I've used another contact form plugin because it's just so awesome okay anyways let's go back okay so next one next item we got another text filled and you see how this comes into play it makes it so much easier once we have this set up because now we just copy and paste it put that in there and then again next one we're going to add a step so you see what we're doing right here is we add a field add a step add a field add a step and that's what we're going to do each time now if you want to have two questions inside the step you could go ahead and add two questions you can see right here we got two questions next okay let me fill something out and you see then we could add two questions right there all right and we're going to call this one step three I got fat fingers so you're going to see me making a lot of typing mistakes it is what it is all right again I forgot to make this required let's make sure this is required right here let's go ahead and add the next item this one's going to be a drop down selection how many employees in your organization so let's copy and paste that add the label here right here instead of text though we're going to make this select and all the select right here let's go ahead and put one through five six through 10 11 through 20 20 through 50 and then let's do 50 plus and this right here will give us a good idea the size of the company that is trying to reach out to you all right let's make this required so the next one right here let's add another step let's go ahead and label this it's going to be step four next one add a field that's going to be what services are you looking for and this is also going to be a drop down selection so let's make it select and we'll say right here web design UI UX branding web development and we'll say e-commerce I spelled this wrong let me correct that all right now we got our select right there let's add another step and we'll call this one step five let's add another field was your current website URL optional this is easy it is just a text field and it's not uh well let's go back here I forgot to hit require this one is not required since it is optional let's add a step add another field the next one is going to be this one's going to be a text area so that one's going to be this is going to be where they could just give us more information on their project so select right here text area go ahead and give it that label and on the rules I like to set it to eight I like to give good spacing inside my message boxes makes it easier for the user to use all right and then we just got one more step and we didn't give this one a label yet so step six and then this one's going to be step seven and the last one's going to be for the email let's copy and paste this in there and then this one is required all right let's go ahead and make it large like our input sizes to be large make the buttons large as well all right so we got everything set up I mean we need to style it up right here but let's go ahead and take a look at it so we got our multi-step let's see how it works and we could see it is working right now okay so let's go back and let's take a look at a few more things now we got more options that we could set to style this up and to get it just right for you so the next set of options that they came up with right here you're going to see there are the step settings from here now you got all these different options the first one is none and what the step settings do is they basically give you the options of what we could put up here above your form so you can leave it none keep it clean and simple you can add text right here which just shows the labels that you put in there you could add icons right here now if you want to change these icons what you could do is go back to your form fields go back into your step your step feel and right here you could you could select the icon you want to use first you click on there and you could go and use your regular font awesome icons or you could upload your own svg I only got one svg let me upload this just to show you and you see you could go ahead and upload it there or you can leave no icon the next option is going to be numbers and this one's pretty easy I like this one it's clean it's simple it's not overwhelming and it's easy to follow along and then this one this one's pretty cool right here I'm pretty sure I think this one's going to be used the most and that's going to be the progress bar and it shows you step by step like the progress I like this one I think if I were to use the one I'd probably start off with the progress bar and then you could combine numbers and text and again the step one step two step three and so on what you see you could customize each one of these and put your own label on them or the icon and text so what I want to do here let me just keep it simple stick with the numbers I think numbers and progress bar are probably the cleanest ones or even just none might also be clean too and give a good experience this is the basics right here of building the multi-step form but the potential for it goes way further real quick I'm going to show you something we're not going to go deep into this because this is going to take its own video probably a couple videos on this but that's going to be on the conditional logic that you could apply so real quick let me show you what else it could do and this is for those that are more advanced and that dig stuff like conditional logic let's go back to one of the form fields and let's take a look at one of the step fields here you're going to see we know we have the content we already saw it we could do a lot inside here we could give it a label we could change the text on the previous and next button we could change the icon or upload our own icon but here's what else we could do right here on the condition so right here you have different options you got one always visible this is set by default this basically has no conditional logic to it next one you can do show if and here's where you could add your conditions and hide and then you could also add multiple conditions we're not going to get into this because this definitely is more of the advanced side and it should be it should have its own video or else it's just going to get super complicated in this video we get too long nobody wants to sit and watch a super long video just to see how to make a contact form work but if you are interested in this we will be dropping that video soon as well that's going to be the next one right after this and basically what conditional logic does on a form like this you could ask a question like how many employees does your organization have and depending on the number what say they select one to five then they get asked a certain question but if they select like 11 to 20 they get asked a different question because maybe that question might be suited for a small business so they say one to five that means they have a small business so the next question is now we want to take them down a route take them down the whole flow for a small business but if they say they have more employees we want to take them now down for a different lane for a larger organization and well conditional logic if basically if you use type form type form is a great example of conditional logic and I'm excited for this because we actually got a project coming up where we're going to have to build a conditional form so this is perfect timing for the new project we have coming up let's go ahead and end this by styling up our form and running a test just to make sure everything is working and showing you how this form should work after somebody submits it so style it up let's go over to our style and we'll go from top to bottom you'll also see down here on the bottom there is a new option added but still let's start at the top so the first one right here you'll see on the column nothing really happens right there but if you were to go to the next right there where you have two buttons this is where you'll see the column working so make sure to set the column right there to space out those two buttons I'd like to leave it at 20 I just like 20 pixels it's nice and even uh same thing with the road gap let me leave it at 20 so we keep everything uh consistent and clean label let's go ahead and get the label some spacing as well I'll throw this at 22 text color we could just leave everything as it is let's change the size of our label because that's very small I'll make it at 20 that's good all right and HTML fill well we don't have any of that so let's go down to fill now and fill that's going to be styling the text inside here so let me add our business name lightbox there we go uh you could change your color uh the font size I'm also going to make this 20 keep everything nice and consistent but this is all up to you however you want to style and design yours in fact I want to make the fill just a little bit smaller I like the big question because one is easy to read in fact let me make this a little bit bigger I like the big text on this I think big text is nice and easy to read all right and then the fill 18 pixels that looks good all right we'll leave the colors as it is uh the border color let me change that I want to make a very light border color and border radius I'm going to use two pixels to give it a cleaner look let's go down to our buttons and style up those uh again let's go ahead and make these at 20 make it easy to read for this one uh and here's pretty interesting right here you'll see it has the next and submit button the submit is the sand the very last button so we could style up each one of these individually for the next and submit let's keep these at red okay our red color but then we could also change the previous button so let's make the previous button maybe a darker color we want the I guess the brighter one to help push people forward that's our goal right there let's make the border radius at two I like to keep our border radiuses even throughout the site like everywhere so our content our input field is two pixels we'll make our buttons too as well and then other areas where we add buttons I like to keep them all the same but here are the steps this is the one we want to style up right here so typography uh you see we can make our text bigger and smaller and this would be to let me go back here and add text and numbers so let's go back to our step settings right here and add numbers and text right there go back here and what you're going to see right here your options are going to change right here based on what you put on your settings so if you put a progress bar here we're going to have different options for you inside the style section for the steps first let's look at the numbers and the text right here so we could also make the spacing here oh let's add a little bit more spacing that looks that's all right we got the padding so that's the padding around the numbers then we could also change the colors of the text here to the dividers which are these lines right here you can make them thicker or lighter or even remove them and we could make shorten up their gap a little bit all right let me move that to 20 20 is a magic number I like sticking with consistent numbers but if you see now let's go ahead and change this around I want to put a progress bar so I think a lot of people will be using the progress bar there we go now let's go back here to steps and you'll see we got different options right here you got the percentage so we could change the color of the percentage and the size let's make this a little bit bigger not too big I like the thin look right there keep it at 14 let me give it a 700 letter spacing and let's change the color on this all right and now right here as well we could change the color to the number section keep it on the red and then the background color in the background is going to be this dark color here we could actually make this lighter so you could play around with this and find the colors that works best for you you could also change the height and the border radius which this border radius looks kind of cool at 100 we're not going to put this at two like the others because well you know what let's put that too let's keep it consistent throughout the board all right cool let's go ahead and save that take a look at it here we go start by what's your name Jeffrey all right what's our business name it's Lightbox how many employees are in our organization we have six to ten all right what services are we looking for let's say uiux and our current website pslightbox.co and tell something about your project let's say looking to improve conversions click on next and now we got to leave our email I'm going to use a fake one right here email at email.com god imagine if somebody really had this as their email email email.com they must get so many emails all right I know they get a whole lot from me and go ahead click send and there we go our contact form has been sent so real quick let's go ahead and take a look and show you what it will look like when the successful step-by-step form is finished by a customer and here is what I got inside my mailbox and you can see that it's very detailed it shows exactly what step the answers came in it says what the question was as well as their answer and this now gives me all the information that I need to follow up on the sleeve it's a great way to improve your conversions one of the things that I see that this feature right here can really help out with is more conversions the thing is here here's a challenge with contact forms and I'm not sure if you're aware of this yet if you add too many fields and real quick I'm going to show you an example of too many fields now this is an older client we rebuilt their website this was I'm putting the client on blast I probably shouldn't be doing this but this is an example of a contact form that is just like overwhelming right here and you see they want to collect all this information right here they want all the information of you your location they want all this feedback right here is basically a questionnaire and on top of it then the capture I mean a capture enough is annoying but all this right here and once I saw this on the website I saw instantly the client was probably losing 90% of themselves and it was hard for them to see that the thing is I ran lots of tests and I've done lots of studies as we do a lot of UX and UI and conversion optimizations with what we do and part of web design is solving problems and improving website uh website usability uh being able to help the client achieve their goal and here's a crazy thing like if your contact forms say it's very simple it could just be name uh name email message you're still going to get people starting to fill it out but not hit that send button sometimes it's 50% even on a simple form I see simple forms with very few fills still only perform at 50% but now if you want to get more information and a lot of the times we want to get more we want to know like how to engage with a client when they reach out to us uh how do we you know uh keep track of what people are looking for how did they find us so all these questions that we want to get from them we can't just put them in our contact forms without risking losing cells and conversions so a step by step form helps out with that because it makes the the experience a whole lot easier because uh just like you saw in the beginning of the video when you see a contact form that big with all the stuff to fill in that's work nobody wants to go to your website and start to do a lot of work but when you have just something small and it's step by step and it's an easy experience it makes it enjoyable and you're able to collect all that data so I really really love this tool I'm excited that elements were did this I mean elements were like look I'm a fan you already know that I got a channel based on it but uh this one right here is a very big one it is an important one you guys voted for it and I really hope that it could be used by you in a way that could really help your business if you have any questions drop them in the comments we're going to be digging deeper into it this is just a surface view of it to help you get started but we will be making a couple more videos on it we're going to dig down into uh the conditional logic on it and I'm sure there's more things I'm going to discover as well and as I do I'm going to share with you and if you have questions about it reach out to me uh go ahead and put it in the comments here and don't forget to subscribe we're a new channel we can use the support I got big plans putting out a lot of videos a lot of things to help out uh whether it comes to elements or tutorials or learning how to design better by using design fundamentals and principles and just building better websites as well as helping out with web designer businesses that's it for this uh video thank you