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

by

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.



HTML

Creating simple basic HTML markup for the form wizard slider.


  

    


      

        
Are you a man or a woman?

        
        
      


      

        
Where do you live?

        
        
        continue
      


      

        
Please wait!

        
It does not take long.

      


      

        
Thank you for your interest

        
You hear from me as soon as possible.

Add Progressbar on page



JS

Now finally Initialize the formslider with minimal code configuration.

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 Rohit