cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

Got long forms on your website ? Break them up into smaller logical sections and convert it into a multi-step form with a cool progress bar. Could work for lengthy processes like registration, checkout, profile fillups, 2-factor authentication logins, etc.


  1. Love this mate, really elegant solution

  2. Design capability is very strong. But not enough and flexible in terms of developability.

  3. Could please help me, how can I navigate from step instead of previous button

  4. Hi, It's great. I just need one change. Will it be possible to make the progressbar numbers clickable and they will take the user to the relevant slide? Please help.


  5. Great. Thanksa lot for this pen. I just made a little change on this.

    fieldsets are absolute positioned and this can be a problem on design. I made fieldsets relative positioned on Css and made an addition on "next" button's js command. It adds position:relative css when user clicks next button.

    current_fs.css({'transform': 'scale('+scale+')','position':'absolute'});

    Maybe this can help further users of your pen.

    Thanks again bro.

  6. @tinyamasisurum0

    I changed my codes.

    Thanks for feedback :)

  7. @atakan

    Great to see that.

    iyi çalışmalar dilerim.

  8. @tinyamasisurum0 and @atakan


    I forked the code to manipulate the previous button's functions to keep things consistent.... I was noticing that the previous fieldset was stuck on position absolute!

  9. @atakan Hello Atakan,

    I have a question about your Multi Step Wizard. I would like to know if it has subwizard capability.. Step 1 -> sub1, sub2 . Step 2 -> sub1, sub2. Step 3 -> sub1, sub2.

    The key thing is that the indicator does not change until substeps are complete within the slide.

  10. Hi, I'm new in coding, so I've just wanted to test your pen but the button next and previous seem not working. Somebody can explain me what I'm doing wrong? Thanks for the really great work here!

    EDIT: find my mistake, nevermind

  11. If anyone is interested check out the javascript plugin i wrote for multi step forms with jquery validation for each step: https://www.npmjs.com/package/multi-step-form-js

    use your own styling for progress and active steps, simply add the msf classes to the appropriate divs and call the javascript function. install via npm or download form github. Let me know what you think.

  12. Great work! One problem I noticed however is that if you add a div under the form and use the previous button, then the height messes up and the div content shows up behind the form. Has anyone figured out a solution for this? Thanks.

  13. @atakan I was hoping to just have it fade in rather than slide in. How would I go about doing this?


  14. @chrisack If you add this code: previous_fs.css({'position':'relative'}); to the complete function under the previous button click function it takes care of that issue.

    complete: function(){ current_fs.hide(); animating = false; previous_fs.css({'position':'relative'});

  15. Ian @KipchirchirIan on

    @CThePants, @chrisack changing this line seems to also solve the issue on my side.

    opacity = 1 - now;
    current_fs.css({'transform': 'scale('+scale+')', 'position': 'relative'});

    Changed position absolute to relative.

  16. @atakan can you please help me with this ? How can the submit button function ? I cannot insert data even if the query's exist . I think the problem is in the form ?

  17. Thanks you by the way for the design

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.