In this tutorial, We will explain how to create multi step form based on Semantic UI, HTML5, CSS3 and jQuery. It will be useful for all type of application like admin panel, CRM, CMS etc. It is light weight and compatible with all browsers and devices. The next and back button in the wizards helps you to navigate between the contents. When we click on next we validate the first part of the form, after success validation it moves on to the next step of the form and continues. It is more convenient and step by step procedures for the user to follow easily.

Here we have created the registeration form with 3 Step.

Steps Includes:

• Step 1- Personal info.
• Step 2- Security Info.
• Step 3- Address Info

In last step, as user clicks submit button various details given by user get submitted.

Javacript Validation:

Final Submission:

Features:

• 1. Designed with Sementic UI
• 2. Javascript form validation
• 3. Setp Progress Bar
• 4. Nice loading effect
• 5. Next and Back buttons
• 6. Google fonts used
• 7. Supports HTML5 format
• 8. Easy and understandable code for Web Designers & Developers
• 9. Browser friendly(Supports Chrome, Firefox, Opera, Edge, and Safari)
• 10. Fully responsive

Step1.html

    

                      

                        First Name
                        
                      
                      

                        Last Name
                        
                      
                      

                        Father Name
                        
                      
                      

                        Gender
                        

                          

                            
                             Male
                          
                        
                        

                          

                            
                             Female
                          
                        
                      
                      
                          
                          Next
                      
                  

Custom.js

/*Jquery starts here*/
$(document).ready(function(){
    $('select.dropdown').dropdown();
    $('.ui.radio.checkbox').checkbox();
    $('.message .close')
      .on('click', function() {
        $(this)
          .closest('.message')
          .transition('fade')
        ;
    });
});
/*Jquery ends here*/

/*Javascript starts here*/
//Define some variables for hold form fields data
var fname, lname, ftname, gender, password, cpassword, address, postalzip, country;

//Process step one
function processStepOne()
{

	$('#error-msg').removeClass('hidden');   
   //Store first name into a local variable
    fname = $.trim($("#first-name").val());
    //Store last name into a local variable
    lname = $.trim($("#last-name").val());
    //Store father name into a local variable
    ftname = $.trim($("#father-name").val());
    
    //Check empty field on click of next button
    if(fname == "")
    {
       //Show the error message
       $("#error-msg").css({
           'display':'block'
       });
    }
    else if(lname == "")
    {
       //Show the error message
       $("#error-msg").css({
           'display':'block'
       });
    }
    else if(ftname == "")
    {
       //Show the error message
       $("#error-msg").css({
           'display':'block'
       });
    }
    else
    {
        //Show the loader
        $('#loader').css({
            'display':'block'
        });
        setTimeout(function(){
            //hide the loader
            $('#loader').css({
                'display':'none'
            });
            //Remove the user icon from the first step progress bar
            $(".step_one > i").removeClass('user');
            //Add the check icon to the first step progress bar
            $(".step_one > i").addClass('checkmark box').css('color','green');
            //Add caption completed to the first step bar
            $(".step_one .description").html('Completed').css('color','green');
            //Remove the active from the first step progress bar
            $(".step_one").removeClass('active');
            //Remove the disabled class from the second step progress bar
            $(".step_two").removeClass('disabled');
            //Add the active class to the second step progress bar
            $(".step_two").addClass('active');
            //Hide the error message
            $("#error-msg").css({
               'display':'none'
            });
            //Show the second step
            $("#step_two").css({
                'display':'block'
            });
            //Hide the first step
            $("#step_one").css({
                'display':'none'
            });
        },1500);
    }
}

//Back to step one
function backToStepOne()
{
    //Show the loader
    $('#loader').css({
        'display':'block'
    });
    setTimeout(function(){
        //hide the loader
        $('#loader').css({
            'display':'none'
        });
        //Hide the second step
        $("#step_two").css({
            'display':'none'
        });
        //Show the first step
        $("#step_one").css({
            'display':'block'
        });
        //Remove the check icon from the first step progress bar
        $(".step_one > i").removeClass('checkmark box');
        //Add the user icon to the first step progress bar
        $(".step_one > i").addClass('user').css('color','black');
        //Remove caption completed from the first step bar
        $(".step_one .description").html('');
        //Remove the active from the second step progress bar
        $(".step_two").removeClass('active');
        //Add the disabled class from the second step progress bar
        $(".step_two").addClass('disabled');
        //Add the active class to the first step progress bar
        $(".step_one").addClass('active');
        //Hide the error message
        $("#error-msg").css({
           'display':'none'
        });
    },1500);
}

//Process step two
function processStepTwo()
{
	$('#error-msg').removeClass('hidden'); 
    //Store password into a local variable
    password = $.trim($("#password").val());
    //Store confirm password into a local variable
    cpassword = $.trim($("#confirm-password").val());
    
    //Check empty field on click of next button
    if(password == "")
    {
       //Show the error message
       $("#error-msg").css({
           'display':'block'
       });
    }
    else if(cpassword == "")
    {
       //Show the error message
       $("#error-msg").css({
           'display':'block'
       });
    }
    else
    {
        if(password == cpassword)
        {
            //Show the loader
            $('#loader').css({
                'display':'block'
            });
            setTimeout(function(){
                //hide the loader
                $('#loader').css({
                    'display':'none'
                });
                //Remove the user icon from the second step progress bar
                $(".step_two > i").removeClass('shield');
                //Add the check icon to the second step progress bar
                $(".step_two > i").addClass('checkmark box').css('color','green');
                //Add caption completed to the second step progress bar
                $(".step_two .description").html('Completed').css('color','green');
                //Remove the active from the second step progress bar
                $(".step_two").removeClass('active');
                //Remove the disabled class from the third step progress bar
                $(".step_three").removeClass('disabled');
                //Add the active class to the third step progress bar
                $(".step_three").addClass('active');
                //Hide the error message
                $("#error-msg").css({
                   'display':'none'
                });
                //Show the third step
                $("#step_three").css({
                    'display':'block'
                });
                //Hide the second step
                $("#step_two").css({
                    'display':'none'
                });
            },1500);
        }
        else
        {
           //Show the alert instead of an error message
           alert('Sorry! both passwords must have same values.');
           //Note: Instead of alert here you can show an error message just like empty field message
        }
    }
}

//Back to step two
function backToStepTwo()
{
    //Show the loader
    $('#loader').css({
        'display':'block'
    });
    setTimeout(function(){
        //hide the loader
        $('#loader').css({
            'display':'none'
        });
        //Hide the third step
        $("#step_three").css({
            'display':'none'
        });
        //Show the second step
        $("#step_two").css({
            'display':'block'
        });
        //Remove the check icon from the second step progress bar
        $(".step_two > i").removeClass('checkmark box');
        //Add the shield icon to the second step progress bar
        $(".step_two > i").addClass('shield').css('color','black');
        //Remove caption completed from the second step progress bar
        $(".step_two .description").html('');
        //Remove the active from the third step progress bar
        $(".step_three").removeClass('active');
        //Add the disabled class to the third step progress bar
        $(".step_three").addClass('disabled');
        //Add the active class to the second step progress bar
        $(".step_two").addClass('active');
        //Hide the error message
        $("#error-msg").css({
           'display':'none'
        });
    },1500);
}

//Process step three
function processStepThree()
{
	$('#error-msg').removeClass('hidden'); 
    //Store password into a local variable
    address = $.trim($("#address").val());
    //Store postal ZIP into a local variable
    postalzip = $.trim($("#postal-zip").val());
    //Store country into a local variable
    country = $.trim($("#country").val());
    
    //Check empty field on click of next button
    if(address == "")
    {
       //Show the error message
       $("#error-msg").css({
           'display':'block'
       });
    }
    else if(postalzip == "")
    {
       //Show the error message
       $("#error-msg").css({
           'display':'block'
       });
    }
    else if(country == "")
    {
       //Show the error message
       $("#error-msg").css({
           'display':'block'
       });
    }
    else
    {
        //Show the loader
        $('#loader').css({
            'display':'block'
        });
        setTimeout(function(){
            //hide the loader
            $('#loader').css({
                'display':'none'
            });
            //Remove the map icon from the third step progress bar
            $(".step_three > i").removeClass('map');
            //Add the check icon to the third step progress bar
            $(".step_three > i").addClass('checkmark box').css('color','green');
            //Add caption completed to the third step progress bar
            $(".step_three .description").html('Completed').css('color','green');
            //Remove the active from the third step progress bar
            $(".step_three").removeClass('active');
            //Hide the error message
            $("#error-msg").css({
               'display':'none'
            });
            //Show the fourth step
            $("#step_four").css({
                'display':'block'
            });
            //Hide the third step
            $("#step_three").css({
                'display':'none'
            });
        },1500);
    }
}

//Cancel the submission of the form
function submitCancel()
{
    if(confirm('Are you 100% sure want to cancel?'))
    {
       window.location.assign('index.html');
    }
}

//Hide the error message on focus event for input field
function hideErrorMsg(id){
    $("#"+id).fadeOut(500);
}
/*Javascript ends here*/

By Thirumani Raj posted on - 20th Sep 2017

Live Demo Download Script