Welcome to Door to online and this is just a very very quick Review of the beta version of Elementor pro 2.10.It has just dropped and with that is the first, look at the new multi-step an option which is the community requested new feature. For which that the developers at Elementor asked for input and this is what came back so this is not an in-depth review or tutorial because We don’t think you need it because We think the new addition if you’ve used Elementor pro or you’ve built some forms. you must have some basic knowledge.
1.Creating form
Let’s just add some extra features into it so we are going to give you my first look at it. Our first impressions on what we think are good and what we think we really need to make the forms totally usable and something that we think would make it a great way of being able to get rid of extra plugins. That you may have to use for advanced form functionality anyway.
Let’s take a quick look. We have got a basic page in front of me and we are just going to get rid of this annoying title at the top so all we’ve got in this area that we’re going to drop in the form we’ll make a bit of space at the top and bottom just. We open up a little bit of space in there and we’ll just drag the form option into the so let’s just find the pro options .with this we’ll just grab the form Elementor drop that inside there and we’ve got our normal form with our name email and message.
Now if we take a look at the various different fields that we have available and just quickly let me get rid of the label because it really annoys me if we click to add a new item we’ll add a new item in there item four and if we take a look at the type we now can expand that and one of the new things we have inside there is a step. So what we can do is we can click to add a new step and you can see that immediately adds the step that we wanted now. There’s a bit of a graphical weird thing going on here but it is still the beta and we’ve got item one at the top and item five at the bottom so it’s automatically added in the first step for us we can click open that up and you can see currently there’s no label previous button next button or icon we can’t set those values if we take a look at the form you will see we have step one which is what this first item is and then the new item that we’ve added which is item number five is step two.
So we can do is we can give these labels so we can say is that this is going to be basic so we’ll say basically info and you see that now gives us the one on there for the step and also the title that we’ve just given it we can have previous buttons next buttons we can put the text inside there if we want to add icons in. We can do so now what we need to do is simply reposition the different form fields into the order that we want. For example, if we want the message to be the second part of our form because currently, we have nothing in there we simply drag that down underneath our new item five which becomes item four because you can come in and rename that and we’ll just put the label in thereof message.
You can see now that’s taken the message field and move that over to the final step so let’s just hit update on this or save if we were creating a new page and let’s just preview this to see where we are. We can click you can see Now we have basic info step one name and email so let’s just put the details inside this we’ll put a name in and we’ll just put a fake email address in just for ease so end with email.com probably the most well-used email address in the world. Click on next that now takes us over to stage two which we can put our message in and we now have a previous button to jump back to the previous stage and we’ve got the send button which we can use so that’s at its most basic level that’s what you have but obviously we can do more we can fine-tune this we can refine it and take a look at those things.
2. Setting Up Step and Dark modes
Next okay so just quickly disable dark mode so you can see these two sections because obviously it’s having a bit of a dicky fit with the beater version so what we do. Let’s come in and let’s take a look so we’ve got content and we have advanced all the normal things inside so we can use shortcodes we could drop-in ACF fields. There as We’ve you can try yourself before all those kinds of things are in this so building the form is no real difference to what we’ve already seen us just have the ability to drop in those steps and then reposition whatever we want inside there.
We also have though now are the settings of the step click and open that up and you can see we can choose how we want to display the stages of the form that we’re working with now we’ve got a very simple example but we can go through and change these. We’ve got the type and we can take a look and there’s a range of different types so just text on its own with a guide bar just an icon. If we wanted to we could just put whatever icons inside there we want to set those up inside the form fields inside these relevant different areas so you can see we could click on there.
We could choose something different from there so it’s very simple to set those up step setters come back in we can just say we want to use something like a progress bar which personally We think is a nice way of doing things on there and you’ve got numbers and text you’ve got icons and text it’s up to you how you want to format those and then depending on what you choose you can change the shape of that so we can have squares we could have rounded we could have none at all just having the icon on its own so nothing really complex inside there.
To set things up and tweak and fine-tune and get it to work the way you want so on top of the settings of the step we also if we jump over to the style section we now have a new stage inside there where we can edit the steps themselves so we can adjust the typography the icon size if you want to make those larger or smaller we can set the active inactive completed those kinds of things the colors and those all those good things dividers all the normal things. you’d expect inside any kind of styling as part of Elementor so it’s really nothing earth-shattering any different there are no groundbreaking things inside here but what it does have and which we always expect from Elementor is an easy implementation you can simply create a form in the way that you’re totally accustomed to and then you can style it.
You can add multi-steps and you can set all those kinds of things up to make it looks any way you want as always we really appreciate how simple a lot of these things are when it comes to Elementor pro and Elementor now the one thing that We do think is missing that.
3.What we can expect?
We would love to see and hopefully, this is something that they will bring at some point is conditional logic we’d love to see conditional logic inside the forms because it means than once we can add conditions inside there we’re gonna basically do away some third-party plug-ins for forms. If we’re working with Elementor pro this is something that We really think that would open up a ton of opportunities. Any way that we can remove the need and reliance upon a third-party plug-in to do something that for a lot of people is a fundamental area is a good thing that being said like we say it’s very very simple to work with really is a good option to have as part of things inside.
Join if you do work with longer format forms just be able to simply drop in these kinds of stages it’s super simple and something that is great to see so We’ve taken a couple of moments set up a basic very very basic multi-step form styled it just so you can kind of see how easy and seamless. It all is so we’ve got our section at the top that tells us how far through our form that we currently are this only has two stages at the moment so we’re 50% the way through just by opening this up so we’ll put in my details and we’ll put in my phone number and my email address once we’ve done that we’ve got the next stage.
You can see Now it tells us about 100 % the form we can drop our message in we’ve got a GDRP acceptance form .we can jump back we’ve styled the buttons if we want to go back to the previous one we can click to go back there so you can see it’s very simple very seamless to work with you’ve got error checking on every single stage so we get rid of that day and we try to move to the next stage it tells us. We can’t until we fill that information out so all those kinds of things are still completely built into the form still built into each individual form entry field all that stuff is still there like we say really simple to use would be great to see the ability to have conditional logic in there but right now this multi-step form as an extra step into what we can do with these forms as part of Elementor pro so that’s Our first look at 2.10 beta the multi-step form hopefully you found this useful hopefully this is something you’ve been looking forward to and this has kind of made you happy seeing this.
