formToWizard #1
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/artoodetoo/formToWizard/v0.0.1/jquery.formtowizard.js"></script>
<div id="main">
<form id="SignupForm" action="">
<fieldset>
<legend>Account information</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
<label for="Password">Password</label>
<input id="Password" type="password" />
</fieldset>
<fieldset>
<legend>Company information</legend>
<label for="CompanyName">Company Name</label>
<input id="CompanyName" type="text" />
<label for="Website">Website</label>
<input id="Website" type="text" />
<label for="CompanyEmail">CompanyEmail</label>
<input id="CompanyEmail" type="text" />
</fieldset>
<fieldset>
<legend>Billing information</legend>
<label for="NameOnCard">Name on Card</label>
<input id="NameOnCard" type="text" />
<label for="CardNumber">Card Number</label>
<input id="CardNumber" type="text" />
<label for="CreditcardMonth">Expiration</label>
<select id="CreditcardMonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="CreditcardYear">
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option...
CSS
fieldset { border:none; width:320px;}
legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}
label { display:block; margin:15px 0 5px;}
input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000;}
.prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none;}
.prev:hover, .next:hover { background-color:#000; text-decoration:none;}
.prev { float:left;}
.next { float:right;}
#steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}
#steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;}
#steps li span {font-size:11px; display:block;}
#steps li.current { color:#000;}
#makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px;}
#makeWizard:hover { background-color:#000;}
JavaScript
$(function () {
$("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })
});