Slider-style Form Wizard Plugin - jQuery Slideforms

Slider-style Form Wizard Plugin - jQuery Slideforms

The Slideforms jQuery plugin helps you create a mobile-compatible, user-friendly, step-by-step form wizard just like a vertical slider.

Ideal for optimizing your subscription/signup forms on mobile devices to improve the conversion rate.

Features:

  • Form Completion Progress Bar.
  • Fullscreen steps.
  • Slider controls to navigate between steps.
  • Compatible with jQuery validation plugin.
  • Beautiful form UI.

How to use it:

1. Add references to jQuery and the jQuery Slideforms plugin's files.

<link rel="stylesheet" href="css/slideform.css">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="js/jquery.slideform.js"></script>

2. Create your own steps (slides) for the form.

<form action="">
  <div class="slideform-wrapper">
      <div class="slideform-slide">
          <div class="slideform-group">
              <h1>Hello Slideforms</h1>
              <p>This is a Jquery Plugin to create a Slideform like this. The first step is to
                  include the <tt>jquery.slideform.js</tt> file in your stack, and then you are
                  ready to go.
              </p>
          </div>
      </div>
      <div class="slideform-slide">
          <div class="slideform-group">
              <h2>You can create inputs</h2>
              <p>Inputs are very easy to create and they work like any other form input</p>
              <input type="text" name="input" placeholder="Write something here ...">
          </div>
      </div>
      <div class="slideform-slide">
          <div class="slideform-group">
              <h2>You can also use checkboxes and Radio Buttons</h2>
              <div class="options options-list">
                  <label for=""><input type="radio" name="group1"><span>Radio Button</span></label>
                  <label for=""><input type="radio" name="group1"><span>Another Radio</span></label>
                  <label for=""><input type="radio" name="group1"><span>Third Radio Input</span></label>
              </div>
          </div>
      </div>
      <div class="slideform-slide">
          <div class="slideform-group">
              <h2>And you can also use checkboxes</h2>
              <div class="options options-list">
                  <label for=""><input type="checkbox" name="group2"><span>Checkbox Button</span></label>
                  <label for=""><input type="checkbox" name="group2"><span>Another Checkbox</span></label>
                  <label for=""><input type="checkbox" name="group2"><span>Third Checkbox Input</span></label>
              </div>
          </div>
      </div>
      <div class="slideform-slide">
          <div class="slideform-group">
              <h3>You can even use radios and checkboxes as buttons lists</h3>
              <p>This is particularily useful for mobile enviroments</p>
              <h3>Checkboxes Example</h3>
              <div class="options options-buttons">
                  <label for=""><input type="checkbox" name="group3"><span>USD</span></label>
                  <label for=""><input type="checkbox" name="group3"><span>GBP</span></label>
                  <label for=""><input type="checkbox" name="group3"><span>ARS</span></label>
              </div>
              <h3>Radios Example</h3>
              <div class="options options-buttons">
                  <label for=""><input type="radio" name="group4"><span>Yes</span></label>
                  <label for=""><input type="radio" name="group4"><span>No</span></label>
                  <label for=""><input type="radio" name="group4"><span>Maybe</span></label>
              </div>
          </div>
      </div>
      <div class="slideform-slide">
          <div class="slideform-group">
              <h2>You can also set conditions with pretty simple data attributes</h2>
              <h3>Show Condition?</h3>
              <div class="options options-buttons">
                  <label for=""><input type="radio" name="group5" value="yes"><span>Yes</span></label>
                  <label for=""><input type="radio" name="group5" value="no"><span>No</span></label>
              </div>
              <div data-condition="input.group5 == 'yes'">
                  <h3>Showing condition</h3>
              </div>
          </div>
      </div>
  </div>
  
  <footer class="slideform-footer">
    <div class="slideform-progress-bar">
      <span></span>
    </div>
    <div class="buttons">
      <button class="slideform-btn slideform-btn-next">Next</button>
      <button class="slideform-btn slideform-btn-prev">Prev</button>
    </div>
  </footer>
</form>

3. Initialize the slider-style form wizard by calling the function on the form tag.

$('form').slideform();

4. Make the wizard form fullscreen.

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

5. All default options.

$('form').slideform({
  // button text
  nextButtonText: 'OK',
  prevButtonText: 'Prev',
  submitButtonText: 'Submit',
  // for form validation
  // requires jQuery validation plugin
  validate: null,
  // form  submit 
  submit: null
  
});

5. API methods.

// goto the next slide.
$('form').slideform('goForward');
// goto the prev slide.
$('form').slideform('goBack');
// goto a specific slide
$('form').slideform('goTo', index);

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

  • Publication date: 04.09.2018
  • Source