jQuery QuickWizard Custom Navigation

Demo showing how to override the default navigation provided by the plugin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="http://rawgithub.com/conzett/jquery.quickWizard/0.1.0/jquery.quickWizard.js"></script>
<form>
            <fieldset>
                <legend>Personal Info</legend>
                
                <label for="firstname">Email</label>
                <input type="text" id="firstname" name="firstname"/>
                <div> OR </div>
                <label for="lastname">Mobile</label>
                <input type="number" id="mobile" name="mobile"/>
                
                
                
            </fieldset>
            
            <fieldset>
                <legend>Points</legend>
                
                <label for="street">Amount</label>
                <input type="number" id="amount" name="amount"/>
                
                <label for="city">Point</label>
                <input type="number" id="Point" name="Point" class="required"/>                                
            </fieldset>
            
            <fieldset>
                <legend>Misc. Info</legend>
                
                <label for="color">Favorite Color</label>
                <input type="text" id="color" name="color"/>
                
                <label for="pants">Pants Size</label>
                <input type="text" id="pants" name="pants"/>                
            </fieldset>
            
            <button type="submit">Submit</button>
            
        </form>

CSS

h1, h2 {
    font-weight: bold;
    font-family: arial, helvetica, sans-serif;
}

h1, code, p, form, h2 {
    margin-bottom : 18px;
}


code {
    display : block;
}

p code {
    display : inline;
}

p {
    width : 480px;
}

input, button {
    margin : 0 0 5px 0;
}

body {
    padding : 10px;
}

fieldset {
    padding : 10px;
    margin : 0 0 10px 0;
    border : 1px solid black;
    width : 480px;
}

label, input {
    float : left;
}

label {
    clear : left;
    width : 100px;
}

.checkbox-label {
    padding-left : 20px;
}

.checkbox {
    position : relative;
    left : -120px;
}

label.error {
    clear : none;
    width : auto;
    margin-left : 10px;
    color : red;
}

JavaScript

$(document).ready(function() {
    $('form').quickWizard({
        nextButton : '<a id="customNextButton">Next-&gt;</a>',
        prevButton : '<a id="customPrevButton">&lt;-Previous</a>'
    });
});