# Multistep Form - Responsive Stepper **URL:** \ **Category:** How do I?\ **Tags:** workflows, binding, design\ **Created:** [November 4, 2024, 6:32pm UTC](https://community.weweb.io/t/multistep-form-responsive-stepper/14332 "2024-11-04T18:32:41Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![ZUH852](https://avatars.discourse-cdn.com/v4/letter/z/4da419/32.png) [@ZUH852](https://community.weweb.io/u/ZUH852)\ **Post date:** [November 4, 2024, 6:32pm UTC](https://community.weweb.io/t/multistep-form-responsive-stepper/14332/1 "2024-11-04T18:32:41Z")
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! ---
**Author:** ![DanielL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/daniell/32/13398_2.png) [@DanielL](https://community.weweb.io/u/DanielL)\ **Post date:** [November 5, 2024, 12:24pm UTC](https://community.weweb.io/t/multistep-form-responsive-stepper/14332/2 "2024-11-05T12:24:16Z")
Hi @ZUH852 👋 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. ---
**Author:** ![ZUH852](https://avatars.discourse-cdn.com/v4/letter/z/4da419/32.png) [@ZUH852](https://community.weweb.io/u/ZUH852)\ **Post date:** [November 5, 2024, 1:20pm UTC](https://community.weweb.io/t/multistep-form-responsive-stepper/14332/3 "2024-11-05T13:20:05Z")
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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/380e43bdb19af029b723362bdf6cc10716c5b11a.png) ---
**Author:** ![forgelab](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/forgelab/32/9671_2.png) [@forgelab](https://community.weweb.io/u/forgelab)\ **Post date:** [November 6, 2024, 3:45am UTC](https://community.weweb.io/t/multistep-form-responsive-stepper/14332/4 "2024-11-06T03:45:11Z")
@ZUH852 we’ve just created something like what you’re looking for within WeWeb for a client. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/optimized/2X/b/beaabd962f06f19d89cb954b4ff603e9e2090e96_2_690x47.png) 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. ---
**Author:** ![ZUH852](https://avatars.discourse-cdn.com/v4/letter/z/4da419/32.png) [@ZUH852](https://community.weweb.io/u/ZUH852)\ **Post date:** [November 6, 2024, 9:46am UTC](https://community.weweb.io/t/multistep-form-responsive-stepper/14332/5 "2024-11-06T09:46:34Z")
@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. ---
**Author:** ![Antoinemazu](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/antoinemazu/32/13392_2.png) [@Antoinemazu](https://community.weweb.io/u/Antoinemazu)\ **Post date:** [November 13, 2025, 1:51pm UTC](https://community.weweb.io/t/multistep-form-responsive-stepper/14332/6 "2025-11-13T13:51:40Z")
I created one here ! Feel free to use it 🙂 [https://app.antoinemazu.dev/components/stepper](https://app.antoinemazu.dev/components/stepper)