I’ve been looking into some UX issues this week, and various other front end components to make a client’s site more aesthetically pleasing, which is always fun.
Now, I won’t lie.. I also use WordPress as a blogging platform.. yeah yeah, a ColdFusion developer using a PHP application. The truth is, I’ve used it from day one as a blogger (I’ve been doing this in various forms for the last 6 years, believe it or not), and it’s constantly being updated. It’s a great system with some fantastic developers behind it, as well as a very clean design principle.
Now, logging into a WordPress blog the other day I mixed up my password with one of the million or so that I use (couple that with the fact I’m getting old and forgetful…) and I received a really pleasant surprise from WordPress (version 3).
After the failed login, the entire login form shook a few times, and displayed above it is the error information box. That was a really nice addition; they could have just stuck with the traditional big red “YOU MESSED UP, YOU IDIOT” message you see on so many sites.
This reminded me of something else; One of the presentations I was able to escape long enough to attend at Scotch on the Rocks 2011 was one from Aral Balkan, title “The Art of Emotional Design: a story of pleasure, joy, and delight”. A fantastic presentation, and one which really makes you think about developing or adding details in to your applications to make your users go “oooh” instead of “oh..”
…which is what happened here (which is a good thing).
Shake what you got
Instantly I wanted to emulate it and create something similar. WordPress is packed with classes and action hooks to load in specific actions when required.
To create a very simple equivalent, I’m using the very powerful jQuery UI library, which has a shake effect baked in – awesome.
Here it is in action:
Get the Flash Player to see this player.Here’s the core of the login form created for the demo:
index.cfm
<!--- Name: index.cfm Author: Matt Gifford aka coldfumonkeh Date: 11/08/2010 Purpose: Login form to demonstrate the use of the jQuery UI's shake effect. ---> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head> <title>Login</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel='stylesheet' href='assets/css/login.css' type='text/css' media='all' /> <link rel='stylesheet' href='assets/css/ui-lightness/jquery-ui-1.8.4.custom.css' type='text/css' media='all' /> <script src="assets/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="assets/js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script> </head> <body> <div id="login"> <!--- Here, we set an empty div which we'll populate and add styles using the jQuery UI classes. ---> <div id="login_message"></div> <!--- Uber-simple login form. Username and password fields. No more, no less. ---> <form name="loginform" id="loginform" onsubmit="return false;"> <p> <label for="username">Username<br /> <input type="text" name="username" id="username" class="inputFields" value="" size="20" tabindex="1" /> </label> </p> <p> <label for="password">Password<br /> <input type="password" name="password" id="password" class="inputFields" value="" size="20" tabindex="2" /> </label> </p> <p class="submit"> <input type="button" name="btnLogin" id="btnLogin" value="Log In" tabindex="3" /> </p> </form> </div> <!--- Bring on the jQuery. ---> </body> </html>
Nothing out of the ordinary going on here.. in fact the WHOLE process is incredibly simple. In this example, we’re just sending through username and password parameters, and are validating against a fixed authentication; I’m not querying a database in this instance.
The authentication process returns a boolean value, which we’ll use in the jQuery handling to determine succes (or not).
checkLogin.cfm
<!--- Name: checkLogin.cfm Author: Matt Gifford aka coldfumonkeh Date: 11/08/2010 Purpose: Dummy login authentication page checking against static information. ---> <cfsetting enablecfoutputonly="true" showdebugoutput="false" /> <cfparam name="boolSuccess" type="boolean" default="false" /> <cfif structKeyExists(form, 'username') AND structKeyExists(form, 'password')> <cfif form.username EQ 'random1000' AND form.password EQ 'password'> <cfset boolSuccess = true /> </cfif> </cfif> <cfoutput>#boolSuccess#</cfoutput>
The actual core of the work is within the jQuery script, which in itself is still pretty straightforward.
In the example below, we’re using jQuery’s AJAX method to send the form and it’s data to the checkLogin.cfm page.
Using the boolean response as a status to monitor the authentication success, we can then handle the form and any processes that we need to take care of:
index.cfm (jQuery code)
<script type="text/javascript">
$(document).ready(function(){
$("#username").focus();
$("#btnLogin").click(function(){
/*
* The login button has been clicked.
* Send an AJAX POST request to the checkLogin.cfm
* page, which will work out the authentication for us.
* We will receive a boolean value in the response.
*/
$.ajax({
url: "checkLogin.cfm",
type: "POST",
cache: false,
data: "username=" + $("#username").val()
+ "&password=" + $("#password").val(),
success: function(status){
if(status == 'false') {
/*
* The authentication was a failure. As such, we'll let
* the user down gently with a smile and shake the login
* form. This will act as notification and a little
* 'crowd pleasing' effect to brighten their day.
*/
$("#loginform").effect("shake", {times:2}, 100);
/*
* Set the Class attribute for the message element
* and set the html value with the ERROR message.
*/
$("#login_message")
.attr('class', 'ui-state-error')
.html('<strong>ERROR</strong>:
Your details were incorrect.<br />');
} else {
/*
* The authentication was a resounding success! Good times.
* Set the Class attribute for the message element
* and set the html value with the SUCCESS message.
*/
$("#login_message")
.attr('class', 'ui-state-highlight')
.html('<strong>PERFECT</strong>:
You may proceed. Good times.<br />');
}
}
});
})
});
</script>
Using jQuery’s UI, we are able to not only set the shake effect and apply it to the entire loginForm div element, we are also able to set the class attributes for the login_message element and apply the styles from the CSS themes available with the UI framework.
Shake it yourself
The only true way to enjoy is to experience yourself. 
The full code for this example is available to download.
6 Comments on "Sexy-fi your login forms"
Nice one!
(And thank-you for your kind words on my presentation.)
Sweet! Also very easy to reproduce in php since checklogin.cfm is just checking the data against the database and returning true or false.
Hey Kris! Absolutely.. you can tailor this example for any language.
Matt,
Firstly, thanks for the cool little piece. I must be doing something wrong as I got the all the files across to our webserver and yet when I try login, I get the login screen perefctly and can’t seem to go beyond that. I am not sure why having checked everything about 10 times.
Should I need to change any of the code to make adjustsments for my website? Does my web provider need to make any adjustment for CFM file?
Would appreciate some help.
Thanks
Sam
Hi Sam
Thanks for the comment. Are you seeing the login screen, but the javascript isnt running the AJAX request?
Is the checkLogin.cfm file in the same directory as the login form? Are you getting any errors if you view the page using a console tool like Firebug?
Just what I was looking for. Thanks for the shake effect! Starting to like jQuery even more.