formToWizard #1

by artoodetoo

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">
  <div id="header">
    <!-- <img src="logo.jpg" alt="JankoAtWrpSpeed demos" /> -->
    <h3>Demo for <a href="http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx">Turn any webform into a powerful wizard with jQuery</a></h3>
  </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>
        <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...

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

JavaScript

$(function () {
  $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })
});