How Do You Align Your Form Assets? Jeff | October 20th, 2009

There are three things that keep me up at night:

  1. Did Juliet really reset the island?
  2. What ever happened to Clusters cereal?
  3. How should I align things within my web forms?

While not overshadowing options 1 and 2, the form alignment thing is a decision that probably effects a lot more people than the awesome Clusters squirrel commercials. Most websites I’ve ever designed have some kind of form on them, so this is something that constantly comes up.

My options on form design are basically,

  • Line everything up on the left:

    The issue I have with this is that your form just kinda blends in with the page. A less obvious sense of hierarchy.

  • Align the options (radio buttons, check boxes, whatever) with the paragraph text above it while aligning the submit button with the option’s text:

    I start to like this option because the submit button appears to go with the form options above it, but the options still aren’t separated enough from the paragraph text for my liking.
  • Indenting the form options based on my design’s grid calculations, and aligning the button with the text:

    This is getting cleaner because you have an obvious “headline” of paragraph text compared to the options. But indenting the submit button is too …. “indenty”.
  • Indenting the form options, like above, but aligning the submit button to the form option input boxes:

    This has potential because, like above, you get the obvious distinction between “headline” paragraph text and the options associated with it. But now, your user can click-click-click in a straight line all the way to the submit button.

Truth be told, I usually go with the last option, but all of them run through my head when I start on a new website design. I ran A/B testing on all of these designs at a previous job and form submissions were basically equal across all four design.

How do you typically design your forms?

Need something designed? Name your price. Pick from 110+ entries. Love it or your money back.

Like our blog? You’ll freaking love our Twitter updates. Oh, and you’ll dig our Facebook page too.

Hey, it's crowdSPRING!

Tens of thousands of the world's best and most successful entrepreneurs, businesses, agencies and nonprofits rely on crowdSPRING for affordable and risk-free custom logo design, web design, a new company name or other writing and design services. More than 162,000 designers and writers work on crowdSPRING. We create designs and names people love. 100% guaranteed.

Get Blog Updates

Free E-Books

12 Question Interviews with cS designers.
Get it »

Contracts for designers who hate contracts.
Get it »

Contracts for software developers who hate contracts. Get it »

More in Marketing and branding, Start ups (341 of 449 articles)

/** chartbeat **/