Multistep Form - Responsive Stepper

Ask us anything How do I?
, ,
1

I want to create a stepper which consist of a six steps but unfortunately I didn’t find a widget in weweb. Although I find a component from a kit but it’s not editable and also not responsive for the mobile. I’m unable to change the color or spacing etc.

Can anyone guide me how I can make a stepper and form? I want it to be responsive so it look good on desktop, tablet and mobile. If you know any alternative to it, please do let me know. Thank you!

2

Hi @ZUH852 :wave:

I would not use components in the beginning; they can make it more confusing if you are new to WeWeb. For this, you can start very simple:

  1. Create a “steps” variable to keep track of the steps
  2. Add one Form Container element with 3 divs inside: Step 1, Step 2 and Step 3.
  3. At the bottom of the Form Container, add the back and next buttons + submit (display and hide them based on the step variable)
  4. Increment/decrement the value of the variable by triggering a workflow on the buttons next and back.
  5. Display/hide the elements in the UI accordingly

Once you’re good, then you can turn it into a component; for instance, the different step items. Use conditional display and not rendering to avoid animation issues.

1 Like
3

Thanks but 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.

5
51003×217 7.57 KB

4

@ZUH852 we’ve just created something like what you’re looking for within WeWeb for a client.

image

I’m pretty tied up right now, but I can try to package it as a WeWeb component for the marketplace this month if that would be helpful.

5

@forgelab Yeah, that would be great. If you could just create a small video before that if you get time, I really thankful to you for this. I’m really struggling with this.