Preview Loading...
Script Action
Bootstrap 4 CSS https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css COPY CDN
Bootstrap 4 JS https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js COPY CDN
Icons https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css COPY CDN
JS https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js COPY CDN

Add Comment/Questions

2 day's ago

strapwizal ( strapwizal-67162 )

Hi Omkar, this form is brilliant but I cannot get it to work, got the css and html sorted but problem is with jquery, is everything included with it or do I need a specific plugin to make it work..? Many thanks Steve

1 month ago

Chukwudi Nnodim ( chukwudi-nnodim-47437 )

@OmkarBailkeri This is brilliant! I love it! I tried to add up to 7 steps to my form but #progresssbar li did not extend to the full width of the page even though I reduced the width from 25% to 10%. it's not looking nice unless I just stop the steps at just 5! I really need help here. Would be so glad if I'm assisted.

5 month's ago

Jihad Chakrane ( jihad-chakrane-80974 )

hello, any idea how can i add validation input in JS for each step ? thx

9 month's ago

Adewunmi Agbato ( adewunmi-agbato-71500 )

@OmkarBailkeri This is wonderful. Simple to use and modify. More inspiration! How can i incorporate validation at each fieldset when next button is cclicked?

11 month's ago

Vivek Singh ( vivek-singh-97358 )

it is really good brother... i would like to know how to prevent it from going to another page if fields are empty

1 year ago

Kian Caliskan ( kian-caliskan-35329 )

Hi Omkar, howe make this form with validation? Thank you for any tips...

1 year ago

Dimitris Klagkos ( dimitris-klagkos-17935 )

Hi @omkar-bailkeri83131 thanks for the code :) One small question. I have a rather large form, and in mobile view the user has to scroll down in order to fill in everything and go to the next step. When you press next though, you stay at the bottom of the page and you have to scroll up in order to see the new form. Is there a way to scroll at the top of the page when you press next/previous?

1 year ago

Omkar Bailkeri ( omkar-bailkeri83131 )

Hi @joe-58150 ! I m glad you liked my work. Now, for adding the fifth fieldset, just add another (li) and (fieldset) after the fourth one. Then set the CSS of (#progressbar li) by changing the width to 20%. This will solve your problem. Thank you :)

1 year ago

Joe ( joe-58150 )

Hi Omkar, great work you're doing here! I'm trying to add a fifth fieldset but the li appears below li's the other 's and I would like them to appear on one line. I have tried editing the css and js code but haven't been able to fix it yet. Any idea on how to accomplish this? Thanks!

1 year ago

Joe ( joe-58150 )

Hi Omkar, great work you're doing here! I'm trying to add a fifth fieldset but the appears below the other 's and I would like them to appear on one line. I have tried editing the css and js code but haven't been able to fix it yet. Any idea on how to accomplish this? Thanks!

About this snippet

Bootstrap 4 Multi step form wizard snippet is created by Omkar Bailkeri using Bootstrap 4, Javascript. This snippet is free and open source hence you can use it in your project.Bootstrap 4 Multi step form wizard snippet example is best for all kind of projects.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.

Join BBBootstrap community

Contribute an awesome snippet to help other developer and designers