Hey, looking to create a multi step form in weweb.io. What would be the best way to go on about this, several pages for each step ? or rather conditional display of each step on the same page?
Also how could i add some nice little animation (slide and opacity for instance) between the different steps of the form ?
Thanks in advance
I think this is very much a design preference question. It depends on the type of workflow the typical user would go through when filling the form.
I personally like designs where the user is guided through different screens that represent steps on an horizontal timeline (think tabs), with centered and responsive content. The most important part really is guiding the user and not dumping them in a huge vertical form all at once.
I think you could use different states with transitions
Hey gbeaudoin, thanks for your answer 
Ended up doing everything on the same page and works great
Cheers
Hey @jivdbroe ,
Would you mind sharing a link to your form? I’m curious what it looks like because I have the same topic right now
Cheers
Hey! a bit of a late response, but have you figured out the multi-step form? How did you go about doing it?
Hey,
Having done both recently, my preference goes for One Page / Step rather than a multiple step form.
Why? For the following reason
I think it’s a matter of habit and there are pros to do multistep form I guess. But to me, One page / step stays the best solution.
The solution is then a a flow control using states?
I also want to make a stepper so can you guide me how I can do that? I use a component from a kit but it’s not responsive and I don’t know how we can do it on a single page with different steps. I’ve total 6 steps and right now I’ve created 6 different pages. Can you guide me how I can do this?
Hey all, sorry for not answering your questions, didn’t see any emails regarding this topic until now.
I ended up using a variable and display states based on the variable, whenever someone clicks on next, i have a workflow adding 1 to the variable which changes the step and display states of each step.
If you want to see how it looks you can go here : https://www.jerenovemamaison.be/ and click on the CTA in the Hero which will open a modal with the form.
Here are a few screenshots if that can also help.
Also this might not be the best way to do it, but works fine.
EDIT : the custom javascript is just an event after the first button click to track how many people start the flow. You can disregard this here.
I’ve also created like yours. In my case, I’ve 5 form steps and then a review page of all the information applicant filled. I create a variable currentStep and assign the value 1 and add a workflow to the next button that is onlick change variable value but nothing happened. Can you guide me on this? Thank you so much!
If you change the variable directly in in data → variables do your steps change ?
If not then the problem is probably linked to the variable and display states.
If they do change, then you should check your workflow.
This is my workflow. Is it possible for you to record a video of your steps layout and the binding, workflow etc so it’s easy to follow the video and understand. I shall be very thankful for this.
Your value is not setup correctly in the workflow. The new value is still 1.
You need to bind the new value to a formula and add 1 to the current value.
The button working now but not showing the content of Step 2. Is the formula stays the same for all steps?
Like on first step, I used this formula in display:
switch(cuurentStep,1,“flex”,2,“none”)
On Second step, I used:
switch(cuurentStep,1,“none”,2,“flex”)
or there is any other thing needs to do that I’m missing? And from where the 1 and 2 coming in the above switch statement? Thank you so much!
How I can make the stepper like this in weweb because I want the customer to know the steps he/she at and the next steps.
Have you created different variable for each step? I see your initial screenshot which have LT_FormStep and then in the last you have L1_FormStep. Can you explain this please?
LT and L1 are two different forms with steps in my projet (sorry for the confusion), i took a screenshot of the second form but logic is the same and you do only have one variable per form.
yes you can use the same workflow for each step because the workflow adds 1 to the current value with the formula.
For the stepper, same logic as the display of the steps, design the stepper and number based on the variable value. Instead of the switch formula, use the if formula where you define if variable greater or equal to X then color Y.
For the error, are you sure all display states are set up correctly based on the variable ?
This is the display formula for Step 2. When I click on the button, it shows empty white space where I have Step 1 Flexbox previously. Kindly check where the error is. If you need to see anything else, let me know.
I see your variable value is 5 (result of variable + 1 is shown as 6) in the second screenshot. Put it back to 1 and try out the button.
You can see the value of your formula is undefined in the first screenshot, probably because the variable isn’t 1 or 2, which are the only two values defined in your switch formula.
For it to work the result of the formulas should be None or Flex, and not undefined.
The way I’ve done this, more or less, is giving each step its own div.
<steps>
<div selected> 1 </div>
<div> 2 </div>
<div> 3 </div>
</steps>
<Step 1 display: flex>
/** contents of step 1
</Step 1>
<Step 2 display: none>
/** contents of step 2
</Step 2>
<Step 3 display: none>
/** contents of step 3
</Step 3>
<div id="buttons">
<button>Back</button>
<button>Forward</button>
</div>
With a setup like this you would either bind to the display or conditional rendering. Either way, I don’t feel like a switch is the right approach. Why not just use if/then?
So for every click forward you add 1 to the currentStep. If you click back, like in @ jivdbroe modal , you subtract 1, and if you exit the wizard, you reset the variable back to 1 (so when you come back it starts back on step 1). Per jivdbroe last comment, you need to setup this routing to properly navigate the steps. Once you have this setup, you can move on to controlling the display of the steps.
Then you use the currentStep value to control your steps and the contents of each step. For the respective step you would probably have a formula like, if(currentStep = X, "flex", "none") if using display if(currentStep = X, true, false) if using conditional rendering where X is the value of the step you want to display. That will control whether to display the contents of Step 1, 2 or 3. As for the step progress, you’d add an “active” state to each step and set the criteria for that state to if(currentStep = X, true, false)