├── LICENSE ├── README.md ├── bg.png ├── example.html ├── footer-bg.png ├── jquery-multi-step-form.css ├── jquery-multi-step-form.js ├── msform_overlay.png └── msform_sprite.png /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Andrey Nikishaev 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 | jquery-multi-step-form 2 | ====================== 3 | 4 | Multi step form with progress bar for jquery 5 | -------------------------------------------------------------------------------- /bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creotiv/jquery-multi-step-form/539dbe6ceba653068c70e5123f47fdb291a21c84/bg.png -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Multi Step Form 7 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 36 |
37 |
38 |

Create your account

39 |

This is step 1

40 | 41 | 42 | 43 | 44 |
45 |
46 |
47 |
48 |

Social Profiles

49 |

Your presence on the social network

50 | 51 | 52 | 53 | 54 | 55 |
56 |
57 |
58 |
59 |

Personal Details

60 |

We will never sell it

61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 |
69 |
70 | 71 | 79 | 80 | -------------------------------------------------------------------------------- /footer-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creotiv/jquery-multi-step-form/539dbe6ceba653068c70e5123f47fdb291a21c84/footer-bg.png -------------------------------------------------------------------------------- /jquery-multi-step-form.css: -------------------------------------------------------------------------------- 1 | #multistepform { 2 | overflow:auto; 3 | width:100%; 4 | height:100%; 5 | } 6 | #multistepform .bg { 7 | width:100%; 8 | height:100%; 9 | background: url(msform_overlay.png); 10 | position: absolute; 11 | z-index:-5; 12 | } 13 | #multistepform .close { 14 | background-image: url(msform_sprite.png); 15 | position: absolute; 16 | top: 10px; 17 | right: 10px; 18 | width: 36px; 19 | height: 36px; 20 | cursor: pointer; 21 | z-index: 10000; 22 | } 23 | #multistepform-container { 24 | max-width: 800px; 25 | top:50px; 26 | margin: 0px auto; 27 | text-align: center; 28 | position: relative; 29 | } 30 | #multistepform-container .form { 31 | background: white; 32 | border: 0 none; 33 | border-radius: 8px; 34 | box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); 35 | padding: 20px 30px; 36 | 37 | width: 90%; 38 | margin: 0 5%; 39 | box-sizing: border-box; 40 | position: absolute; 41 | background: #fff url(footer-bg.png) 0px 100% repeat-x; 42 | } 43 | #multistepform-container .form:not(:first-of-type) { 44 | display: none; 45 | } 46 | .fs-title { 47 | font-size: 15px; 48 | text-transform: uppercase; 49 | color: #2C3E50; 50 | margin-bottom: 10px; 51 | } 52 | .fs-subtitle { 53 | font-weight: normal; 54 | font-size: 13px; 55 | color: #666; 56 | margin-bottom: 20px; 57 | } 58 | #multistepform-progressbar { 59 | margin-bottom: 10px; 60 | overflow: hidden; 61 | counter-reset: step; 62 | text-align:center; 63 | } 64 | #multistepform-progressbar li { 65 | list-style-type: none; 66 | color: white; 67 | text-transform: uppercase; 68 | font-size: 11px; 69 | padding: 0 15px; 70 | display:inline-block; 71 | position: relative; 72 | margin: 0 !important; 73 | padding-bottom: 15px; 74 | } 75 | #multistepform-progressbar li:before { 76 | content: counter(step); 77 | counter-increment: step; 78 | width: 24px; 79 | display: block; 80 | font-size: 12px; 81 | color: #333; 82 | background: white; 83 | border-radius: 12px; 84 | margin: 0 auto 5px auto; 85 | line-height: 24px; 86 | } 87 | #multistepform-progressbar li.active:before, #multistepform-progressbar li.active:after{ 88 | background: #27AE60; 89 | color: white; 90 | } 91 | 92 | #multistepform input, #multistepform textarea { 93 | padding: 15px; 94 | border: 1px solid #ccc; 95 | border-radius: 3px; 96 | margin-bottom: 10px; 97 | width: 100%; 98 | box-sizing: border-box; 99 | font-family: montserrat; 100 | color: #2C3E50; 101 | font-size: 13px; 102 | } 103 | /*buttons*/ 104 | #multistepform .button { 105 | width: 100px; 106 | background: #27AE60; 107 | font-weight: bold; 108 | color: white; 109 | border: 0 none; 110 | border-radius: 1px; 111 | cursor: pointer; 112 | padding: 10px 5px; 113 | margin: 10px 5px; 114 | } 115 | #multistepform .button:hover, #msform .button:focus { 116 | box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; 117 | } 118 | 119 | -------------------------------------------------------------------------------- /jquery-multi-step-form.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | var FORM = $.multistepform = function() { 3 | FORM.init.apply( this, arguments ); 4 | }; 5 | $.extend(FORM, { 6 | current_fs: false, 7 | next_fs: false, 8 | previous_fs: false, 9 | animating: false, 10 | 11 | defaults: { 12 | container:'', 13 | duration: 1000, 14 | form_url: '', 15 | form_method: 'POST', 16 | onClose:function(){}, 17 | }, 18 | init: function(opts) { 19 | FORM.opts = $.extend(true, {}, FORM.defaults, opts); 20 | if(FORM.opts['form_url']) { 21 | var cont = $(''); 22 | $('body').append(cont); 23 | cont.html('
'); 24 | $.get(FORM.opts['form_url'], function( data ) { 25 | $('#multistepform-container').html(data); 26 | FORM._show(); 27 | }); 28 | } else { 29 | var cont = $('#'+FORM.opts['container']).addClass('multistepform').css({ 30 | 'display':'none', 31 | 'position': 'absolute', 32 | 'top':0, 33 | 'width': '100%', 34 | 'height': '100%', 35 | 'z-index': 9999 36 | }); 37 | var data = cont.html(); 38 | cont.html('
'+data+'
'); 39 | FORM._show(); 40 | } 41 | }, 42 | _show: function() { 43 | FORM.current_fs = $($('#'+FORM.opts['container']).find('.form')[0]); 44 | $('#'+FORM.opts['container']+' .next').click(FORM.next); 45 | $('#'+FORM.opts['container']+' .previous').click(FORM.prev); 46 | $('#'+FORM.opts['container']+' .close').click(FORM.close); 47 | $('#'+FORM.opts['container']).show(); 48 | $('body').css({'overflow':'hidden'}); 49 | }, 50 | _next: function() { 51 | FORM.next_fs = FORM.current_fs.next(); 52 | 53 | //activate next step on progressbar using the index of next_fs 54 | $("#multistepform-progressbar li").eq($(".form").index(FORM.next_fs)).addClass("active"); 55 | 56 | //show the next fieldset 57 | FORM.next_fs.show(); 58 | //hide the current fieldset with style 59 | FORM.current_fs.animate({opacity: 0}, { 60 | step: function(now, mx) { 61 | //as the opacity of current_fs reduces to 0 - stored in "now" 62 | //1. scale current_fs down to 80% 63 | scale = 1 - (1 - now) * 0.2; 64 | //2. bring next_fs from the right(50%) 65 | left = (now * 50)+"%"; 66 | //3. increase opacity of next_fs to 1 as it moves in 67 | opacity = 1 - now; 68 | FORM.current_fs.css({'transform': 'scale('+scale+')'}); 69 | FORM.next_fs.css({'left': left, 'opacity': opacity}); 70 | }, 71 | duration: FORM.opts['duration'], 72 | complete: function(){ 73 | if(!FORM.next_fs[0]) { 74 | FORM._close(); 75 | } 76 | FORM.current_fs.hide(); 77 | FORM.current_fs = FORM.next_fs; 78 | FORM.animating = false; 79 | 80 | var curent_forms = FORM.current_fs.find('form'); 81 | for(var i=0;i