Creating Multi-step Forms with jQuery and Promin

|

0

By Tim Severien

User-interface design is a rapidly developing aspect of design. The challenge is to clarify information or interaction for users while making it as attractive as possible. One of these interactions is something you find on any site: forms. Most forms are just large, bulky collections of fields – very important but often badly implemented. We want to make it functional and look attractive so that the user wants to stay and interact.

One solution is obvious: pagination. Any media, digital, analog, online or offline is full of it. You flip pages on magazines; you browse from page to page on a website; it’s everywhere.

By limiting the visible fields and breaking the form into pieces, the form appears smaller and more manageable. In addition, you utilize your space much more efficiently and, last but not least, it looks better.

To make the task of paginating forms easy for developers, I’ve wrapped it up in a jQuery plugin called Promin. Promin allows you to serve your form in bits. It supports a range of options to make it fit for your needs. In this article, I’ll show you how to get started using the plugin.

Getting started

First, we need to download the JavaScript file from Github. Optionally, you can download the CSS file used in the demo too.

Once embedded, we need a HTML form just like any other, with only minor modifications to make Promin recognize the steps.

<form action="#" id="form" enctype="application/x-www-form-urlencoded" method="post">
    <input type="text" name="name" class="pm-step" placeholder="What is your name?" />

    <div class="pm-step">
        <input type="text" name="email" placeholder="E-mail address" />
        <p>E-mail addresses are only used for identification. We do not share or sell them.</p>
    </div>
</form>

Once the form is set up, we have to initialize it with Promin.

$('#form').promin();

By default, a set of intuitive shortcuts are available to navigate through the form elements. However, adding buttons to navigate can be really helpful, especially for your less “web savvy” visitors. All elements without the pm-step class are not indexed and thus left intact.

<form action="#" id="form" enctype="application/x-www-form-urlencoded" method="post">
    ...

    <button id="btn-next">next</button>
</form>

Of course, we need to specify what the button should do. Here’s the entire JavaScript that initializes the form and adds the next functionality to the button:

$('#form').promin();

$('#btn-next').click(function() {
    $('#form').next();
});

Lets say I want something to occur on each step in our form process. For example, imagine I wanted to pick a random color from a palette on each step and then set it as background color. This is where events come in handy. We can specify events by sending an input object in the constructor.

var colors = ['#f00', '#0f0', '#00f'];

$('#form').promin({
    events: {
        change: function() {
            var index = Math.floor(Math.random() * colors.length);
            var color = colors[index];
            $(document.body).css('background-color', color);
        }
    }
});

There are a number of additionally supported events including next, previous, submit and reset.

Where to Go From Here

There’s quite a bit more to the Promin plugin. For example, there are a variety of options, shortcuts and methods that are available to help you customize the functionality of your multi-step form. For all the details, please feel free to check out the documentation.

1, 'include' => $prevPost->ID ); $prevPost = get_posts($args); foreach ($prevPost as $post) { setup_postdata($post); ?>
Previous

1, 'include' => $nextPost->ID ); $nextPost = get_posts($args); foreach ($nextPost as $post) { setup_postdata($post); ?>

Next

7 thoughts on “Creating Multi-step Forms with jQuery and Promin”

  1. 0

    This didn’t work for me, i.e. it did nothing at all. Of course I am going to say “I copied everything correctly” but that doesn’t really matter since you don’t have time to troubleshoot every reader’s problems. Instead, you should include a completed file so people like myself could compare and figure out what we’ve done wrong but, even more importantly, so we can make sure it even works in the first place.

    Reply
    • 0

      Thanks for the comment. I am asking the author to provide some clarification. It seems if I wrap the initial form element in a div with the pm-step class, it works but doesn’t as written. Also the button should have a type=”button” on it or it defaults to submit. However, the next() method seems to be failing. I apologize for any issues. I know that the example on the documentation site works, and hopefully Tim can clarify what the issue is.

      Reply
  2. 0

    The code for the ‘next’ button will not work as:
    $(‘#form’).next();

    And needs to be changed to:
    $(‘#form’).promin(‘next’);

    .next() is a method in jquery to search through the following sibling in the DOM. While .promin(‘next’) is the the ‘next’ method for the promin script.

    Reply
  3. 0

    Hello Tim. Thank you for this great plugin! I wonder if it is possible to show the user how many steps are left in the process?
    Is it also possible to deactivate the auto focussing of the first input field? I use promin in a form near the footer of a website and it makes the site jump automatically to the bottom after it is loaded? You can have a look here: http://www.fluchtplan-berlin.de

    Help is much appreciated, thanks in advance!

    Reply

Leave a Comment