6 Hints To Pimp Your Webforms’ Style

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.

The second part, adding the focus state, will change the appearance when the user clicks the textfield, and prepares to enter input. To make it more clear which field is currently "active", we add this focus-state. It does requires a bit of javascript (and jQuery to be more precise). Firefox correctly handles the :focus state in CSS, but IE doesn't. So it needs a small work-around.

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.

Looking for help?

Tired of fixing all these tech-problems yourself? We've got an excellent team at Nucleus, a top-class Belgian hosting provider, that can help you. Discover our Managed Hosting, where skilled engineers manage your servers and keep them up-to-date, so you can focus on your core business. We use a variety of Configuration Management Systems such as Puppet to make sure every config is reviewed, unit-tested and guaranteed to be working.

Want to get in touch? Find me as @mattiasgeniar on Twitter or via the contact-page on my blog.

Tagged with: , , , ,
Posted in Webdevelopment
3 comments on “6 Hints To Pimp Your Webforms’ Style
  1. trif3cta says:

    Fantastic post, I totally forgot about :focus. Forms are a pain but so important.

  2. femi says:

    Hi, I have been jumping from one page to the order, looking for a working form and a bit of explanation of how to make things work for yourself, but alas it’s turned to a road that turns, and keeps turning. I have worked on my form page and left the method space open, waiting the right tips.

    Pls. guys give us something to smile about.

    Thanks.

    femi.

  3. femi says:

    This is cool! But somehow I can not get php to work on my computer. The whole mechanism is successful. How can I install a php server on my mac?

    Thanking you.

    femi

2 Pings/Trackbacks for "6 Hints To Pimp Your Webforms’ Style"
  1. [...] 6 Hints To Pimp Your Webforms’ Style | All your blog are belong to us (tags: css design) [...]

  2. [...] 6 Hints To Pimp Your Webforms’ Style | All your blog are belong to us (tags: css) [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>