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

  18. @bichette Hi, may i know how you counter the problem? Currently, i have same problem as you

  19. Can you help me. On page refresh it goes back to first step. I want it to remain on same step I was working. Like If i was on step 3 and page get refreshed I want it to be on 3rd step only. Thanks in advance.

  20. Hey, I'm a programming student working on a project, can someone help me? When i click the next and previous button it doesn't work, I saw a comment with the same issue but didn't post the solution, can someone please help, thank you very much!

  21. Mayor @mayordwells on

    @at0m1cPT Hi did you add jQuery-ui to your imports? It probably doesn't work because of the animation included in the Next and Previous behavior.

  22. Mayor @mayordwells on

    @kapilrajput Hi I'm here because of a problem similar to yours, I want to add links to each steps so as to be able to navigate to any of the steps whenever required. Were you able to solve the problem with staying on the same page upon page refresh? If yes, how? @atakan Please take a look at my question on Stackoverflow - https://stackoverflow.com/questions/50198845/multi-step-form-integration-into-a-ruby-on-rails-project-using-jquery, any suggestion for a solution will be so much appreciated. Thanks

  23. Hi I am trying to add validation . Used Css 3 required but it keeps on going to next page for exmaple, I want to validate test fields but it is not allwoing me to do so . tried different stuff but still keeps on happening.

  24. Hi anyone able to add validation there?

  25. That an awesome design :)

  26. @atakan can you please advise if validation is achievable or not?

  27. this is great but not mobile compatible..... any ideas...?

  28. @atakan Great code! But, if we would link the numbers on each step to skip some steps (for example go directly from step 3 to 1), how should we change the code? Thanks!

  29. Hi Can you help me by using Validation in this form. Note: We need to validate at each fieldset. (like name, email for fieldset1)

    Thanks for this amazing msf

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

You must be logged in to comment.