Simple Form Slider for Step by Step Form Wizard Plugin in jQuery

by Posted on

If you want to create step by step tutorial or survey form as per user interest then here I am going to share one useful plugin jquery.formslider which integrates a modified Flexslider with logical slide pages that can have features like and behaviors provided by plugins. 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 application. The Library is very small, performance optimized, full responsive and touch capable. You can easily write you own plugins and implement custom slide behavior.The main goal is to have different actions triggered depending on what type the actual slide page is. You can stop going forward when a formula is invalid for example.

Features:

  • Responsive
  • Touch gestures
  • Easy to extend
  • Plugin architecture
  • Many plugins available
  • Automated tests
  • High code quality
  • Free to use
  • Open source library
  • Formula validation
  • High Performance
  • Mobile optimizations



Integrate Form Wizard Plugin

Libraries

Include the following dependencies into you html page.

<!--CSS-->
<link rel="stylesheet" href="[path_to_your_bower_components]/jquery.formslider/dist/formslider.min.css">
 
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="[path_to_your_bower_components]/jquery.formslider/dist/jquery.formslider.dependencies.min.js"></script>
<script src="[path_to_your_bower_components]/jquery.formslider/dist/jquery.formslider.min.js"></script>



HTML

Creating simple basic HTML markup for the form wizard slider.

<form>
  <div class="formslider-wrapper">
    <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>

Add Progressbar on page

<div class="progressbar-wrapper">
  <div class="progress-text"></div>
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
</div>



JS

Now finally Initialize the formslider with minimal code configuration.

<script>
(function($){
 
  $('.formslider-wrapper').formslider();
 
})(jQuery);
</script>

See live demos and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



Following are the list of options / configurations you can use to customize the formslider

$('.formslider-wrapper').formslider(
  version: 1
 
  driver:
    class:    'DriverFlexslider'
    selector: '.formslider > .slide'
    animationSpeed: 600
    smoothHeight:   true
    touch:          true
 
  pluginsGlobalConfig:
    questionSelector: '.question-input'
    answersSelector:  '.answers'
    answerSelector:   '.answer'
    answerSelectedClass: 'selected'
 
  plugins: [
    # prev/next controller plugin
    { class: 'BrowserHistoryController'   }
    { class: 'OrderByIdController'   }
    { class: 'NativeOrderController' }
 
    #view
    { class: 'SlideVisibility'          }
    { class: 'LazyLoad'                 }
    { class: 'EqualHeight'              }
    { class: 'ScrollUp'                 }
    { class: 'LoadingState'             }
 
    # progressbar
    {
      class: 'ProgressBarPercent'
      config:
        selectorWrapper: '.progressbar-wrapper.percent'
        initialProgress: 23
    }
    {
      class: 'ProgressBarSteps'
      config:
        selectorWrapper: '.progressbar-wrapper.steps'
    }
 
    # form
    { class: 'AnswerMemory'             }
    { class: 'AnswerClick'              }
    { class: 'JqueryValidate'           }
    { class: 'TabIndexSetter'           }
    { class: 'InputSync'                }
    { class: 'InputNormalizer'          }
    { class: 'InputFocus'               }
    { class: 'FormSubmission'           }
 
    # navigation
    { class: 'NavigateOnClick'          }
    { class: 'NavigateOnKey'            }
 
    # tracking
    { class: 'TrackUserInteraction'     }
    {
      class: 'TrackSessionInformation'
      config:
        onReady: (plugin) ->
          plugin.inform('custom-information-var', 'custom-information-val')
    }
 
    # loader
    {
      class: 'SimpleLoader'
      config:
        loaderClass: 'SimpleLoaderImplementation'
        duration: 1000
    }
 
    # generic
    { class: 'AddSlideClasses'          }
    {
      class: 'DoOnEvent'
      config:
        'after.question': (plugin) ->
          plugin.track('any time after question')
    }
    {
      class: 'DoOneTimeOnEvent'
      config:
        'after.question': (plugin) ->
          plugin.track('first time after question')
    }
    {
      class: 'DirectionPolicyByRole'
      config:
        zipcode:
          commingFrom: ['question']
          goingTo: ['loader', 'question']
 
        loader:
          commingFrom: ['zipcode']
          goingTo: ['contact']
 
        contact:
          commingFrom: ['loader']
          goingTo: ['confirmation']
 
        confirmation:
          goingTo: ['none']
    }
  ]
)

Published by admin