How to Create Multi-Step Forms [PRO]
ฝัง
- เผยแพร่เมื่อ 2 ต.ค. 2024
- Learn how to how to create Multi-Step Forms with Elementor’s Visual Form Builder.
Allowing your customers and leads to fill in their information in smaller steps, making your long forms, such as registration or shipping forms, less intimidating and much easier to complete and submit.
In this tutorial you'll learn how to:
✔︎ Add special step fields that act as separators for your multi-step form
✔︎ Choose the step indicator: Icon, Text, Icon + Text, Number, Number + Text, Progress Bar
✔︎ Customize your steps appearance
✔︎ And much more!
Don’t forget to subscribe to our channel!
Get Elementor: elementor.com/
Get Elementor Pro: elementor.com/...
I am sorry guys but these advancements in forms will not be enough. There are so many things that are missing out such as conditional logic, range slider, etc. If you will add these features one by one then it will take you several months. Kindly sit with your development & UX team, discuss all the important features a can have & try to add it in one single update. For now, this feature is just a small addition to a form. I won't consider it as 2.10.
Conditional logic is very important. There is no point to use it without it, at least in my case.
How about some backend features to allow access to the great data we are collecting?
Awesome! But I would like to know if we can build quizzes with it and where the data with the answers will be stored. Thanks in advance.
Did you learn how to do that?
@@imertkaradayi not yet.
@@DreamBuilderLab what about now?
Some things I've realized is that they show you these tutorials, and it looks great. It's really a WOW. However there's a catch.. It convinces you to purchase pro with all the bells and whistles. Then once you do spend the 199, you learn that certain things won't work. Like this, the form doesn't change as it does in the video while you edit. It's a nice start I suppose, but will take some ironing out.
True, Elementor will be useless if we do not have some great addons available.
What do you mean it doesn't change as it does in the video?
It literally works as in the video, lmao?
Fabulous ... now we (us never satisfied Elementor users) need a form based on if/then conditions :) ... Keep up the great work!
I'm betting this is in the pipeline, and once they roll it out I'll be all over that! Until then... jotform it is.
Yes PLEASE!
@@fowlerinvitations7072 We're still waiting four years later.
At the last step, when pressing submit, It should not clear the form and return to first step! It should remain at the submit button so user can see the succesful submission message! also, inbuilt feature to scroll to top on next steps is a must, but not scroll to top on last submission step!
Please add image select field (and icon select field) that works same as dropdown, except user clicks on image or icon. It's a very important field type!
I need it also for my customers. Very important field type, Elementor.
Conditional logic + add section into it. And we will be on the next level :)
This is great ! However, it would be nice if it had extra functionality like.
Conditional Logic | Upsell | Add Products | Google recaptcha etc
the smooth transition steps where is?
Is there any possiblity to change the Checkbox Tick Color to black?
Hi Guys
I am trying to create these forms but somehow after I add the items as steps the form stays the same and does not adapt to the step form format. I can do pretty much all the steps explained in your video but the form stays exactly the same.
Finally's realeased and is a great job.
When you'll think to add to publsih posts or cpt (using CF) between an elementor form ?
Now that we have the multispet it could be a great implementation to can have this kind of really important action.
Thankyou
I agree with you...
Elementor form with multiple steps causes severe layout shift when loading page.
It loads everything as one step, then it changes back to normal state.
You loose 20 Google score just there.
This is an amazing feature. Can't wait to use it on a new site!
What’s the best approach to add an inactive state to the next button of the stepper form until a valid input is entered to the field?
Crucial step towards making elementor conversion optimized. Hope you make it more robust with Gravity forms like styling & conditional logic.
Thanks for the walkthrough. I got a nice multi-step form working on my site!
Great feature, thanks guys.
quick question. it seems that I dont see it "Step" option when I tried it just now? :( pls help. I have elementor pro on.
im having an issue with a form i have made, it looks fine for a split second but then all the formatting goes awry. It looks fine in the editor, any ideas elementor?
Is it possible to preview each step whilst editing? It seems like we're missing a way to navigate between the steps whilst editing, which means we must continually work through the form on the live page, to see any tweaks or adjustments.
Is it working for anyone? For me, Multi-Step function only seems to work in edit mode... front-end shows the form steps all together.
Good God, it took me more than 1 hour to change the background color of the submit button, and it doesn't apply, it always stays the same, this form is a nightmare.
excellent, straight to the point tutorial video on how to add steps to an Elementor form. Fantastic! Thank you.
How do I hide or disable the PREVIOUS button on a multi step form?
Awesome tut. Thank you
Thanks, a description of the actions after submit, email settings, etc., would be great too.
How do you add a text title and description for each step individually? e.g title - A little bit about you Discription- I'll need this info to help give your an accruate price etc..
This is such an obvious feature to include, right??
How does it work if a step contains more than 2 fields? Does the button jump up and down or is the position fixed?
How can I use Image Multi- selection within a form without using dropdown tool. it is missing i hope you can help
Do I need elementor pro to create this multi-step form?
what is the widget name I want to use?
Are there any plugins to be installed?
Hi Kdu, no other plugins besides Elementor Pro are required for the multi-step form. The widget used is the Form widget.
@@Elementor thank you❤️
Another great video! Thanks, Elementor! Quick question...I'm using the progress bar for the multi-step form. For some reason, the progress bar doesn't start at 0. Does anyone know how to get the progress bar to start at 0%? Apologies if this was already addressed in the comments.
Ive just spend A LONG TIME creating a fairly large form, but once I start adding steps the submit/continue button disappears!
Is there some kind of limit for multi step?
How does the data show up in an email? Where are the email settings or where does the form data go to?
I have the same questions...
They should give us an option in the backend to check for form submission.
There are too many important features like email and redirects (totally customizable) and other cool integrations like woo commerce, Mailchimp and other CRM tools. If only I would expect to have a conditional logic feature or calculations...
I just tested it, but it asks me to fill in the field in order to move to the next step. I'm only testing it, I can't be entering an email everytime I want to change the design and test it
very useful
I have not got the 'step' option in making multi step form as i am using elementor- pro??
Can some one explain me the „hidden“ field and its purpose?
Like many others i can not understand why we have to ask for such things like conditional Logic in year 2023. In DIVI you can do this since 5 Years.
I spent hours creating a multi-step form this way. When you hit submit it does nothing and goes back to the first step! Can't find any support for this issue on Elementor Website of communities, even submitted a support ticket. If I take all the steps out of it and make it one long form it DOES submit. What could be the problem?
What about conditions? If choose A in first steps - show other fields in step second, or send email to another division, etc? Or maybe easier example: Question: I Am A: Dog OR Cat; IF CAT, show “Do You Like Milk?”; IF DOG, show “Do You Like Bones?” Divi has that for a quite long time :/
Totally Frustrating!!!! Can't see or edit when adding 2nd or 3rd set on this form... build a form in a blind mode!!! Not good!!!
I have the following problem with a multi-step form: In the first step, personal data is recorded. In the second step, an info text is displayed and further data is requested. If you now click on "Next" and go to the third page, you do not see the upper part of the third page of the form. The position on the page remains where it was at the end of the second page of the form (very far down). You should be redirected to the top of the form after each click on "Next". But this does not happen.
On the last page of the form, when you click on "send", you should remain in the same place until the message about successful sending or an error message appears. Unfortunately, the new form is then loaded and the message appears below it, so you have to scroll down quickly to see it. I hope I was able to describe the problem clearly 😖
Hi! I'm having an issue with a multi step fom. Upon clicking on the submit button it takes me back to the first step, and even when fields are greyed out, this means losing visibility of the form-being-sent animation on top of the submit button. Client mentions this is confusing and to be honest I agree. Do you know if there's any way to avoid this behaviour? Thanks!
Hey identidad, I recommend reaching out to support through your account for a solution.
Same issue here! At the last step, when pressing submit, It should not clear the form and return to first step! It should remain at the submit button so user can see the succesful submission message! also, inbuilt feature to scroll to top on next steps is a must, but not on scroll to top on submission step!
love you ziv
Hi! Is there a way to save the progress for the Elementor forms?
oh my god! this is very nice!
This options are not available anymore, I have elementor pro 3.4.1 and I don't see that multisteps options.
If you have multiple steps of form like more then 8 steps then going out of the body in responsive view how do you resolve it?
At the beginning of this video you say that you can make registration forms with it but don't tell us how this works.
Is there a way to keep the form size when the next step has less/more items, so it doesn't shrink/grow?
How do I hide or disable the PREVIOUS button on a multi step form?
How to disable previous button, means restricting the user not to go back
how to make the multi-step display responsive?
can we do an automatical next step after someone select an option without clicking next?
Show what the Radio Buttons look like!
If only it worked... collected info, redirected, etc.
Is it possible to send the lead to mailchimp in the first step?
Can we create order form like this?
Unfortunately, the multi step form elementor is providing is not easy to work with. First, when you create the steps you loose the option to see what you are editing on the preview window. Second, the integration with mailchimp for example is not good, as lots of issues happens and its a nightmare! Mine for example, if I change a field in mailchimp, then change in elementor, the field map wont update, even after refresh. I am loosing hope and will create my form with a plugin instead as my form is quite big and needs lots of details.
I have created a simple form, and when I add a single step, the form will not complete any action after submit. I have tried adding steps but nothing works. When I remove steps, the form will complete all actions after submit... I have watched the video repeatedly as well. Any help would be greatly appreciated.
Going through the same problem here. Hoping for a fix here quick
is it possible to ad a unique image to each step?
Is it available for elementor free version?
No
Great video
Is there a payment option on the form?
How do I add a sentence to the form? Just plain text without a form field? Like a confirmation message that displays on each step of the form
I'm having an issue with the next button working. It is not going to next step in preview and actual website. Any help will be appreciated
Is there a way to make it ask for the email first then all other fields on other steps?
To make it that people who wrote their email but gave up on phone, name, address, etc; can still be retargeted via emails...
How do I send the form data to Google sheets?
Very helpful. thanks a lot.
Thanks, very useful. It inspired me on my new website! How to change CSS in the dropdown select session?
Does this option available with free version or pro version? I am using the free version and i don't find it available.
where can I find good pictures like in this video for the background of this form.
SO AWESOME!! And LUV if these amazing new layouts (more shown in yesterday’s amazing preview) can be added to our Pro Block$ 🙏🏻⚡️💪🏻💥💻🙌🏻
For some reason, the "Next" and "Previous" buttons do not show up inline as in the example. How can we toggle that feature back on?
Hey @user-wl9eu4xs7q, you'll need to set an item as a "Step" for them to appear. If you still don't see them, please contact support at my.elementor.com
The multi-step feature needs conditional logic otherwise whats the point?
This is so good! Thank you... I make short promotional videos that come with several other add on options and after a person selects the type of video I need a Popup like this so people can add the extra features and as a feature is added so to is the price... can this be done with this ? Thanks so much
One really important question from me - if someone fills in part of the form but exits mid way through, do you receive the data from the steps they filled in? Like an incomplete form? Really excited to use this new feature!
Hi Dani, did you manage to get how to do that sorted out?
Why " Step " is not on the list ? I wanted to create a multi step form .
Did you solve this? It doesn't appear for me either.
you can not make a multi step form now because that thing is gone!
Is there a way to style the checkbox buttons?
Thanks! That is awesome! Is there an option for people to save the form and come back to complete later.
Being unable to see all the STEPS in the editor, makes the STEP feature USELESS & UNUSABLE!
Hi Mike, you should be able to preview each step, after clicking Next in your form in the Editor.
@@Elementor 👍
I hope we can have a multistep form that can allow the client to return to complete the form at a later time or add information to the form.
How to center the field
Is there a way to add unique additional content left and right of the data entry boxes in each step. I want to put some additional guidance for the user entering information and only want certain information to be displayed at each step, is this possible?
Hi Michael, have you joined the Elementor Community? It's a great place to ask questions like this, and get solid advice from other web creators. And you can share screenshots and links there as well: facebook.com/groups/Elementors.
@@Elementor Hi yes, I posted a few days ago but not had a response since unfortunately.
conditional fields also please!
Sensational Multi-Step, this functionality was missing from Elementor PRO, however forms do not send emails.
Has anyone managed to solve this problem of sending emails?
Great
It would be nice to have the option of showing or hiding a title for each section. Especially the radio and checkbox options. Thanks! Still a fan!
Just bring in a HTML field and write your title.
@@AllesPat THNX!