Slider Style Form Wizard Plugin With jQuery - formSlider

formSlider is a powerful, and multifunctional jQuery form slider plugin which helps you generate a responsive, extendable, customizable, touch-enabled, slider-style form wizard component on your web app. The form wizard will conditionally reveals and hides steps you typed or selected in the previous step.

Installation:

# Yarn
$ yarn add jquery.formslider
# NPM
$ npm install jquery.formslider --save

Basic usage:

1. Include jQuery library and other required JavaScript & CSS files on the web page.

<link rel="stylesheet" href="/path/to/formslider.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.formslider.dependencies.min.js"></script>
<script src="/path/to/jquery.formslider.min.js"></script>

2. The basic HTML structure for the form slider.

<form>
  <div class="example">
    <div class="formslider">
      <div class="slide" data-role="question">
        <div class="headline">Are you a man or a woman?</div>
        <label class="answer">
          <div class="text">man</div>
        </label>
        <label class="answer">
          <div class="text">women</div>
        </label>
      </div>
      <div class="slide" data-role="zipcode">
        <div class="headline">Where do you live?</div>
        <label for="contact_zipcode">zip code</label>
        <input type="number" required="required">
        <a class="next-button" href="#">continue</a>
      </div>
      <div class="slide" data-role="loader">
        <div class="headline">Please wait!</div>
        <div class="sub-headline">It does not take long.</div>
      </div>
      <div class="slide" data-role="confirmation">
        <div class="headline">Thank you for your interest</div>
        <div class="sub-headline">You hear from me as soon as possible.</div>
      </div>
    </div>
  </div>
</form> 

3. Initialize the form slider.

$('.example').formslider();

4. Possible plugins to extend the form slider. Available plugins:

• AnswerClickPlugin: add answered classes and triggers track events
• FormSubmissionPlugin: submits a form if valid
• InputFocusPlugin: sets focuse to the first input on current slide
• InputSyncPlugin: syncs inputs with the same name
• JqueryValidatePlugin: validates inputs before leaving a slide, uses jquery-validate plugin
• NormalizeInputAttributesPlugin: does n´some normalization on inputs
• TabIndexerPlugin: fixes tab order on current visible slide
• AddSlideClassesPlugin: adds classes based on role and index
• DoOnEventPlugin: generic plugin
• DoOneTimeOnEventPlugin: fires a callback first time a specific event occurs
• ArrowNavigationPlugin: arrow navigation
• BrowserHistoryPlugin: browser history
• NextOnClickPlugin: call next if certain element gets clicked
• NextOnKeyPlugin: can trigger next if enter pressed
• ProgressBarPlugin: manages progress animation
• LoaderSlidePlugin: controls the loader page
• ContactSlidePlugin: controls the contact page
• ConfirmationSlidePlugin: controls the confirmation page
• TrackSessionInformationPlugin: triggers track events for useragent, device dimension etc
• TrackUserInteractionPlugin: triggers track events for current/next page transition etc
• EqualHeightPlugin: equalizes the height of elements
• LazyLoadPlugin: load images from the next slides
• LoadingStatePlugin: manipulates loading classes on ready
• ScrollUpPlugin: scrolls up if a question is not in the viewport

$('.example').formslider({
  plugins: [
    {
      class: 'PLUGIN NAME'
      config:{
        // plugin options
      }
    },
    ...
  ]
});

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