Slider Style Form Wizard Plugin With jQuery - formSlider

Slider Style Form Wizard Plugin With jQuery - formSlider
File Size: 330 KB
Views Total: 8093
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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.


# Yarn
$ yarn add jquery.formslider

$ 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.

  <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 class="answer">
          <div class="text">women</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 class="slide" data-role="loader">
        <div class="headline">Please wait!</div>
        <div class="sub-headline">It does not take long.</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>


3. Initialize the form slider.


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
  • ContentReplace: replaces static content with dynamic generated content. 
  • PreventGoingBackOnRole: prevents going back
  • AddBodyClasses: added body classes
  plugins: [
      class: 'PLUGIN NAME'
        // plugin options


v1.3.4 (2019-07-28)

  • update

v1.3.3 (2019-04-04)

  • use selectors for not killing event handlers

v1.3.2 (2019-02-28)

  • track valid zipcode

v1.2.4 (2019-02-11)

  • add 'AddBodyClasses' plugin


  • add 'PreventGoingBackOnRole' plugin


  • v1.3.0


  • fix safari ios issue with inputs when click on label


  • trigger 'ready.formslider' on container when ready


  • v1.2.7: add `ContentReplace` plugin


  • v1.1.10


  • added 'PrevOnClickPlugin'


  • v1.0.21


  • add 'animateHeight' to 'ProgressbarPlugin'

v1.0.18 (2018-01-23)

  • add `scrollTo` and `checkElement` method to `ScrollUpPlugin` so that they can be overridden, remove left and right check from `ScrollUpPlugin`

v1.0.16 (2018-01-22)

  • add sleep and forceRedraw helper
  • add waitForReady
  • implement SlideVisibilityPlugin

v1.0.14 (2018-01-21)

  • JS Update

v1.0.13 (2018-01-19)

  • Implement progress bar with adapter

v1.0.12 (2018-01-19)

  • define FormSubmitter in global namespace


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