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);

6. Advanced usage: validate form inputs before submitting. Requires jQuery validation plugin.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

var $form = $('form');

    $form.slideform({
      validate: {
          rules: {
              group7: {
                  required: true,
                  equals: "valid"
              }
          },
          messages: {
              group7: {
                  required: 'Please select an option',
                  equals: 'You must select valid!'
              }
          }
      },
      submit: function (event, form) {
          $form.trigger('goForward');
      }
      
});

Changelog:

v0.1.5 (2020-02-24)

• Adding support for password inputs. 

2018-09-06

• Fixes for mobile scrolling removing flexbox justify cotnent.

2018-09-05

• Fixing minor slider issues for iOS.

---

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