---
title: "How to Use jQuery Steps Form in asp.net"  
description: "How to Use jQuery Steps Form in asp.net"  
author: "Anonymous User"  
published: 2016-01-01  
updated: 2023-07-03  
canonical: https://www.mindstick.com/forum/33822/how-to-use-jquery-steps-form-in-asp-dot-net  
category: ".net"  
tags: ["asp.net", "jquery"]  
reading_time: 3 minutes  

---

# How to Use jQuery Steps Form in asp.net

I want to use jQuery Steps [Form](https://www.mindstick.com/forum/6/multi-form-mfc-application) in asp.net. how to do this please give me small demo.

## Replies

### Reply by Aryan Kumar

Sure, here are the steps on how to use jQuery steps form in ASP.NET:

1. Create a steps form in your HTML page.
2. Add a jQuery library to your HTML page.
3. Write jQuery code to control the steps form.
4. Bind the jQuery code to the steps form.

Here is an example of the code:

HTML

```plaintext
<div id="steps-form">
    <ul>
        <li>Step 1</li>
        <li>Step 2</li>
        <li>Step 3</li>
    </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // Get the steps form
    var stepsForm = $("#steps-form");

    // Get the steps list
    var stepsList = stepsForm.find("ul");

    // Get the current step
    var currentStep = 0;

    // Click handler for the next button
    $(".next-button").click(function() {
        // Increase the current step
        currentStep++;

        // Show the current step
        stepsList.children().eq(currentStep).show();

        // Hide the previous step
        stepsList.children().eq(currentStep - 1).hide();
    });

    // Click handler for the previous button
    $(".previous-button").click(function() {
        // Decrease the current step
        currentStep--;

        // Show the current step
        stepsList.children().eq(currentStep).show();

        // Hide the previous step
        stepsList.children().eq(currentStep + 1).hide();
    });
});
</script>
```

This code will create a steps form in your HTML page. The jQuery library will be loaded from Google CDN. The jQuery code will control the steps form by showing and hiding the steps based on the current step. The jQuery code will be bound to the steps form using the `click` event handler.

### Reply by Anonymous User

when we need to use steps form in html using asp.net , mvc , etc. we have to download jquery steps library from http://www.jquery-steps.com/

```

```

## Now We write code below

```
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <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></head><body>    <div style="width: 800px;">        <div class="content">            <script>                $(function () {                    $("#wizard").steps({                        headerTag: "h2",                        bodyTag: "section",                        transitionEffect: "slideLeft"                    });                });            </script>            <div id="wizard">                <h2>First Step</h2>                <section>                    <fieldset>                        <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">                    </fieldset>                </section>                <h2>Second Step</h2>                <section>                    <fieldset>                        <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">                    </fieldset>                </section>                <h2>Third Step</h2>                <section>                    <fieldset>                        <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">                    </fieldset>                </section>            </div>        </div>    </div>    <style>        .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);        }    </style></body></html>
```

Now fill form and click to next button

```

```

click next button

```

```

now click to finish button complete your three steps form.

```

```


---

Original Source: https://www.mindstick.com/forum/33822/how-to-use-jquery-steps-form-in-asp-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
