Build a Guided Registration Form With jQuery and Progression.js
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.
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato gives you unlimited access to 19+ million pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
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="https://designshack.net/favicon.ico"> <link rel="icon" href="https://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