Slider Style Form Wizard Plugin With jQuery - formSlider
File Size: | 330 KB |
---|---|
Views Total: | 8316 |
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.
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
- ContentReplace: replaces static content with dynamic generated content.
- PreventGoingBackOnRole: prevents going back
- AddBodyClasses: added body classes
$('.example').formslider({ plugins: [ { class: 'PLUGIN NAME' config:{ // plugin options } }, ... ] });
Changelog:
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
2019-02-08
- add 'PreventGoingBackOnRole' plugin
2019-02-05
- v1.3.0
2018-11-08
- fix safari ios issue with inputs when click on label
2018-11-03
- trigger 'ready.formslider' on container when ready
2018-09-25
- v1.2.7: add `ContentReplace` plugin
2018-03-30
- v1.1.10
2018-02-08
- added 'PrevOnClickPlugin'
2018-02-02
- v1.0.21
2018-02-01
- 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.