Coding a Guided Registration Form with jQuery

Techniques for building a usable registration form can be a major factor towards bringing in new users. When you’ve got an overly complicated form it can scare away so many first time visitors. But a great technique for keeping these people around is coding form hints into the layout.

In this tutorial I want to demonstrate how we can build such an interface with CSS3 and jQuery. We can embed hidden form tips which only display when the user has focused on a particular field. These hints can be used to denote syntax, such as the required length of usernames or passwords. But it’s a great usability tactic which livens up even the most dull websites.

Coding a Guided Registration Form with jQuery

Live DemoDownload Source Code

Building the Webpage

We can start by coding just the standard HTML5 markup for the registration form. In my header I’ve got a reference to an external stylesheet styles.css along with a unique JavaScript file regform.js. We will use both of these to add our custom code, along with the most recent copy of jQuery.

<link rel="stylesheet" type="text/css" media="all" href="styles.css">
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="regform.js"></script>

To keep the layout simple I’ve placed the whole form inside a wrapper div with the margin: 0 auto; property setup. The form itself doesn’t tie into any backend – the action attribute points back to index.html passing data via POST.

<div id="form-container">
	<form id="register" name="register" action="index.html" method="post">
	  <h3>100% free, and account registration only takes 60 seconds!</h3>

	  <div class="row">
	    <label for="username">Enter a Username ?</label>
	    <input type="text" id="username" name="username" class="reg-input tiny" autocomplete="off" tabindex="1">
	    <div class="note"><span id="note-username">Minimum of 3 characters to a max of 20.</span></div>
	  </div>

To encapsulate the row areas I’ve divided the form into separate div classes. Each row contains a small label along with the input field on the right-hand side. After this I’m using another div with the class .note to hide a block element of form hints.


I’m using a number of additional attributes in the HTML to make the form easier for mobile users. autocomplete=”off” turns off the typical browser suggestion history which can be quite annoying at times. Also the tabindex attribute is setup +1 for each of the input fields in sequential order.

Stylin’ with CSS

The attached stylesheet is small but very manageable for this interface. First I’m using some really simple resets to remove margins, padding, and modulate font sizes between all browsers.

* { margin: 0; padding: 0; outline: none; }
body { font-size: 62.5%; height: 101%; background: #edf8ef; padding-bottom: 45px; font-family: Arial, Tahoma, sans-serif; }

img { border: 0; }

h2 { font-size: 1.9em; color: #5b83b4; margin-bottom: 12px; }
h3 { font-size: 1.65em; line-height: 1.8em; font-weight: normal; letter-spacing: -0.07em; color: #849669; margin-bottom: 20px; }
p { font-size: 1.2em; line-height: 1.3em; margin-bottom: 10px; }

#wrapper { width: 850px; margin: 0 auto; margin-top: 25px; background: #fff; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; padding: 20px 14px; }

#form-container { background: #d6f4cb; padding: 6px 15px; }

The labels and inputs inside each row are positioned carefully using inline-block. This will keep their display property with margins/padding while still holding the two elements next to each other. In the next block of code you’ll see I also setup 2 different classes for the text fields – one regular length and the other that’s a bit shorter. We can target both of these in jQuery later on.

.row { display: block; margin-bottom: 10px;  }

.row label { display: inline-block; font-size: 1.3em; color: #78815a; width: 220px; font-family: Georgia, Times New Roman, serif; text-shadow: 1px 1px 0px #f1f9ea; }
.row .reg-input { padding: 4px 8px; width: 500px; font-size: 1.2em; border: 1px solid #c0c0c0; color: #979797; margin-bottom: 8px; }
.row .reg-input:focus {
color: #818181;
border-color: #b3c2db;
box-shadow: 0 0 7px rgba(150, 175, 210, 0.8);
-moz-box-shadow: 0 0 7px rgba(150, 175, 210, 0.8);
-webkit-box-shadow: 0 0 7px rgba(150, 175, 210, 0.8);
}

.row select, .row option { color: #979797; }

.row .reg-input.tiny { width: 265px; }

I’m using some additional effects on the focus event for each input. CSS3 includes dynamic box-shadow effects which look great as you tab through the different inputs. For the select menus I’m trying to keep them much simpler so they just float next to each other.

Custom Buttons

The only other interesting bit of CSS code is designing the submit button. Thanks to such wide browser support we can build CSS3 gradients which require no images and can scale properly regardless of screen resolution. In our form design I’ve stuck with the green color scheme but it’s so easy to change the hexadecimal values tuned with your own layout.

form #submit {
	display: block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	margin-top: 20px;
	margin-bottom: 12px;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	color: #fef4e9;
	border: solid 1px #99d235;
	background: #9beb46;
	background: -webkit-gradient(linear, left top, left bottom, from(#8efa1a), to(#86c944));
	background: -moz-linear-gradient(top,  #8efa1a,  #86c944);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8efa1a', endColorstr='#86c944');
}

form #submit:hover {
	background: #8ce028;
	background: -webkit-gradient(linear, left top, left bottom, from(#9be72f), to(#93db4d));
	background: -moz-linear-gradient(top,  #9be72f,  #93db4d);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9be72f', endColorstr='#93db4d');
}

form #submit:active {
	color: #ddf9ba;
	border-color: #98b95d;
	background: -webkit-gradient(linear, left top, left bottom, from(#9dcc6a), to(#7bac41));
	background: -moz-linear-gradient(top,  #9dcc6a,  #7bac41);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dcc6a', endColorstr='#7bac41');
}

One last note in the CSS file is how we’ve setup the small icons appearing on each note element. You can update these to display an error or success check mark as the user validates each field. For this demo it’s a lot easier just focusing on the informational fields without full validity. But the different classes are already included within the stylesheet if needed.

Dynamic jQuery

For the last part of our model let’s look into the regform.js file and see how to code these hints. I’ll break down the block into two sections for the focus and blur event handlers.

$(document).ready(function() {
  $(".reg-input, .sel-input").focus(function() {
    var theinput = $(this).attr("id");
	var thenote  = "#note-"+theinput;

	$(thenote).fadeIn("fast");
  });

The selector I’m using will target both the regular inputs and the select menus. I haven’t included anything for the birthday section because it would change on each of the different day/month/year selections.

Each note has an internal span ID in the form of #note-ID where the ID value is the associated input field’s name. This is the value we setup in the variable thenote and we can use this to quickly select the internal span to fade in and out.

  $(".reg-input").blur(function(){
	var theinput = $(this).attr("id");
	var thenote  = "#note-"+theinput;
	var currval  = $(this).val();

	if(currval == "" || currval == " ") {
	  $(thenote).fadeOut("fast");
	} else {
	  // we do nothin
	}
  });
});

For the blur event handler I’ve added a bit more logic into the equation. The new variable currval gets the value of the currently targeted input before the user removes their focus. We can then check if the form is totally blank and re-hide the info field. Otherwise if the field has value we can keep the text displayed as a cautious reminder(makes proofreading handy!).

And that should be all we need to get this running! The JavaScript actually isn’t too confusing but for new scripters it may take some references to the jQuery docs. Feel free to test out the live demo and download my source code which you can play around with on your own.

Coding a Guided Registration Form with jQuery

Live DemoDownload Source Code

Final Thoughts

Hopefully this tutorial can get you thinking about proper user experience and how to structure the flow of your website. Even a very small block of jQuery code can provide some enormous benefits to your average web layout. User forms are a very popular section to setup dynamic JavaScript events. If you have any similar ideas or suggestions feel free to share with us in the post discussion area below.

About the Author:

Jake is a freelance writer and frontend web developer. He can be found writing in many blogs on topics such as mobile interfaces, freelancing, jQuery, and Objective-C. Check out his other articles throughout Google and follow his tweets @jakerocheleauJake’s Google+ profile.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

3 Responses

Comments are now closed on this post.

  • Eric, July 5, 2012

    Cool idea and nicely done. Only small thing I noticed, that may have either been intentional or just not noticed, is when you click the Gender drop-down and don’t actually make a selection, the ‘hint’ message does not go away. With all the other fields, if you don’t actually enter data and just move to another box, the ‘hint’ message goes away. Would be an easy fix, just wanted to point it out though.

    It all looks and works great though, nicely done!

  • Alex Braker, July 5, 2012

    Yes Jake, you have given nice code and by using jQuery, you can give the strong validations in the registration form and you can easily use it in other web pages for the security purpose.

  • agregaty prądotwórcze, June 4, 2013

    Everything is very open with a really clear clarification of the issues.
    It was truly informative. Your site is useful. Thank
    you for sharing!

Close