jquery wizard for user registration

Question

Hi I Want some samples for step by step registrations like a wizard. i want to use these samples and asp.net page. Thanks.

Answer 1

Do you mean, something like this? jQuery Form Builder

Answer 2

You can easily create your own using jQuery - check out this demo http://jsfiddle.net/nwJFs/

And here's the code

HTML

<div class="step step-1">
    <div class="wrap">
        <label for="name">Name</label>
        <input id="name" type="text" />
    </div>
    <div class="wrap">
        <label for="email">Email</label>
        <input id="email" type="text" />
    </div>
    <div class="wrap">
        <label for="phone">Phone</label>
        <input id="phone" type="text" />
    </div>
    <br class="clear-last" />

    <a class="button prev" href="#">Previous</a>
    <a class="button next" href="#">Next</a>
</div>
<div class="step step-2">
    <div class="wrap">
        <label for="name">Mobile</label>
        <input id="name" type="text" />
    </div>
    <div class="wrap">
        <label for="email">Address</label>
        <textarea id="email"></textarea>
    </div>
    <div class="wrap">
        <label for="phone">Phone</label>
        <input id="phone" type="text" />
    </div>
    <br class="clear-last" />

    <a class="button prev" href="#">Previous</a>
    <a class="button next" href="#">Next</a>
</div>
<div class="step step-3">
    <div class="wrap">
        <label for="name">Some</label>
        <input id="name" type="text" />
    </div>
    <div class="wrap">
        <label for="email">Other</label>
        <textarea id="email"></textarea>
    </div>
    <div class="wrap">
        <label for="phone">Fields</label>
        <input id="phone" type="text" />
    </div>
    <br class="clear-last" />

    <a class="button prev" href="#">Previous</a>
    <a class="button next" href="#">Submit</a>
</div>

CSS

body {
    font-family: Trebuchet MS;
    font-size: 12px;
}

.wrap {
    clear: both;
    padding: 8px 0;
}
.wrap label {
    display: block;
    float: left;
    width: 150px;
    padding: 4px;
    line-height: 12px;
}
.wrap input,
.wrap textarea {
    display: block;
    font-size: 12px;
    line-height: 12px;
    float: left;
    width: 200px;
    border: 1px solid #888;
    padding: 4px 8px;
}

.button {
    background: #333;
    color: #f2f2f2;
    display: inline-block;
    padding: 4px 8px;
    text-decoration: none;
    border: 1px solid #ccc;
}
.button:hover {
    background: #888;
    color: #000;
}

br.clear-last {
    clear: both;
    margin: 15px 0;
}

.step {
    display: none;
}
.step-1 {
    display: block;
}

jQuery

$(".next").click(function() {
   //store parent
   var parent = $(this).parent();
    if(parent.next().length) {
       parent.hide("slow").next().show("slow");
    }
    return false;
});
$(".prev").click(function() {
   var parent = $(this).parent();
    if(parent.prev().length) {
       parent.hide("slow").prev().show("slow");
    }
    return false;
});