<style type="text/css">
body { font-family:Lucida Sans, Arial, Helvetica, Sans-Serif; font-size:13px; margin:20px;}
#main { width:960px; margin: 0px auto; border:solid 1px #b2b3b5; -moz-border-radius:10px; padding:20px; background-color:#f6f6f6;}
#header { text-align:center; border-bottom:solid 1px #b2b3b5; margin: 0 0 20px 0; }
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;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="formToWizard.js"></script>
<script type="text/javascript">
function MakeWizard() {
$("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })
$("#makeWizard").hide();
$("#info").fadeIn(400);
}
</script>
</head>
<body>
<div id="main">
<div id="header">
<p><a id="makeWizard" href="#" onclick="MakeWizard()">Нажмите здесь, чтобы изменить форму</a>
<span id="info" style="display:none;">Можете ничего не заполнять. Просто нажимайте на кнопку НЕКСТ :)</span></p>
</div>
<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>
</select>
<select id="CreditcardYear">
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
<label for="Address1">Address 1</label>
<input id="Address1" type="text" />
<label for="Address2">Address 2</label>
<input id="Address2" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="City">City</label>
<select id="Country">
<option value="CA">Canada</option>
<option value="US">United States of America</option>
</select>
</fieldset>
<p>
<input id="SaveAccount" type="button" value="Submit form" />
</p>
</form>
</div>
</body>