CSS HTML jQuery

Multi step form with bootstrap and jquery

View updated version with form and validation Multi step form with progress bar and validation

Its a tea time snippet. Was working on my project which required multi step form widget. I searched around and though to create one myself. So i started and it took only few minits to create one for me. Sorry to say there are no forms and validations inside, May be in my next post i will present a fully featured multi step form script, till then i am sharing this with you, just to get you started.
Lets do it step by step

Include bootstrap, jquery javascripts and css

Add bootstrap progress bar

Notice class progress-bar-striped and active, they both have roles. progress-bar-striped makes progress bar stripped and class active adds progress animation to it.

HTML for steps widget and buttons

And now the heart of the widget, jQuery code

View updated version with form and validation Multi step form with progress bar and validation

3 Comments

Leave a Comment

*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

Shares

Let your friends know what are you reading

Share this post with your friends!