Home

Welcome to Slideform documentation. Here you will find everything neccesary to run Slideform in your own project.

Why Slideforms?

There are plenty of good services to generate full page forms, but these are paid and sometimes we need to integrate these kind of forms to existing projects.

In my particular case, I needed users to fill out the form using their mobile phones just before we started a trekking journey. I needed the form to be fast and easy to fill. This is why I created slideforms.

The plugin runs on top of jQuery and there's a small footprint. It leverages features from other plugins to make its job (we don't reinvent the wheel).

How to Start using Slideforms?

Installing the Packages

You can download the jquery.slideform.js and slideform.css files from the dist directory in this repository. Then add them to your html document. Remember that slideform needs jQuery to run.

You can also download the package as a npm dependency:

npm install slideform --save

Creating the First HTML elements

The first step is to create a form element. Then, every slide within the form uses the .slideform-slide class to be recognized as a slide.

Within each slide, you must add a .slideform-group div to enclose all content. This will serve as the container to hold the inputs and any other content you might want to add.

<div class="slideform-slide">
    <div class="slideform-group">
        <!-- your content goes here -->
    </div>
</div>

Within each group, you can add a subset of elements. Please have in mind that the first slide is always the introduction, and the last slide will always be counted as the success slide.

Inputs

Inputs are very easy to use, and you can just follow the normal input types:

<input type="text" name="yourinput" placeholder="Your input">

Checkboxes and Lists

We have two behaviors for checkboxes and lists.

List Behaviors

Buttons Behaviors

Events

Slideform comes with some handy events to use in your code.

goForward

$('form').trigger('goForward'); 

goBack

$('form').trigger('goBack'); 

goTo

$('form').trigger('goTo', [ slide ]); 

slide (int): The 0 indexed value of the slide.