Theming

The classes that are marked as bold in the example below, are set by the plugin to enabled some additional styling to be added to e.g. input fields or buttons

Example

<form id="demoForm" method="post" action="json.html" class="bbq ui-helper-reset ui-formwizard ui-widget ui-widget-content ui-helper-reset ui-corner-all">
  <div id="fieldWrapper">
  <span style="display: inline;" class="step ui-formwizard-content ui-helper-reset ui-corner-all" id="first">
    <span>First step - Name</span><br>
    <label for="firstname">First name</label><br>
    <input class="ui-wizard-content ui-helper-reset ui-state-default" name="firstname" id="firstname"><br>
    <label for="surname">Surname</label><br>
    <input class="ui-wizard-content ui-helper-reset ui-state-default" name="surname" id="surname"><br>
  </span>
  <span style="display: none;" id="confirmation" class="step ui-formwizard-content ui-helper-reset ui-corner-all">
  <span>Last step - Username</span><br>
    <label for="username">User name</label><br>
    <input class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" name="username" id="username"><br>
    <label for="password">Password</label><br>
    <input class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" name="password" id="password" type="password"><br>
    <label for="retypePassword">Retype password</label><br>
    <input class="ui-wizard-content ui-helper-reset ui-state-default" disabled="disabled" name="retypePassword" id="retypePassword" type="password"><br>
  </span>
  </div>
  <div id="demoNavigation"> 							
    <input class="ui-wizard-content ui-helper-reset ui-state-default ui-formwizard-button ui-state-disabled" disabled="disabled" id="back" value="Back" type="reset">
    <input class="ui-wizard-content ui-helper-reset ui-state-default ui-formwizard-button ui-state-active" id="next" value="Next" type="submit">
  </div>
</form>