6 Hints To Pimp Your Webforms’ StyleMattias Geniar, Saturday, August 23, 2008
Even the best looking designs can be made obsolete when plain-old-boring input fields are used, in forms. No make-up, no styling, just input fields. It's not inviting for a user to jump in and fill out the form. And this also means it's not inviting for people to fill out their contact information on your web-shop, or sign up for your newsletter.
Yet there are so many easy ways to style your forms, you can use advanced AJAX calls that verify your input in real-time for validity, notify you of usernames that aren't free anymore or alert you of new events, while you're filling out a form, suggest search keywords as you type the, etc ... The list is extremely long.
But it doesn't have to be that advanced ... here are some easy tips to give your forms a small "edge". These tips were made for "entry level" web design, nothing fancy -- just good knowledge to get you started.
We'll start with a very default layout, some text fields, a radio button and a select list.
You can find the starter form right here: default form layout.
1. Create some space.
It's no fun typing in text in a cramped up textfield. Give your letters some space, and let them be typed out in peace. Do so, by adding the necessary padding to all your input fields.
Expand your input fields, so users don't get the feeling they are very limited in what they type. Allow them the necessary room to enter everything they need.
Example can be found here: Form with Added Whitespaces.
2. Create a visually separated form.
Try to have your form stand out from the rest of the page, without being too pushy. You want users to fill out your forms, but you don't want to seem desperate either.
Add a border to your form, another background color than the rest of the page, perhaps even alternating row-colors. An easy way to accomplish this, is by using the ever-underestimated fieldset. Use it to add some color and life!
Example can be found here: Form with Fieldset & Some Color.
3. Style your input fields.
The input fields are actually what makes a form look dull. Time to change that. We've already added padding to create some space, now let's visualize the matter a bit.
Add a background color, a nice border and a matching color text to get rid of the plain white text fields.
Example can be found here: Form with Styled Textfields & Select list.
4. Add some basic animation/behavior.
While your form has become slightly more visually appealing (if you like the color schema, that is), it's still a dull form. You could add the necessary "hover" and "focus" states, that change the appearance of the form depending on the current user action.
The first part, adding a hover, will animate the textfields if you hover your mouse over it. It can be accomplished through the :focus state in CSS, that both Firefox & IE interpret correctly.
Example can be found here: Form with Animated Behavior.
5. Get your users started -- enter default text.
No matter how well your field-description is, users can still get confused. By entering a default text into the textfields, we actually supply our end-users with a "template". They get example input shown to them, and they'll understand more easily what they need to enter into the form.
So enter a default text, and erase it as soon as the user focuses that particular input field.
Example can be found here: Form with Default Values.
6. Create good-looking warning/error/info-messages.
Users are bound to enter wrong input, and we should alert them if they did so. But we should also alert them in a clean manner, and not by flashing some red font size 32px error message at them.
Input validation and presentation is probably a harder thing to do, because so much depends on your form layout. It often works to present a list of wrong input at the top of the page, but sometimes it requires you to output the error messages next to the fields where they belong (this could especially be so in long forms, so users get a clear view of what's wrong). You could also combine them, both.
A clean way to output information or error messages is shown at the JankAtWarSpeed blog, in a post titled: CSS Message Boxes For Different Message Types. It's got various examples to show warning, error, information & success-messages.
Let's rap this up by saying there are a lot of ways to present your form-layout, and while you may not always agree on the different colors used, or every item discussed, it should give you a clear image on what can improve about forms. You can always go further, of course. Here's a nice collection of links that can get you started in creating nice and fancy form layouts.