Every ecommerce development project—almost by definition—includes a checkout form. Users will provide contact or billing information, a shipping address, and other personal information. As a developer or designer, the aim should be to make that form as friendly as possible.
Recently, I was browsing one of my favorite new books, The jQuery Cookbook, when I came across a couple of great recipes for improving form usability. In this post, I am going to build on those recipes, combining a few ideas, and updating the mark up to reflect the HTML5 document type.
The main goal will be to (1) focus the cursor on the first line of the form so that a user can start typing when the page loads and (2) create a checkout that fills out the shipping address for the user when that address is the same as the billing address.
The HTML Form Mark Up
As always, I start with a bit of HTML mark-up. This is a pretty basic form, except that I am using the HTML5 document type. The differences can be seen mostly in how I handle labels and input.
You'll notice that in the shipping address fieldset, I have included a checkbox so that a user can indicate that the billing and shipping addresses are the same.
Finally, please notice that I am referencing the jQuery Library from the Google Code content delivery network (CDN). I have placed that reference just before the closing <body> tag as is currently the practice. I also reference my own external JavaScript file, js.js.
<!doctype html> <html lang="en"> <head> <title>Checkout Form</title> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper" > <h1>Super Checkout Form</h1> <form> <p><label>Your Name: <input id="name"></label></p> <p><label>Your Phone Number: <input type=tel></label></p> <p><label>Your Email Address: <input type=email></label></p> <fieldset id="address"> <legend>Billing Address</legend> <p><label>Street: <input type=text></label></p> <p><label>City: <input type=text></label></p> <p><label>State/Province: <input type=text></label></p> <p><label>Zip/Postal Code: <input type=text></label></p> </fieldset> <fieldset id="shipAddress"> <legend>Shipping Address</legend> <p><label>Same As Billing Address: <input type=checkbox id="sameAs"></label></p> <p><label>Street: <input type=text></label></p> <p><label>City: <input type=text></label></p> <p><label>State/Province: <input type=text></label></p> <p><label>Zip/Postal Code: <input type=text></label></p> </fieldset> </form> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script src="js.js"></script> </body> </html>
I also included a small amount of CSS. In truth, I am doing little more than centering the form in the page and adding a background color. This is not necessary for this demonstration, but I like to look at a page that is at least centered.
body {width: 50%; margin: 50px auto;}
#wrapper {padding: 25px; background: #999;}
Focusing the Cursor on the First Form Field
The first task will be to focus the user's cursor in the "Your Name" field. In this way, a user can start typing as soon as he arrives on the page rather than first having to aim a mouse pointer into one of the form fields. The JavaScript code will be written into js.js.
$(document).ready(function()
{
//If the name field is empty
if($('#name').val() == '')
{
$('#name').focus();
}
})
This simple bit of code first checks to make sure that the field is actually empty. And it then focuses the cursor on this field. This is made easy thanks to two jQuery functions. Theval() function is specifically designed to get the value of a form field. And the focus() function makes it easy to place the cursor in the appropriate form field.
Auto Populate the Shipping Address
When the user selects that checkbox, "Same As Billing Address:," I want the rest of the fieldset to programmatically populate with the same data as the "Billing Address" fieldset.
$('#sameAs').change(function()
{
if(this.checked)
{
$('#shipAddress input:text').each(function(i)
{
var addressValue = $('#address input:text:eq('+i+')').val();
$(this).val(addressValue);
});
}
}).trigger('change');
Summing Up
Like any good code library, jQuery makes it simple to get powerful functions in a few lines of code. This form now automatically focuses on the first form field as soon as the page loads and gives users a quick way to fill out the form if both the billing address and shipping address are the same.
