Accordion Slider Style jQuery Form Wizard Plugin - Formalize

File Size: 12.5 KB
Views Total: 10278
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Accordion Slider Style jQuery Form Wizard Plugin - Formalize

Formalize is a lightweight jQuery plugin which converts a large form into a multi-step wizard like a vertical accordion/slider.

How to use it:

1. Divide your large form up into separate sections using fieldset element.

<form id="sectional">
  <fieldset>
    <legend>Section One</legend>
    <div class="form-section">
      <p class="form-help-text"> This section has a required field. If you leave it blank, it will throw an error and not let you proceed to the next section. </p>
      <div class="field required-field">
        <label for="sectional-text-1">Text 1</label>
        <input name="text1" id="sectional-text-1" type="text" required>
      </div>
      <div class="field">
        <label for="sectional-text-2">Text 2</label>
        <input name="text2" id="sectional-text-2" type="text">
      </div>
      <div class="field">
        <label for="sectional-text-3">Text 3</label>
        <input name="text3" id="sectional-text-3" type="text">
      </div>
      <nav class="form-section-nav"> <span class="btn-std form-nav-next">Next</span> </nav>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Section Two</legend>
    <div class="form-section">
      <div class="field">
        <label for="sectional-text-4">Text 4</label>
        <input name="text4" id="sectional-text-4" type="text">
      </div>
      <div class="field">
        <label for="sectional-text-5">Text 5</label>
        <input name="text5" id="sectional-text-5" type="text">
      </div>
      <div class="field">
        <label for="sectional-text-6">Text 6</label>
        <input name="text6" id="sectional-text-6" type="text">
      </div>
      <nav class="form-section-nav"> <span class="btn-secondary form-nav-prev">Prev</span> <span class="btn-std form-nav-next">Next</span> </nav>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Section Three</legend>
    <div class="form-section">
      <div class="field">
        <label for="sectional-text-7">Text 7</label>
        <input name="text7" id="sectional-text-7" type="text">
      </div>
      <div class="field">
        <label for="sectional-text-8">Text 8</label>
        <input name="text8" id="sectional-text-8" type="text">
      </div>
      <div class="field">
        <label for="sectional-text-9">Text 9</label>
        <input name="text9" id="sectional-text-9" type="text">
      </div>
      <nav class="form-section-nav"> <span class="btn-secondary form-nav-prev">Prev</span> <span class="btn-std form-nav-next">Next</span> </nav>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Section Four</legend>
    <div class="form-section">
      <div class="field">
        <label for="sectional-text-10">Text 10</label>
        <input name="text10" id="sectional-text-10" type="text">
      </div>
      <div class="field">
        <label for="sectional-text-11">Text 11</label>
        <input name="text11" id="sectional-text-11" type="text">
      </div>
      <div class="field">
        <label for="sectional-text-12">Text 12</label>
        <input name="text12" id="sectional-text-12" type="text">
      </div>
      <nav class="form-section-nav"> <span class="btn-secondary form-nav-prev">Prev</span>
        <button></button>
        <span>Submit</span> </nav>
    </div>
  </fieldset>
</form>

2. Include jQuery library and the jQuery Formalize plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/formalize.js" type="text/javascript"></script>

3. Setup the form wizard.

$(document).ready(function(){
$('#sectional').formalize({
timing: 300,
nextCallBack: function(){
if (validateEmpty($('#sectional .open'))){
scrollToNewSection($('#sectional .open'));
return true;
};
return false;
},
prevCallBack: function(){
return scrollToNewSection($('#sectional .open').prev())
}
});

$('input').on('keyup change', function(){
$(this).closest($('.valid')).removeClass('valid');
});

function validateEmpty(section){
var errors = 0;
section.find($('.required-field')).each(function(){
var $this = $(this),
input = $this.find($('input'));
if (input.val() === ""){
errors++;
$this.addClass('field-error');
$this.append('\<div class="form-error-msg">This field is required!\</div>');
}
});
if (errors > 0){
section.removeClass('valid');
return false;
}
section.find($('.field-error')).each(function(){
$(this).removeClass('field-error');
});
section.find($('.form-error-msg')).each(function(){
$(this).remove();
});
section.addClass('valid');
return true;
}
});

This awesome jQuery plugin is developed by vgpena. For more Advanced Usages, please check the demo page or visit the official website.