Free DownloadFree Download: Cheat Sheet For Designing Web Forms

Advertisement

Forms, forms, forms: so often overlooked in design. In this post, we are pleased to release the Form Design Cheat Sheet, created by Joe Leech1 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 license2.

Form Design3

Form Design Cheat Sheet: Full preview4

Features

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

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)

↑ Back to topShare on Twitter

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.

    0
  2. 2

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

    0
  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!

    0
  4. 4

    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.

    0
  5. 5

    Very well done. Thanks for posting!

    0
  6. 6

    Great stuff!

    0
  7. 7

    Thank you.

    0
    • 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..

      0
    • 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.

      0
  8. 10

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

    0
    • 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.

      0
      • 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 :)

        0
  9. 13

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

    0
  10. 14

    Gr8 work. Thanks for sharing.

    0
  11. 15

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

    0
  12. 16

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

    0
  13. 18

    Great work! Thank you!

    0
  14. 19

    Really good, however – please note that check marks (ticks) means the opposite for some countries.
    http://en.wikipedia.org/wiki/Tick_%28check_mark%29

    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)

    0
  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!

    0
  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.

    0
  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!

    0
  18. 23

    Thank you!

    0
    • 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.

      0
  19. 25

    Good stuff, we need more like this.

    0
  20. 26

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

    0
  21. 27

    Simply said: thank you from my heart :)

    0
  22. 28

    I was searching the web and stumbled upon your website. I really enjoyed reading your posts and will be back to interact with your community.

    0
  23. 29

    Just FYI the download link is a bit messed up

    1. the PNG file is only 600 KB not 1.7 MB as noted.
    2. The compressed ZIP package is 1.83 MB.

    0
  24. 30

    This looks absolutely awesome, thanks!

    0
  25. 31

    This is great – would love to see something similar for Axure that I could use as a template for prototypes.

    0
  26. 32

    I don’t get this: a PSD with no layers. uumm… ?

    0
  27. 33

    The PSD is not layered, but thanx anyway, very useful!

    0
  28. 34

    thanks for sharing.

    0
    • 35

      Why is IE so bad at reennridg CSS? All other browsers work perfectly, but EVERY time I develop a site IE ALWAYS has a problem Can you fix this or just stop IE forever?

      0
  29. 36

    Good work, but my quibble is there is research utilising eye tracking software to suggest that Top Aligned form fields greatly reduce the time it takes to fill out a form. Its referenced in Web Form Design – Filling in the Blanks by Luke Wroblewski.

    0
  30. 37

    Good work here..
    I always found this type of information..

    0
  31. 38

    very good…….supporting all time …….!!!!!!!!!!!!

    0
  32. 39

    The release notes link seems to be broken (due to a path change on the CX Partners site), but I have found the article here: http://www.cxpartners.co.uk/cxblog/form_design_guidelines_crib_sheet_free/

    0
  33. 40

    Thanks alot for sharing this helping form. Regards.

    0

↑ Back to top