Web design tips: Best practices for designing forms

Getting a visitor to fill out a form can be a hassle, but having a good form layout can help lead the process along. With a better design, a form can yield more results– and of course, results are the reason they’re up at all.

Whether it be for comments, a contact form, or registration, there are a set list of rules any designer should abide by when designing forms to get the most out of them. In this post, I’ll list five general rules, although more guidelines should be followed depending on the specific type of form.

1. Vertical, not Horizontal

VerticalIt has come to be the standard in form design to be vertical and not horizontal. Why conform to standards? Creativity is fine in other areas, but a designer should be a conformist when it comes to form design.

When a user wants/has to fill out a form online, they want it to be done as quickly as possible. –Get the message sent, and be done. This can be accomplished by providing the user with a familiar interface.

Along with similarity, the vertical design makes it easy to skim the fields for what should be input and what can be skipped.

Any form other than this is generally considered bad form design:

Wrong:

Horizontal

Wrong:

Partly Horizontal

As you can see, the forms above look confusing and unorganized. Sure, the user could figure them out with ease, but even this much lack of organization makes for an ugly form.

2. Borders & Background

Border and BackgroundThe current styling any browser gives to a form is certainly outdated, and any designer would be tempted to spice it up. This is a great idea, but the thing to remember is simplicity and legibility.

You can style a form just like any other element in CSS, either directly in the <input> tag with the style attribute, or like I’ve done below.

The styling below says that for every input element in a form, create a 1px solid border with the color of #ccc, and a background with a color of #f9f9f9.

form input{
     border: 1px solid #ccc;
     background: #f9f9f9;
}

I’ve just used simple grays, but any colors can be used. Be sure to pay attention to text color, contrast between the border and background, etc. The goal is to create a bit of aesthetic appeal while keeping usability in mind.

3. Alignment, Proximity, and Spacing

AlignmentAlignment can be created in two ways: using a table, or placing the text above, below, or to the right of the input fields. Tables can be tricky, and often times don’t provide a great sense of alignment because our eyes automatically try to align the text labels.

I’m going to put the text labels above the fields, but below or to the right is fine too. If the text is not on the left, the input boxes will line up to the left, creating alignment on both of their sides.

Proximity and spacing are the next two features to consider. From the way I have this form coded, we seem to already have a good general sense of these two. What I’ve done is put the input field and appropriate label in a paragraph, and a separate paragraph for each couple.

A simple line break <br /> is the only thing separating a label from it’s appropriate input field.

<form action="" method="post">
    <p>
    <label for="firstname">First name:</label><br />
    <input type="text" id="firstname">
	</p>
	<p>
    <label for="lastname">Last name:</label><br />
    <input type="text" id="lastname">
	</p>
	<p>
	<label for="firstname">Email:</label><br />
    <input type="text" id="firstname">
	</p><p>
    <label for="lastname">Website:</label><br />
    <input type="text" id="lastname">
	</p>
	<p>
    <input type="submit" value="Send">
    <input type="reset">
    </p>
</form>

SpacingLet’s work on the proximity and spacing a bit more. We still want the field label to be close to the input field, but we should add a bit of padding. A bit of tweaking to the paragraph element’s CSS and we get a more customized spacing situation.

Our form looks perfectly aligned now, and is overall visually appealing. Because we used all text fields, our fields are automatically the same width. It doesn’t always work out that well though. If you add a textarea, it’s likely that the default size is going to align well.

It’s easy to adjust the height and width of form fields with CSS, just as you would with any other element. The following CSS below would made every input element exactly 250px, so you don’t have to worry about percentages and default HTML size attributes.

form input{
     width: 250px;
}

4. Simplicity

It looks like we have a pretty good form design going on now, but there are still a few more points to make. Although I won’t be altering the example form above anymore, I realize that anyone reading this post could be creating a form for any reason.

That being said, here’s another guideline: simplicity. As stated before, visitors don’t like to fill out forms. Have only fields that are necessary. In some cases, such as in the event of a registration form, you’ll want more information from the user. Different tactics can be done to get this information in a user-friendly way. Breaking a form down would be one option, but a better option would be to keep to the basics, and let the user fill in the unneeded information later.

Also keep labels, buttons, error messages simple. Standard, simple, and to the point should be every form’s motto.

5. Extra Aesthetics

Keeping usability and simplicity in mind, it’s ok to add extra details. Below are some excellent examples of designers who made adding visual elements work for their forms.

Web Designer Wall

Swifr

Alex Cohaniuc

Written By Kayla

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. Webitect is where she spends too much of her freetime, sharing interesting finds and valuable resources. Be sure to check out her portfolio.

7 Comments

  1. Gillian

    April 1st, 2009 at 01:11 pm

    Haha im glad you enjoyed the blog. :)
    Awesome tips for the contact forms and such! I love it, and it may come in handy in the future for sure. :)

  2. iPollesion

    April 1st, 2009 at 08:12 pm

    I agree with this practice, layout means a lot with forms… it also depends on the amount of questions being asked. Lesser questions = more submissions.

  3. Dayna

    April 2nd, 2009 at 02:54 am

    If not tables, how about using floats? I think floats would be a better option to align the labels and the input fields. It has a similar visual effects as a table but just much neater and simpler. :)

  4. Andrew

    April 2nd, 2009 at 09:01 am

    That was great. I have been asked to create a map website with virtual earth, pins and data pop ups. Any suggestions?

  5. Kayla

    April 3rd, 2009 at 12:01 pm

    Andrew,
    Sounds like a big Flash project to me, as for the pins and popups, I’m sure theres a jQuery script out there you could use or manipulate to do the job.

  6. Web Design Company India

    June 29th, 2009 at 05:34 am

    Good post on web design tips and yes simplicity is also very important but unique and attractive layout catches more attention