jquery wizard for user registration [closed] - asp.net

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
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

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;
});

Answer 2

check out this one : http://thecodemine.org
having problems with chrome though...

Answer 3

Do you mean, something like this?
jQuery Form Builder

Answer 4

checkout these links for better wizard creation:
techlab-smart wizard: http://techlaboratory.net/smartwizard
https://github.com/techlab/SmartWizard