├── LICENSE.txt ├── README.md ├── index.html ├── script.js └── style.css /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2022 by Emran Khan (https://codepen.io/emrankhan016/pen/vdNzXm) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bootstrap Multi step form with progress bar 2 | 3 | ![Image alt text](https://i.ibb.co/FKcWf8f/demo.png) 4 | 5 | This is an example of a multi-step form with an animated progress bar, designed using CSS, HTML, JavaScript, and Bootstrap framework. 6 | Click [Here](https://codepen.io/emrankhan016/full/vdNzXm) to see demo and edit. 7 | 8 | Feel free to create an issue if you find any bug. You can also contribute if you want to. :) 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - Bootstrap Multi step form with progress bar 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 |
20 |

Verification Process

21 |

In order to use this service, you have to complete this verification process

22 |
23 | 24 | 29 | 30 |
31 |

Setup your phone

32 |
We will send you a SMS. Input the code to verify.
33 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 |
42 | 43 |
A secret code is sent to your phone.
Please enter it here.
44 |
45 |
46 | 47 | 48 | 49 | 50 |
51 | 52 | 53 |
54 |
55 |

Verify Your Identity

56 |
Please upload any of these documents to verify your Identity.
57 |
58 |

Govt. ID card
PassPort
Driving License.

59 | 60 |
61 |
62 |
63 | 64 | 65 |
66 |
67 | 72 | 73 | 74 |
75 |
76 |

Create Security Questions

77 |
Please update your account with security questions
78 |
79 | 84 |
85 |
86 | 87 |
88 |
89 | 94 |
95 |
96 | 97 |
98 | 99 | Finish 100 |
101 |
102 |
103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | ;(function($) { 2 | "use strict"; 3 | 4 | //* Form js 5 | function verificationForm(){ 6 | //jQuery time 7 | var current_fs, next_fs, previous_fs; //fieldsets 8 | var left, opacity, scale; //fieldset properties which we will animate 9 | var animating; //flag to prevent quick multi-click glitches 10 | 11 | $(".next").click(function () { 12 | if (animating) return false; 13 | animating = true; 14 | 15 | current_fs = $(this).parent(); 16 | next_fs = $(this).parent().next(); 17 | 18 | //activate next step on progressbar using the index of next_fs 19 | $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 20 | 21 | //show the next fieldset 22 | next_fs.show(); 23 | //hide the current fieldset with style 24 | current_fs.animate({ 25 | opacity: 0 26 | }, { 27 | step: function (now, mx) { 28 | //as the opacity of current_fs reduces to 0 - stored in "now" 29 | //1. scale current_fs down to 80% 30 | scale = 1 - (1 - now) * 0.2; 31 | //2. bring next_fs from the right(50%) 32 | left = (now * 50) + "%"; 33 | //3. increase opacity of next_fs to 1 as it moves in 34 | opacity = 1 - now; 35 | current_fs.css({ 36 | 'transform': 'scale(' + scale + ')', 37 | 'position': 'absolute' 38 | }); 39 | next_fs.css({ 40 | 'left': left, 41 | 'opacity': opacity 42 | }); 43 | }, 44 | duration: 800, 45 | complete: function () { 46 | current_fs.hide(); 47 | animating = false; 48 | }, 49 | //this comes from the custom easing plugin 50 | easing: 'easeInOutBack' 51 | }); 52 | }); 53 | 54 | $(".previous").click(function () { 55 | if (animating) return false; 56 | animating = true; 57 | 58 | current_fs = $(this).parent(); 59 | previous_fs = $(this).parent().prev(); 60 | 61 | //de-activate current step on progressbar 62 | $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); 63 | 64 | //show the previous fieldset 65 | previous_fs.show(); 66 | //hide the current fieldset with style 67 | current_fs.animate({ 68 | opacity: 0 69 | }, { 70 | step: function (now, mx) { 71 | //as the opacity of current_fs reduces to 0 - stored in "now" 72 | //1. scale previous_fs from 80% to 100% 73 | scale = 0.8 + (1 - now) * 0.2; 74 | //2. take current_fs to the right(50%) - from 0% 75 | left = ((1 - now) * 50) + "%"; 76 | //3. increase opacity of previous_fs to 1 as it moves in 77 | opacity = 1 - now; 78 | current_fs.css({ 79 | 'left': left 80 | }); 81 | previous_fs.css({ 82 | 'transform': 'scale(' + scale + ')', 83 | 'opacity': opacity 84 | }); 85 | }, 86 | duration: 800, 87 | complete: function () { 88 | current_fs.hide(); 89 | animating = false; 90 | }, 91 | //this comes from the custom easing plugin 92 | easing: 'easeInOutBack' 93 | }); 94 | }); 95 | 96 | $(".submit").click(function () { 97 | return false; 98 | }) 99 | }; 100 | 101 | //* Add Phone no select 102 | function phoneNoselect(){ 103 | if ( $('#msform').length ){ 104 | $("#phone").intlTelInput(); 105 | $("#phone").intlTelInput("setNumber", "+880"); 106 | }; 107 | }; 108 | //* Select js 109 | function nice_Select(){ 110 | if ( $('.product_select').length ){ 111 | $('select').niceSelect(); 112 | }; 113 | }; 114 | /*Function Calls*/ 115 | verificationForm (); 116 | phoneNoselect (); 117 | nice_Select (); 118 | })(jQuery); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*font Variables*/ 3 | /*Color Variables*/ 4 | @import url("https://fonts.googleapis.com/css?family=Roboto:300i,400,400i,500,700,900"); 5 | .multi_step_form { 6 | background: #f6f9fb; 7 | display: block; 8 | overflow: hidden; 9 | } 10 | .multi_step_form #msform { 11 | text-align: center; 12 | position: relative; 13 | padding-top: 50px; 14 | min-height: 820px; 15 | max-width: 810px; 16 | margin: 0 auto; 17 | background: #ffffff; 18 | z-index: 1; 19 | } 20 | .multi_step_form #msform .tittle { 21 | text-align: center; 22 | padding-bottom: 55px; 23 | } 24 | .multi_step_form #msform .tittle h2 { 25 | font: 500 24px/35px "Roboto", sans-serif; 26 | color: #3f4553; 27 | padding-bottom: 5px; 28 | } 29 | .multi_step_form #msform .tittle p { 30 | font: 400 16px/28px "Roboto", sans-serif; 31 | color: #5f6771; 32 | } 33 | .multi_step_form #msform fieldset { 34 | border: 0; 35 | padding: 20px 105px 0; 36 | position: relative; 37 | width: 100%; 38 | left: 0; 39 | right: 0; 40 | } 41 | .multi_step_form #msform fieldset:not(:first-of-type) { 42 | display: none; 43 | } 44 | .multi_step_form #msform fieldset h3 { 45 | font: 500 18px/35px "Roboto", sans-serif; 46 | color: #3f4553; 47 | } 48 | .multi_step_form #msform fieldset h6 { 49 | font: 400 15px/28px "Roboto", sans-serif; 50 | color: #5f6771; 51 | padding-bottom: 30px; 52 | } 53 | .multi_step_form #msform fieldset .intl-tel-input { 54 | display: block; 55 | background: transparent; 56 | border: 0; 57 | box-shadow: none; 58 | outline: none; 59 | } 60 | .multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag { 61 | padding: 0 20px; 62 | background: transparent; 63 | border: 0; 64 | box-shadow: none; 65 | outline: none; 66 | width: 65px; 67 | } 68 | .multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow { 69 | border: 0; 70 | } 71 | .multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow:after { 72 | content: ""; 73 | position: absolute; 74 | top: 0; 75 | right: 0; 76 | font: normal normal normal 24px/7px Ionicons; 77 | color: #5f6771; 78 | } 79 | .multi_step_form #msform fieldset #phone { 80 | padding-left: 80px; 81 | } 82 | .multi_step_form #msform fieldset .form-group { 83 | padding: 0 10px; 84 | } 85 | .multi_step_form #msform fieldset .fg_2, .multi_step_form #msform fieldset .fg_3 { 86 | padding-top: 10px; 87 | display: block; 88 | overflow: hidden; 89 | } 90 | .multi_step_form #msform fieldset .fg_3 { 91 | padding-bottom: 70px; 92 | } 93 | .multi_step_form #msform fieldset .form-control, .multi_step_form #msform fieldset .product_select { 94 | border-radius: 3px; 95 | border: 1px solid #d8e1e7; 96 | padding: 0 20px; 97 | height: auto; 98 | font: 400 15px/48px "Roboto", sans-serif; 99 | color: #5f6771; 100 | box-shadow: none; 101 | outline: none; 102 | width: 100%; 103 | } 104 | .multi_step_form #msform fieldset .form-control.placeholder, .multi_step_form #msform fieldset .product_select.placeholder { 105 | color: #5f6771; 106 | } 107 | .multi_step_form #msform fieldset .form-control:-moz-placeholder, .multi_step_form #msform fieldset .product_select:-moz-placeholder { 108 | color: #5f6771; 109 | } 110 | .multi_step_form #msform fieldset .form-control::-moz-placeholder, .multi_step_form #msform fieldset .product_select::-moz-placeholder { 111 | color: #5f6771; 112 | } 113 | .multi_step_form #msform fieldset .form-control::-webkit-input-placeholder, .multi_step_form #msform fieldset .product_select::-webkit-input-placeholder { 114 | color: #5f6771; 115 | } 116 | .multi_step_form #msform fieldset .form-control:hover, .multi_step_form #msform fieldset .form-control:focus, .multi_step_form #msform fieldset .product_select:hover, .multi_step_form #msform fieldset .product_select:focus { 117 | border-color: #5cb85c; 118 | } 119 | .multi_step_form #msform fieldset .form-control:focus.placeholder, .multi_step_form #msform fieldset .product_select:focus.placeholder { 120 | color: transparent; 121 | } 122 | .multi_step_form #msform fieldset .form-control:focus:-moz-placeholder, .multi_step_form #msform fieldset .product_select:focus:-moz-placeholder { 123 | color: transparent; 124 | } 125 | .multi_step_form #msform fieldset .form-control:focus::-moz-placeholder, .multi_step_form #msform fieldset .product_select:focus::-moz-placeholder { 126 | color: transparent; 127 | } 128 | .multi_step_form #msform fieldset .form-control:focus::-webkit-input-placeholder, .multi_step_form #msform fieldset .product_select:focus::-webkit-input-placeholder { 129 | color: transparent; 130 | } 131 | .multi_step_form #msform fieldset .product_select:after { 132 | display: none; 133 | } 134 | .multi_step_form #msform fieldset .product_select:before { 135 | content: ""; 136 | position: absolute; 137 | top: 0; 138 | right: 20px; 139 | font: normal normal normal 24px/48px Ionicons; 140 | color: #5f6771; 141 | } 142 | .multi_step_form #msform fieldset .product_select .list { 143 | width: 100%; 144 | } 145 | .multi_step_form #msform fieldset .done_text { 146 | padding-top: 40px; 147 | } 148 | .multi_step_form #msform fieldset .done_text .don_icon { 149 | height: 36px; 150 | width: 36px; 151 | line-height: 36px; 152 | font-size: 22px; 153 | margin-bottom: 10px; 154 | background: #5cb85c; 155 | display: inline-block; 156 | border-radius: 50%; 157 | color: #ffffff; 158 | text-align: center; 159 | } 160 | .multi_step_form #msform fieldset .done_text h6 { 161 | line-height: 23px; 162 | } 163 | .multi_step_form #msform fieldset .code_group { 164 | margin-bottom: 60px; 165 | } 166 | .multi_step_form #msform fieldset .code_group .form-control { 167 | border: 0; 168 | border-bottom: 1px solid #a1a7ac; 169 | border-radius: 0; 170 | display: inline-block; 171 | width: 30px; 172 | font-size: 30px; 173 | color: #5f6771; 174 | padding: 0; 175 | margin-right: 7px; 176 | text-align: center; 177 | line-height: 1; 178 | } 179 | .multi_step_form #msform fieldset .passport { 180 | margin-top: -10px; 181 | padding-bottom: 30px; 182 | position: relative; 183 | } 184 | .multi_step_form #msform fieldset .passport .don_icon { 185 | height: 36px; 186 | width: 36px; 187 | line-height: 36px; 188 | font-size: 22px; 189 | position: absolute; 190 | top: 4px; 191 | right: 0; 192 | background: #5cb85c; 193 | display: inline-block; 194 | border-radius: 50%; 195 | color: #ffffff; 196 | text-align: center; 197 | } 198 | .multi_step_form #msform fieldset .passport h4 { 199 | font: 500 15px/23px "Roboto", sans-serif; 200 | color: #5f6771; 201 | padding: 0; 202 | } 203 | .multi_step_form #msform fieldset .input-group { 204 | padding-bottom: 40px; 205 | } 206 | .multi_step_form #msform fieldset .input-group .custom-file { 207 | width: 100%; 208 | height: auto; 209 | } 210 | .multi_step_form #msform fieldset .input-group .custom-file .custom-file-label { 211 | width: 168px; 212 | border-radius: 5px; 213 | cursor: pointer; 214 | font: 700 14px/40px "Roboto", sans-serif; 215 | border: 1px solid #99a2a8; 216 | text-align: center; 217 | transition: all 300ms linear 0s; 218 | color: #5f6771; 219 | } 220 | .multi_step_form #msform fieldset .input-group .custom-file .custom-file-label i { 221 | font-size: 20px; 222 | padding-right: 10px; 223 | } 224 | .multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:hover, .multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:focus { 225 | background: #5cb85c; 226 | border-color: #5cb85c; 227 | color: #fff; 228 | } 229 | .multi_step_form #msform fieldset .input-group .custom-file input { 230 | display: none; 231 | } 232 | .multi_step_form #msform fieldset .file_added { 233 | text-align: left; 234 | padding-left: 190px; 235 | padding-bottom: 60px; 236 | } 237 | .multi_step_form #msform fieldset .file_added li { 238 | font: 400 15px/28px "Roboto", sans-serif; 239 | color: #5f6771; 240 | } 241 | .multi_step_form #msform fieldset .file_added li a { 242 | color: #5cb85c; 243 | font-weight: 500; 244 | display: inline-block; 245 | position: relative; 246 | padding-left: 15px; 247 | } 248 | .multi_step_form #msform fieldset .file_added li a i { 249 | font-size: 22px; 250 | padding-right: 8px; 251 | position: absolute; 252 | left: 0; 253 | transform: rotate(20deg); 254 | } 255 | .multi_step_form #msform #progressbar { 256 | margin-bottom: 30px; 257 | overflow: hidden; 258 | } 259 | .multi_step_form #msform #progressbar li { 260 | list-style-type: none; 261 | color: #99a2a8; 262 | font-size: 9px; 263 | width: calc(100%/3); 264 | float: left; 265 | position: relative; 266 | font: 500 13px/1 "Roboto", sans-serif; 267 | } 268 | .multi_step_form #msform #progressbar li:nth-child(2):before { 269 | content: ""; 270 | } 271 | .multi_step_form #msform #progressbar li:nth-child(3):before { 272 | content: ""; 273 | } 274 | .multi_step_form #msform #progressbar li:before { 275 | content: ""; 276 | font: normal normal normal 30px/50px Ionicons; 277 | width: 50px; 278 | height: 50px; 279 | line-height: 50px; 280 | display: block; 281 | background: #eaf0f4; 282 | border-radius: 50%; 283 | margin: 0 auto 10px auto; 284 | } 285 | .multi_step_form #msform #progressbar li:after { 286 | content: ""; 287 | width: 100%; 288 | height: 10px; 289 | background: #eaf0f4; 290 | position: absolute; 291 | left: -50%; 292 | top: 21px; 293 | z-index: -1; 294 | } 295 | .multi_step_form #msform #progressbar li:last-child:after { 296 | width: 150%; 297 | } 298 | .multi_step_form #msform #progressbar li.active { 299 | color: #5cb85c; 300 | } 301 | .multi_step_form #msform #progressbar li.active:before, .multi_step_form #msform #progressbar li.active:after { 302 | background: #5cb85c; 303 | color: white; 304 | } 305 | .multi_step_form #msform .action-button { 306 | background: #5cb85c; 307 | color: white; 308 | border: 0 none; 309 | border-radius: 5px; 310 | cursor: pointer; 311 | min-width: 130px; 312 | font: 700 14px/40px "Roboto", sans-serif; 313 | border: 1px solid #5cb85c; 314 | margin: 0 5px; 315 | text-transform: uppercase; 316 | display: inline-block; 317 | } 318 | .multi_step_form #msform .action-button:hover, .multi_step_form #msform .action-button:focus { 319 | background: #405867; 320 | border-color: #405867; 321 | } 322 | .multi_step_form #msform .previous_button { 323 | background: transparent; 324 | color: #99a2a8; 325 | border-color: #99a2a8; 326 | } 327 | .multi_step_form #msform .previous_button:hover, .multi_step_form #msform .previous_button:focus { 328 | background: #405867; 329 | border-color: #405867; 330 | color: #fff; 331 | } --------------------------------------------------------------------------------