Build a Guided Registration Form With jQuery and Progression.js

by on 10th October 2013 with No Comments

tutorial screenshot progressionjs guided registration form

Signup forms are all too common when building new web applications or social networks. Traction from user signups can really boost your own self-confidence about a project when it comes to launching a new website. But what can you do to help improve the signup experience and hopefully gain more interested users?

In this tutorial I want to demonstrate how we can build a guided registration form, offering tips to users as they fill out each field. I have included some of my own custom jQuery along with a plugin called Progression.js. This is a powerful tool which offers a step-by-step tooltip using hints to direct users along the way. Feel free to download a copy of my source code and check out the live sample demo below.

Live DemoDownload Source Code

Getting Started

First we need to download a copy of the Progression.js plugin and include this within the website header. Progression uses a single JS file with a dependency on the jQuery library, along with its own custom CSS styles. Grab a copy from the official Github repo which also includes its own mini demo setup.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Guided Registration Form - Design Shack Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/progression.min.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/progression.min.js"></script>
</head>

Inside the page body I have created a new form with the ID #registerform. This is the page element which we attach onto using the Progression function, along with a number of internal parameters. It’s interesting to note that the tooltips will appear along the full width of the form itself, not necessarily the length of the input fields. So you want to make sure everything is aligned properly with CSS on whatever side you have the tooltips appearing (left or right).

  <form id="registerform" method="post" action="#">
    <div class="formrow">
      <label for="username">Username</label>
      <input data-progression="" type="text" name="username" id="username" class="basetxt" tabindex="1" data-helper="Any name with at least 6 characters.">
      <p class="errmsg">Please add some more characters</p>
    </div>
    
    <div class="formrow">
      <label for="email">Email Address</label>
      <input data-progression="" type="email" name="email" id="email" class="basetxt" tabindex="2" data-helper="Where do we send your verification email?">
      <p class="errmsg">Please enter a proper e-mail</p>
    </div>
    
    <div class="formrow">
      <label for="password1">Password</label>
      <input data-progression="" type="password" name="password1" id="password1" class="basetxt" tabindex="3" data-helper="Make sure you can remember it!">
    </div>
    
    <div class="formrow">
      <label for="password2">Password(again)</label>
      <input data-progression="" type="password" name="password2" id="password2" class="basetxt" tabindex="4" data-helper="Please re-enter the password again.">
      <p class="errmsg">Passwords do not match!</p>
    </div>
    
    <input type="submit" id="submitformbtn" class="submitbtn" value="Sign Up">
  </form>

Each of the input fields has an extra HTML5 data attribute attached which includes a text string for the tooltip. This is labeled with data-helper and gets picked up automatically by the plugin. I’ve included a tabindex attribute on each field which also helps mobile users quickly moving from one field onto the next.

Although this form is somewhat basic, it clearly illustrates the patterns you may use to incorporate the plugin. I also included some of my own smaller jQuery logic checks which determine if the username is long enough, if the e-mail address is valid, and if both password fields match. These codes are not related to the plugin but can still be useful for developers building similar types of web forms.

Page Design with CSS

Another important piece of my code can be found in the styles.css stylesheet. I setup the default page resets along with the core wrapper, but remember how the form also needs to be at an exact width equal to the length of the input fields.

/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

p.errmsg { 
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 7px;
  margin-top: 5px;
  color: #a54d4d;
  display: none;
}

/** custom form elements **/
#registerform {
  display: block;
  width: 512px;
}

.formrow {
  display: block;
  margin-bottom: 30px;
}

label { 
  display: block;
  float: left;
  margin-top: 12px;
  width: 160px;
  color: #444;
  font-size: 20px;
  padding: 0 0;
}

.basetxt {
  width: 340px;
  border: 2px solid #dcdcdc;
  border-radius: 7px;
  font-size: 2.0em;
  padding: 9px;
  color: #676767;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.basetxt:focus {
  outline: none;
  color: #414141;
  border-color: #9ecaed;
  box-shadow: 0 0 11px #9ecaed;
}

The #registerform element is locked at a full width of 512px along with the internal label/input fields being at a width of 160px + 340px (total of 500). The label and input fields leave some extra room for padding so that the tooltip isn’t right on top of anything. Also the .basetxt class is applied onto each input which uses CSS3 transitions to color the border and box shadow effect.

One other important piece to this relates to the error message p.errmsg. You can find these underneath three of the four fields which all pertain to jQuery validation checks. The messages are hidden by default using display: none and then displayed using jQuery’s .slideDown() method.

.submitbtn {
  width: 120px;
  text-align: center;
  cursor: pointer;
  color: #63532d;
  font-size: 1.4em;
  line-height: 29px;
  border: 1px solid #cba957;
  background: #f3d078;
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f7dfa5),color-stop(100%,#f0c14b));
  background: -webkit-linear-gradient(top,#f7dfa5,#f0c14b);
  background: -moz-linear-gradient(top,#f7dfa5,#f0c14b);
  background: -o-linear-gradient(top,#f7dfa5,#f0c14b);
  background: linear-gradient(top,#f7dfa5,#f0c14b);
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.submitbtn:hover {
  background: #f1c860;
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f5d78e),color-stop(100%,#eeb933));
  background: -webkit-linear-gradient(top,#f5d78e,#eeb933);
  background: -moz-linear-gradient(top,#f5d78e,#eeb933);
  background: -o-linear-gradient(top,#f5d78e,#eeb933);
  background: linear-gradient(top,#f5d78e,#eeb933);
}
.submitbtn:active {
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.35) inset;
  -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.35) inset;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35) inset;
  background-color: #f0c14b;
}


.syco_tooltip {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
  box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
}
.syco_tooltip p {
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

These last blocks of code define the submit button styles, along with some custom designs for the tooltip. You could just edit the main plugin CSS file but this makes it harder to upgrade in the future. Also it can be tough knowing exactly what you edited and reverting changes would be almost impossible. If you want to overwrite some of the plugin styles just pick through the progression.min.css and learn which classes you will need to target.

jQuery Progression & Validation

At the bottom of the index page before the closing </body> tag I have opened up a new JavaScript section. This includes the Progression.js initialization plus some of my own validation checks. It is somewhat convoluted but I will break this down into smaller chunks.

$(function(){
  $("#registerform").progression({
    tooltipWidth: '200',
    tooltipPosition: 'right',
    tooltipOffset: '0',
    showProgressBar: false,
    showHelper: true,
    tooltipFontSize: '14',
    tooltipFontColor: 'fff',
    progressBarBackground: 'fff',
    progressBarColor: '7ea2de',
    tooltipBackgroundColor: 'a5bce5',
    tooltipPadding: '7',
    tooltipAnimate: true
  }).submit(function(e){
    e.preventDefault();
  });

We’re targeting the registration form we call .progression() with a number of internal parameters. I think most (if not all) of these parameters can speak for themselves and the plugin documentation can also explain a lot. showProgressBar is one that I turned off in this example as I feel it doesn’t work well using only 4 inputs. But it does provide a sense of user satisfaction when you require a large number of fields, as users can actually see themselves moving towards completion.

Also tooltipPosition and tooltipWidth may be worthwhile to customize and see how they fit best into your forms. The other settings like colors and font sizes are really easy to manipulate and fit into any design. Also notice that I’ve chained a .submit() event handler onto this form as well. So whenever the form is submitted we call .preventDefault() on the submit event to stop it from happening. This is because my form has no real action attribute, but for a live working form you should remove this chained event handler altogether.

  $('#username').on('blur', function(){
    var currval = $(this).val();
    
    if(currval.length < 6) {
      $(this).next('.errmsg').slideDown();
    } else {
      // the username is 6 or more characters and we hide the error
      $(this).next('.errmsg').slideUp();
    }
  });

Each of the final 3 validation blocks will check whenever the user blurs off an input field. This first piece of code runs after the user focuses and then blurs off the username field. If the username length is less than 6 characters we display the error message underneath. Otherwise if the username is 6 characters or more then we can hide the error message, assuming it is already displayed.

  $('#email').on('blur', function(){
    // email regex source http://stackoverflow.com/a/17968929/477958
    var mailval = $(this).val();
    
    var pattern = new RegExp(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/);
    if(!pattern.test(mailval)) {
      $(this).next('.errmsg').slideDown();
    } else {
      $(this).next('.errmsg').slideUp();
    }
  });
  
  $('#password2').on('blur', function(){
    var pwone = $('#password1').val();
    var pwtwo = $(this).val();
    
    if(pwtwo.length < 1 || pwone != pwtwo) {
      $(this).next('.errmsg').slideDown();
    } else if(pwone == pwtwo) {
      // both passwords match and we hide the error
      $(this).next('.errmsg').slideUp();
    }
  });

These last two validation checks rely on the same type of logic. First is the e-mail input field which uses a regex string to check for a valid e-mail address. I found this solution on a related Stack Overflow question which provides a simple yet effective e-mail syntax. This example should be more than enough to handle any common e-mail address.

Looking at the password validation you will notice this doesn’t occur until after the user blurs from the secondary password field. This is when the user must re-type their password and it will check against both values to make sure they are equal and not completely empty/blank. I have it checking to make sure the password is at least 1 character long but you could make the restrictions more harsh as necessary.

There are some jQuery plugins out there which actually help run these types of validation checks. But if you are comfortable with scripting it doesn’t hurt to merely write your own rules from scratch.

Live DemoDownload Source Code

Closing

jQuery developers have made a number of plugins to help with form advancement. Registration forms are often a tricky challenge, because they require a large amount of information. Applying these progression tooltips can really encourage users to push through and finish the signup process swiftly without much hesitation. As always my tutorial code is free to download and implement within your own web projects. Also if you have any questions or suggestions feel free to share with us in the discussion area below.

Comments & Discussion

Subscribe
Membership
About the Author