How to Use jQuery Steps Form in

Total Post:341

 4805  View(s)
Rate this:
I want to use  jQuery Steps Form in how to do this please  give me small demo.
  1. Post:281

    Re: How to Use jQuery Steps Form in

    when we need to use steps form in html using , mvc , etc. we have to download jquery steps library from 

    Now We write code below

    <!DOCTYPE html>
    <html xmlns="">

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/jquery.steps.css">
        <script src="../lib/jquery-1.9.1.min.js"></script> 
        <script src="../build/jquery.steps.js"></script>
        <div style="width: 800px;">
            <div class="content">
                    $(function () {
                            headerTag: "h2",
                            bodyTag: "section",
                            transitionEffect: "slideLeft"

                <div id="wizard">
                    <h2>First Step</h2>
                            <legend>Personal  Information</legend>
                            <label for="userName-2">User name </label>
                            <input id="userName-2" name="userName" type="text" class="required">
                            <label for="address-2">address </label>
                            <input id="address-2" name="Address" type="text" class="required">
                            <label for="Password-2">Password </label>
                            <input id="Password-2" name="Password" type="Password" class="required">


                    <h2>Second Step</h2>
                            <legend>Contact Information</legend>

                            <label for="Phone-2">Phone Number </label>
                            <input id="Text6" name="Phone" type="text" class="required">
                            <label for="Mobile-2">Mobile Number </label>
                            <input id="Text4" name="Mobile" type="text" class="required">
                            <label for="EmailID-2">EmailID Number </label>
                            <input id="Text5" name="EmailID" type="text" class="required">


                    <h2>Third Step</h2>
                            <legend>Account Information</legend>
                            <label for="accountName-2">Account Number </label>
                            <input id="Text1" name="accountName" type="text" class="required">
                            <label for="bankname-2">Bank Name </label>
                            <input id="Text2" name="bankName" type="text" class="required">
                            <label for="ifsccode-2">IFSC CODE </label>
                            <input id="Text3" name="ifscName" type="text" class="required">


            .wizard > .content > .body input {
                display: block;
                border: 1px solid #ccc;
                width: 100%;
                height: 30px;
                margin-bottom: 20px;

            .wizard > .content > .body {
                background-color: rgba(105, 182, 199, 0.72);

    Now  fill form and click to next button

    click next button

    now click to finish button  complete your three steps form.

      Modified On Apr-10-2018 06:57:46 AM