Menu Search
Jump to the content X X
Smashing Conf San Francisco

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Free Download Free Download: Cheat Sheet For Designing Web Forms

Forms, forms, forms: so often overlooked in design. In this post, we are pleased to release the Form Design Cheat Sheet, created by Joe Leech and released for Smashing Magazine and its readers. This crib sheet contains an Omnigraffle template, as well as Photoshop (PSD) and PDF examples for you to download and use as you wish. Print out the sheet, stick it to your wall, send it to clients, and just generally help make everyone’s forms a bit better.

The designers of the crib sheet have spent years designing and testing forms, and they’ve decided to summarize the most common problems and issues that come up in their projects.

As usual, this goodie is absolutely free to use in private and commercial projects. The crib sheet is released under a Creative Commons license1.

Form Design2

Form Design Cheat Sheet: Full preview3

Features Link

The crib sheet presents best practices for a variety of Web form issues:

  • Variety of fields (simple, optional, etc.);
  • Layout and examples;
  • Page-level error handling;
  • Password strength;
  • Currency values;
  • Inline validation;
  • Buttons.

Download The Crib Sheet For Free Link

The crib sheet is released under a Creative Commons license. You can use it in all of your projects for free and without any restrictions. Please link to this article if you would like to spread the word. You may modify the theme as you wish. We know you’ll find it useful in your next project!

Thank you, guys. We appreciate your work and your good intentions!

(al) (fi) (il)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

↑ Back to top Tweet itShare on Facebook


Joe has been working in UX for 7 years. Joe has worked with clients such as Marriott, eBay, Nokia, theTrainline, Microsoft, TUI Travel, Peugeot, Virgin and the Co-operative Bank helping them to be more strategic in their customer focus and make the digital stuff they do measurably better.

  1. 1

    Thank you for this :-)

    A great companion book to this great resource would be “Web From Design”, by Luke Wroblewski.

  2. 2

    gr8 ! am currently working on forms on one of my site… this sheet shall help me immediately :) thank you!

  3. 3

    Wooh, that was just what I needed! When I was working on a form recently I was in much doubt about being consistent in designing. Thanks!

  4. 4


    October 7, 2011 8:05 am

    Not bad for a draft. I know some usability analyst would be cringing at some things. I feel the layout of the forms is a bit old. It is actually recommended to have the label directly about the input box to not break association but I guess that could be argued. Overall, this is really helpful for those just getting into UI and a general reminder for the rest of us.

  5. 5

    Very well done. Thanks for posting!

  6. 6

    Great stuff!

  7. 7

    Thank you.

    • 8

      October 8, 2011 I’m so happy you weren’t hurt! That looks like rough dgmaae (and completely LOL’d at your license plate blackout with sad faces!! Too funny!). I was hit by a drunk driver TWICE! Once time my car flipped three times and was clearly totaled and the other time it wasn’t as bad but my car was totaled then too… when a DD hits you (I have found) insurance companies are quick to get you off their back and cut you a check! Hopefully you will get your car looking brand stinkin’ new in no time! Keeping my fingers crossed!AND I AM LOVING YOUR RECOMMENDATIONS! Have a very great and relaxing weekend!XOXOStephanie @ Blonde Highlights recently posted..

    • 9

      Posted on You’ll find slreuy a great deal of facts like this to consider. That is the excellent examine mention. My partner and i provide thoughts previously mentioned because basic inspiration nevertheless clearly you can find questions like the a single you mention in which the most important point will likely be in honest great belief. My partner and i put on?t understand in the event that guidelines possess come about all-around things like which, nevertheless I am certain that your career is actually clearly defined as a good sport. Equally children have the influence associated with just a moment?s enjoyment, through-out their own existence.

  8. 10

    This is just a bunch of flattened files. Not too useful but looks good I guess.

    • 11

      You do realise this isn’t for you to take and use as form elements, it’s a guide for some good practices when designing forms.

      • 12

        It’s useful for some, obvious for others. But what we would all really love is a compiled javascript that make all this happen, that would be pretty great :)

  9. 13

    Bruno Belotti

    October 8, 2011 3:45 am

    Just in time for my on-going project! Cheers mate!

  10. 14

    Gr8 work. Thanks for sharing.

  11. 15

    Very nice. Is there a layered PSD you could throw in with V2?

  12. 16

    Just a heads up that the zip file contains those annoying __MACOSX folders.

  13. 18

    Great work! Thank you!

  14. 19

    Really good, however – please note that check marks (ticks) means the opposite for some countries.

    It’s also important always using full dates: september 12, 2011 because it can be shortened in too many ways (11/09/12, 12/09/11 etc)

  15. 20

    Thanks, this is very helpful. I have some books on best practices for form design, but the cheat-sheet is quick and easy. Well done!

  16. 21

    Nice sheet, some good tips there, but I have to I agree with ClumsyHamster. Having labels to the left of user fields adds extra strain on cognitive processing, recommendations is to have labels above user fields.

  17. 22

    If you have a short form (vertical space is not an issue) I would put the labels above the inputfields rather than center align everything. With the standard date selection, I would not show the calendar when someone presses on a dropdown, that’s not what the average user would expect. Nice sheet though!

  18. 23

    Thank you!

    • 24

      Posted on I must say, as cslnideraboy as I enjoyed reading what you had to say, I couldnt help but lose interest after a while. Its as if you had a excellent grasp to the subject matter, but you forgot to include your readers. Perhaps you should think about this from extra than one angle. Or maybe you shouldnt generalise so significantly. Its better if you think about what others may have to say instead of just heading for a gut reaction to the subject. Think about adjusting your personal thought process and giving others who may read this the benefit of the doubt.

  19. 25

    Good stuff, we need more like this.

  20. 26

    Nice guide! I wonder though if these standards change, with mobile/tablet designs…


↑ Back to top