Some weeks ago I saw a great example of a login form with a lovely extra. On this login site, once the password field is focused, the owl, sitting on top of the form, hides her eyes, showing that the password can not be seen by others and therefore is private. I had to grin the first time I saw it and I am still impressed by the perfect association with privacy.
Thinking about other ways to enhance an input experience I came up with some ideas by myself.
Show a special cursor
We can use the cursor property to show a “closed” eye once you hover over the password field. This can be done with the following CSS:
cursor: url(https://justmarkup.com/images/journal/eye-blocked.png), auto;
Here is the example on jsbin.
Show fun facts
Let’s say you have a sport site where users have to register to interact (eg. to comment on an article). Also assume you have a field for birthday in your form. Wouldn’t it be great if you could use a database of famous athletes and their birthdays (which you may already have) and once the user inserts his birthday, you could show a hint like “You are born the same day as Michael Jordan”. It’s a great association with the interest of your site and the user and furthermore gives the form some personality.
Show days until next birthday
As you can see there a many ways to enhance forms. It’s the little big details that will make your site outstanding.
I think it’s really worth to go the extra mile and enhance your form with a nice feature. We all have to enter data into forms every day and all know how boring this can be. Giving your forms an outstanding characteristic will make them unique, more fun and pleasant to use.
If you know any other forms with a neat extra, please let me know @justmarkup