Check Username Availability
8 August 2007The goal of a signup form is to quickly convert visitors into registered users. The easiest way to increase your sign up form's conversion rate is to lower the amount of time it takes to complete.
One way to do that, is to add a "check username availability" feature. Users will often choose conflicting usernames, especially on large community websites.
Rather than reporting the error on the next page, give the user a quick and easy way to check their username availability. This will speed up the sign up process.
As always, start with your interface. A simple form with a text box, a div, and a "Check Availability" button is all that's needed. You can copy the HTML from the demo.
Using the prototype javascript library, we will send an AJAX request to a seperate checkuser.php page, which will print either 1 for "available", or 0 for "not available". Our javascript function will print the appropriate message in our div, then highlight the textbox with green (available), or red (not available).
Here is the checkUser() javascript function. Don't forget to include the Prototype Javascript file.
function checkUser(user)
{
var url = encodeURIComponent('checkuser.php');
var params = 'user=' + escape(user);
new Ajax.Request(url, {
method: 'get', parameters: params,
onSuccess: function(transport) {
if(transport.responseText == 1){
$('userstatus').innerHTML = 'Your username is available.',
$('user').style.backgroundColor = '#caffd5'
}else{
$('userstatus').innerHTML = 'Sorry, that username is already taken.',
$('user').style.backgroundColor = '#ffd4ca';
}}});
}
This is only a small way you can increase the effectiveness of your sign up form. I will be writing about other methods in the near future.
Aaron Saray
Hey - good example.
I'm curious - have you ever put in any security around your processing page to stop pharmers from grabbing all your available usernames? Its been a big thing I've been struggling with... trying to figure out a good way to stop this.