| 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 |
Preview Loading...
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!
Latest snippets
View all
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.
Download limit exceeded
You have exceeded a daily download limit. BBBootstrap.com offers every user to download 3 snippets daily.Upgrade to download unlimited snippets!
Upgrade - Go Pro
Say Thanks to Omkar Bailkeri
Our creators love hear from you and seeing how you've used their snippets. Show your appreciation by donating and following.
Join BBBootstrap community
Contribute an awesome snippet to help other developer and designers
Add Comment/Questions