How Do You Align Your Form Assets? admin | 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?

From many minds, the perfect design. Post your project today and let the crowd wow you!

Join the crowd that's raving about the crowdSPRING Blog

Get our weekly digest of can't-miss content on how to take your brand to the next level.

Creative needs?

We have 200,000 creative professionals ready to help you with custom logo design, web design, or a new company name. Take your project to the crowd!

Click to get started on

Free eBooks

interviews with graphic and web designers

12 Question Interviews with cS designers.
Get it »

contracts for graphic designers

Contracts for designers who hate contracts.
Get it »

contracts for software and website developers

Contracts for software developers who hate contracts. Get it »

Latest tweets

crowdSPRING @crowdspring
Five Tips To Help You Brand Your Law Firm or Law Practice

About 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 200,000 designers and writers work on crowdSPRING. We create designs and names people love. 100% guaranteed.

Learn more »
Read previous post:
10 Small Business Social Media Marketing Tips, (Part 1 of 2)

One of the biggest challenges for small businesses who want to market using social media is capacity. crowdSPRING is a...