I’m trying to use the multi-step form from scratch, but it has been very confusing.
I can’t find any documentation on it in the weweb docs, academy or online video tutorials.
I tried to use the demo app (insurio) in trying to understand the worflow but it’s not clear or intuitive at all.
Any infos or recommandation out there ? This is pivotal to my future development and thinking of witching to webflow instead.
Thanks.
Which back end are you using?
Can you give more details on what you are trying to build?
Number of steps? Type of information you are saving, etc.?
Hi, thanks for your reply.
I was just trying to figure out the workings of it all.
I’m trying to see if I can use this for onboarding and surveys.
So between 2 and like 20 steps I guess. I’m using Xano as Backend.
UPDATE :
After a few hours of scrolling through the options and features of Weweb, I finally figured the whole thing (I suggest a few hours of weweb academy for the newbies).
I’d say that using this component is not very intuitive for a non coder (which isn’t my case). You have to set variables and update them along the way to keep track of progress. Also, if you want the ‘back’ button to keep track of previously entered information, you have to initialize the content accordingly. Nothing will be triggered automatically, like with other form builders out there.
Since this is a ‘pre-made’ component, I think there should be documentation pointing out where to find the variables and where they are updated. Once you get the hang of that, it’s more or less straight forward. There’s just no documentation on the subject at all . . .
FWIW - you can make your own, custom multi-step very easily. I made one as a proof-of-concept with the “pages” of the multi-step as vertical DIVs all within one horizontal DIV - nested within a DIV with a fixed width and hidden overflow - and then made a STATE for each page with margin as horizontal offset - bound each state to a variable for which page user is on (state for “page 1” only active when variable “currentPage” = 1, etc) - buttons increase or decrease the variable. And because you are switching states you can use transition settings so you have slick, animated transitions when user moves from one step to the next. Much easier than it sounds. 
That’s awesome ! I thought about doing my own custom multi-step…That’s a great workflow, I’ll look into it. Thanks.
Thanks for the great suggestions @Mark_Pederson and @oblic! We’ve been meaning to create a multi-step form mini-course for a while but haven’t found the time yet. This will help us a lot 
@Joyce
So, I’m going one step further with this, based on @Mark_Pederson suggestion.
I’ve created a component made of a couple of divs and elements looking like this.
→ I’ve created component properties for each elements and bound them with the actual data.
→ In my page, I use an array of data containing all my infos (eventually will be a collection in my DB) and bind it to the main page div.
→ I link the button to an increment variable that look up the current item in the array bound to the display property.
There you go ! Easy reusable multi-step form or for whatever process you need !
EDIT : Haven’t done it yet, but this will also make it easy to display a dynamic progress bar from item.index/data.length
@oblic @Mark_Pederson thanks for explaining but as a beginner I am still having a hard time understanding whats going on here.
I followed the academy and it really was a great help in a lot of areas but this multi form set up has me lost.
@Joyce Do you plan on doing a tutorial on this soon? As @oblic said, the documentation really is of no help here and its a very important part of my app.
Thank you
I figured out some things and got some help also. For anyone new that might be struggling like I was, I made a video.
I am sure there is a better way so if anyone has pointers feel free to let me know.
Here is the video on how I made my own multi step form.
VideoLink
