"Application"
Bootstrap 3.0.3 Snippet by DenstonHD

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div style="position:absolute; left:140px;"> <p align="left"><img src="http://i42.tinypic.com/2czorcz.png"></p> </div> <div style="position:absolute; left:490px;"> <br> <br> <br> <p><strong>Please fill in the form below and if you see any questions with a (*) it MUST be filled in.</strong></p> <p><strong>If at any point you would like help or support with your application the contact us.</strong></p> <p><strong>Details on how to contact us can be found on our website.</strong></p> </div> <br> <br> <br> <br> <br> <br> <br> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="list-group wizard-menu"> <a class="list-group-item active step-1-menu" data-for=".step-1"> <h4 class="list-group-item-heading">1. Basic Details</h4> <br> </a> <a href="#" class="list-group-item step-2-menu" data-for=".step-2"> <h4 class="list-group-item-heading">2. Your Details.</h4> <br> </a> <a href="" class="list-group-item step-3-menu" data-for=".step-3"> <h4 class="list-group-item-heading">3. Previous Job Details.</h4> <br> <a href="" class="list-group-item step-4-menu" data-for=".step-2"> <h4 class="list-group-item-heading">4. Send</h4> <br> </a> </a> </div> </div> <div class="col-md-8"> <!-- Load content in--> <div class="well wizard-content"> </div> <!-- Content to load--> <div class="hide"> <div class="step-1"> <div class="row"> <div class="col-md-12"> <!-- add attribute data-action="" and data-method="" with path to file and form-method to submit form --> <form method="post" action="#" data-action="index.php"> <div class="form-group"> <label for="inputEx1">Job Applying For</label> <input id="inputEx1" type="text" class="form-control" placeholder="Teacher" required> </div> <div class="form-group"> <label for="inputEx1">Were you recommended by a member of staff and if so - who?</label> <input id="inputEx1" type="text" class="form-control" placeholder="Yes - Joe Blogs" required> </div> <div class="form-group"> <label for="inputEx1">Have you ever applied for a position at CastleCare before If so when?</label> <input id="inputEx1" type="text" class="form-control" placeholder="No this is my first time." required> </div> <div class="form-group"> <label for="inputEx1">How did you hear of this vacancy? (include date)</label> <input id="inputEx1" type="text" class="form-control" placeholder="Google" required> </div> <div class="form-group"> <label for="inputEx1">Date of Birth</label> <input id="inputEx1" type="text" class="form-control" placeholder="20/05/1990" required> </div> <div class="form-group"> <label for="inputEx1">Age</label> <input id="inputEx1" type="text" class="form-control" placeholder="23" required> </div> <div class="form-group"> <label for="inputEx1">Current Address</label> <input id="inputEx1" type="text" class="form-control" placeholder="5 swane lane" required> </div> <div class="form-group"> <label for="inputEx1">N.I Number (if known)</label> <input id="inputEx1" type="text" class="form-control" placeholder="" required> </div> <div class="form-group"> <label for="inputEx1">ISA Registration Number</label> <input id="inputEx1" type="text" class="form-control" placeholder="" required> </div> <hr> <p>The question below is for Teachers <strong>ONLY</strong>.</p> <hr> <div class="form-group"> <label for="inputEx1">D of E Number</label> <input id="inputEx1" type="text" class="form-control" placeholder="" required> </div> <div class="control-group"> <label class="control-label" for="radios">Do you hold a driving licence</label> <div class="controls"> <label class="radio inline" for="radios-0"> <input name="radios" id="radios-0" type="radio" checked="checked" value="Yes"> Yes </label> <label class="radio inline" for="radios-1"> <input name="radios" id="radios-1" type="radio" value="No"> No </label> </div> </div> <hr> <div class="pull-right wizard-nav"> <button type="submit" class="btn btn-primary wizard-next" data-current-step="1">Next step</button> </div> </form> </div> </div> </div> <div class="step-2"> <div class="row"> <div class="col-md-12"> <!-- add attribute data-action="" and data-method="" with path to file and form-method to submit form --> <form method="post" action="#" data-action="path/to/action.php" data-method="POST"> <div class="form-group"> <label for="inputEx1">Are you a Mr/Mrs/Ms/Miss</label> <input id="inputEx1" type="text" class="form-control" placeholder="Mr" required> </div> <div class="form-group"> <label for="inputEx2">First Name</label> <input id="inputEx2" type="password" class="form-control" placeholder="Dean" required> </div> <div class="form-group"> <label for="inputEx1">Last Name</label> <input id="inputEx1" type="text" class="form-control" placeholder="Sharp" required> </div> <div class="form-group"> <label for="inputEx1">Maiden Name</label> <input id="inputEx1" type="text" class="form-control" placeholder="Gordan" required> </div> <div class="form-group"> <label for="inputEx1">Marital Status</label> <input id="inputEx1" type="text" class="form-control" placeholder="Single" required> </div> <div class="form-group"> <label for="inputEx1">Do you go by any other names?</label> <input id="inputEx1" type="text" class="form-control" placeholder="Dee" required> </div> <div class="form-group"> <label for="inputEx1">Home Number</label> <input id="inputEx1" type="text" class="form-control" placeholder="01536 506295" required> </div> <div class="form-group"> <label for="inputEx1">Mobie Number</label> <input id="inputEx1" type="text" class="form-control" placeholder="07985633386" required> </div> <div class="form-group"> <label for="inputEx1">Work Number</label> <input id="inputEx1" type="text" class="form-control" placeholder="01536 832395" required> </div> <div class="form-group"> <label for="inputEx1">Email Address</label> <input id="inputEx1" type="text" class="form-control" placeholder="DeeSharp@gmail.com" required> </div> <hr> <div class="pull-right wizard-nav"> <!-- data-current-step is for going back and forward in wizard --> <a class="btn btn-default wizard-prev" data-current-step="2">Previous step</a> <button type="submit" class="btn btn-primary wizard-next" data-current-step="2">Next step!</button> </div> </form> </div> </div> </div> <div class="step-3"> <div class="row"> <div class="col-md-12"> <!-- add attribute data-action="" and data-method="" with path to file and form-method to submit form --> <form method="post" action="#" data-action="index.php"> <div class="form-group"> <label for="inputEx1">Current/Last Employer</label> <input id="inputEx1" type="text" class="form-control" placeholder="E-Mail" required> </div> <div class="form-group"> <label for="inputEx1">Nature of Employment</label> <input id="inputEx1" type="text" class="form-control" placeholder="E-Mail" required> </div> <div class="form-group"> <label for="inputEx1">Current or Last Salary</label> <input id="inputEx1" type="text" class="form-control" placeholder="E-Mail" required> </div> <div class="form-group"> <label for="inputEx1">Notice Required from Current Employer (if still working)</label> <input id="inputEx1" type="text" class="form-control" placeholder="E-Mail" required> </div> <hr> <div class="pull-right wizard-nav"> <a class="btn btn-default wizard-prev" data-current-step="3">Previous step</a> <button type="submit" class="btn btn-primary wizard-next" data-current-step="3">Next step!</button> </div> </form> </div> </div> </div> <div class="step-4"> <div class="row"> <div class="col-md-12"> <!-- add attribute data-action="" and data-method="" with path to file and form-method to submit form --> <form method="post" action="#" data-action="path/to/action.php" data-method="POST"> <div class="form-group"> <strong> Thanks for filling out our form. If you would like any questions answered then please contact us using the details below.</strong> <hr> <strong>When you are ready to submit your application please press the 'Finish' button below!</strong> <hr> <strong>Recruitment@castlehomes.co.uk & 01536 711111</strong> <div class="pull-right wizard-nav"> <!-- data-current-step is for going back and forward in wizard --> <a class="btn btn-default wizard-prev" data-current-step="4">Previous step</a> <button type="submit" class="btn btn-success wizard-fin" data-current-step="4">Finish</button> </div> </form> </div> </div> </div> <div class="step-3" data-load=""></div> </div> </div> </div> </div>
.container { margin-top: 1%; } /*Wizard*/ .list-group-item.success, .list-group-item.success:hover, .list-group-item.success:focus { background-color: #1aba7b; border-color: #7aba7b; color: #ffffff; } .list-group-item.success > h4 { color: #ffffff; } .list-group-item.error, .list-group-item.error:hover, .list-group-item.error:focus { background-color: #d59392; border-color: #d59392; color: #ffffff; } .list-group-item.error > h4 { color: #ffffff; } .btn3d { transition:all .08s linear; position:relative; outline:medium none; -moz-outline-style:none; border:0px; margin-right:10px; margin-top:15px; } .btn3d:focus { outline:medium none; -moz-outline-style:none; } .btn3d:active { top:9px; } .btn-default { box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #adadad, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); background-color:#fff; } .btn-primary { box-shadow:0 0 0 1px #428bca inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #357ebd, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); background-color:#428bca; } .btn-success { box-shadow:0 0 0 1px #5cb85c inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #4cae4c, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); background-color:#5cb85c; } .btn-info { box-shadow:0 0 0 1px #5bc0de inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #46b8da, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); background-color:#5bc0de; } .btn-warning { box-shadow:0 0 0 1px #f0ad4e inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #eea236, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); background-color:#f0ad4e; } .btn-danger { box-shadow:0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #C24032, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); background-color:#c63702; }
/** * Created by: Alexander Mahrt * Date: 20.11.13 * Time: 03:00 */ $(document).ready(function() { loadDataOnReady(); loadDataOnClick(); changeSteps(); nextStep(); finishWizard(function() { //ON FINISH EVENT }); }); function finishWizard(onFinish) { var wizardContent = $('.wizard-content'); var wizardButtons = $('.wizard-menu .list-group-item'); var currForm = $('.wizard-content form'); //Use document.body for dynamically loaded content listening $(document.body).on('click', '.wizard-fin', function(event) { var finButton = $(this); event.preventDefault(); var currStep = parseInt($(this).attr('data-current-step')); //Get previous elements var nextStep = $('.step-' + (currStep + 1)); var nextMenu = $('.step-' + (currStep + 1) + '-menu'); var thisMenu = $('.step-' + currStep + '-menu'); var thisStep = $('.step-' + currStep); //Update menu wizardButtons.removeClass('active'); nextMenu.addClass('active'); //Update button finButton.html('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif"> Please wait...'); finButton.addClass('disabled'); //AJAX SUBMIT FORM var getMethod = currForm.attr('data-method'); var getAction = currForm.attr('data-action'); $.ajax({ url: getAction, type: getMethod, data: currForm.serialize(), success: function() { //AJAX success wizardContent.prepend('<div class="alert alert-success">Sending Application....<strong> Please do not close the page till this messaged has gone</strong></div>'); thisMenu.addClass('success'); //Update button finButton.html('Finish'); finButton.removeClass('disabled'); window.setTimeout(function() { //UI $('.alert').hide(); //FINISHED WIZARD //FUNCTION HERE onFinish(); },5000); }, error: function() { //Ajax failure wizardContent.prepend('<div class="alert alert-danger"><strong>Something went wrong!</strong> Please try again.</div>'); thisMenu.addClass('error'); window.setTimeout(function() { //Get "data-for" attribute and find element var dataLoad = thisStep.attr('data-load'); //UI $('.alert').hide(); thisMenu.removeClass('error'); thisMenu.addClass('active'); //Update button finButton.html('Finish'); finButton.removeClass('disabled'); // Check if attribute does exist // If true then load ajax, else load from div if (typeof dataLoad !== 'undefined' && dataLoad !== false) { //Load content ajax wizardContent.load(dataLoad); } else { wizardContent.html(currStep.html()); } },2000); } }); }); } function nextStep() { var wizardContent = $('.wizard-content'); var wizardButtons = $('.wizard-menu .list-group-item'); var currForm = $('.wizard-content form'); //Use document.body for dynamically loaded content listening $(document.body).on('click', '.wizard-next', function(event) { var prevButton = $(this); event.preventDefault(); var currStep = parseInt($(this).attr('data-current-step')); //Get previous elements var nextStep = $('.step-' + (currStep + 1)); var nextMenu = $('.step-' + (currStep + 1) + '-menu'); var thisMenu = $('.step-' + currStep + '-menu'); var thisStep = $('.step-' + currStep); //Update menu wizardButtons.removeClass('active'); nextMenu.addClass('active'); //Update button prevButton.html('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif"> Please wait...'); prevButton.addClass('disabled'); //AJAX SUBMIT FORM var getMethod = currForm.attr('data-method'); var getAction = currForm.attr('data-action'); $.ajax({ url: getAction, type: getMethod, data: currForm.serialize(), success: function() { //AJAX success wizardContent.prepend('<div class="alert alert-success"><strong>That was successful!</strong> Please wait for the next step.</div>'); thisMenu.addClass('success'); //Update button prevButton.html('Next step'); prevButton.removeClass('disabled'); window.setTimeout(function() { //Get "data-for" attribute and find element var dataLoad = thisStep.attr('data-load'); //UI $('.alert').hide(); // Check if attribute does exist // If true then load ajax, else load from div if (typeof dataLoad !== 'undefined' && dataLoad !== false) { //Load content ajax wizardContent.load(dataLoad); } else { wizardContent.html(nextStep.html()); } },500); }, error: function() { //Ajax failure wizardContent.prepend('<div class="alert alert-danger"><strong>Something went wrong!</strong> Please try again.</div>'); thisMenu.addClass('error'); window.setTimeout(function() { //Get "data-for" attribute and find element var dataLoad = thisStep.attr('data-load'); //UI $('.alert').hide(); thisMenu.removeClass('error'); thisMenu.addClass('active'); //Update button prevButton.html('Next step'); prevButton.removeClass('disabled'); // Check if attribute does exist // If true then load ajax, else load from div if (typeof dataLoad !== 'undefined' && dataLoad !== false) { //Load content ajax wizardContent.load(dataLoad); } else { wizardContent.html(currStep.html()); } },2000); } }); }); } function changeSteps() { var wizardContent = $('.wizard-content'); var wizardButtons = $('.wizard-menu .list-group-item'); //Use document.body for dynamically loaded content listening $(document.body).on('click', '.wizard-prev', function(event) { event.preventDefault(); var currStep = parseInt($(this).attr('data-current-step')); //Get previous elements var prevStep = $('.step-' + (currStep - 1)); var prevMenu = $('.step-' + (currStep - 1) + '-menu'); //Update menu wizardButtons.removeClass('active'); prevMenu.addClass('active'); prevMenu.removeClass('success'); //Get "data-for" attribute and find element var dataLoad = prevStep.attr('data-load'); // Check if attribute does exist // If true then load ajax, else load from div if (typeof dataLoad !== 'undefined' && dataLoad !== false) { //Load content ajax wizardContent.load(dataLoad); } else { wizardContent.html(prevStep.html()); } }); } function loadDataOnReady() { var wizardContent = $('.wizard-content'); //Get "data-for" attribute and find element var dataFor = $('.wizard-menu .list-group-item.active').attr('data-for'); var elementFor = $(dataFor); var dataLoad = elementFor.attr('data-load'); //Check if attribute does exist //If true then load ajax, else load from div if (typeof dataLoad !== 'undefined' && dataLoad !== false) { //Load content ajax wizardContent.load(dataLoad); } else { wizardContent.html(elementFor.html()); } } function loadDataOnClick() { var wizardButtons = $('.wizard-menu .list-group-item'); var wizardContent = $('.wizard-content'); wizardButtons.on('click', function(event) { event.preventDefault(); //Change active state wizardButtons.removeClass('active'); $(this).addClass('active'); //Get "data-for" attribute and find element var dataFor = $(this).attr('data-for'); var elementFor = $(dataFor); var dataLoad = elementFor.attr('data-load'); // Check if attribute does exist // If true then load ajax, else load from div if (typeof dataLoad !== 'undefined' && dataLoad !== false) { //Load content ajax wizardContent.load(dataLoad); } else { wizardContent.html(elementFor.html()); } }); }

Related: See More


Questions / Comments: