If your signup form is big then It is good idea to divide user signup form in multiple parts. It’ll also improve user experience, As you have seen on many websites because Now a days multi-step form become more popular than regular forms. Tt more user friendly and convenient for new user. It provides step by step procedure so that new user can easily follow these steps and get registered quickly.
Creating responsive multi step form with progress bar
Follow following steps two create quick multi step form with progress bar using jQuery HTML, CSS
HTML
Create structure form your multi step form in html, Very first you need to create a form with fieldset tag in HTML, number of fieldset depends upon the steps you want to create. Also display progress bar.
CSS
Then styling the fieldset, inputs, buttons and other form elements and add some style to progress-bar and and progress-bar connectors.
JS
Finally, add jquery on page for handing events and adding animation on next and previous form. Remember it’ll display selected form at the moment not all.
<script> $(function() { //jQuery time var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties which we will animate var animating; //flag to prevent quick multi-click glitches $(".next").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); //activate next step on progressbar using the index of next_fs $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); //show the next fieldset next_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale current_fs down to 80% scale = 1 - (1 - now) * 0.2; //2. bring next_fs from the right(50%) left = (now * 50)+"%"; //3. increase opacity of next_fs to 1 as it moves in opacity = 1 - now; current_fs.css({'transform': 'scale('+scale+')'}); next_fs.css({'left': left, 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".previous").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); //de-activate current step on progressbar $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); //show the previous fieldset previous_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale previous_fs from 80% to 100% scale = 0.8 + (1 - now) * 0.2; //2. take current_fs to the right(50%) - from 0% left = ((1-now) * 50)+"%"; //3. increase opacity of previous_fs to 1 as it moves in opacity = 1 - now; current_fs.css({'left': left}); previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".submit").click(function(){ return false; }) }); script> |
See live demo and download source code.
See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.
