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 ?
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 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.
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!
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.
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.