Free DownloadCheat 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 license.
Form Design Cheat Sheet: Full preview
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!
- Large preview (PNG, 1.9 MB)
- Download the compressed package (ZIP, 0.7 MB)
- The release notes on the developer’s website
Thank you, guys. We appreciate your work and your good intentions!
(al) (fi) (il)
DCuffman
October 7th, 2011 6:48 amThank you for this :-)
A great companion book to this great resource would be “Web From Design”, by Luke Wroblewski.
Shruti
October 7th, 2011 6:57 amgr8 ! am currently working on forms on one of my site… this sheet shall help me immediately :) thank you!
Dennis
October 7th, 2011 7:52 amWooh, 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!
ClumsyHamster
October 7th, 2011 8:05 amNot 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.
Anthony
October 7th, 2011 11:34 amVery well done. Thanks for posting!
Jasmin
October 7th, 2011 7:51 pmGreat stuff!
Haris
October 7th, 2011 11:43 pmThank you.
Rohmatul
February 11th, 2012 6:10 pmOctober 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..
Erkan
February 13th, 2012 6:57 pmPosted 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.
Chris
October 8th, 2011 12:09 amThis is just a bunch of flattened files. Not too useful but looks good I guess.
Liam
October 10th, 2011 1:57 amYou 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.
Miguel Peixe
February 8th, 2012 5:19 pmIt’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 :)
Bruno Belotti
October 8th, 2011 3:45 amJust in time for my on-going project! Cheers mate!
Naresh
October 8th, 2011 12:17 pmGr8 work. Thanks for sharing.
Justin
October 9th, 2011 6:38 amVery nice. Is there a layered PSD you could throw in with V2?
Mick
October 9th, 2011 6:22 pmJust a heads up that the zip file contains those annoying __MACOSX folders.
steve42
June 27th, 2012 2:06 pm^ heads up…post above contains annoying comment
Vali
October 9th, 2011 10:42 pmGreat work! Thank you!
Lime
October 10th, 2011 2:07 amReally 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)
northk
October 10th, 2011 1:06 pmThanks, this is very helpful. I have some books on best practices for form design, but the cheat-sheet is quick and easy. Well done!
desirableUX
October 10th, 2011 2:15 pmNice 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.
Piet
October 11th, 2011 4:43 amIf 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!
Ruby
October 11th, 2011 4:56 amThank you!
Rama
February 13th, 2012 8:12 pmPosted 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.
Jimmy
October 11th, 2011 6:09 amGood stuff, we need more like this.
Michael
October 11th, 2011 8:43 amNice guide! I wonder though if these standards change, with mobile/tablet designs…
Manuela
October 12th, 2011 3:04 amSimply said: thank you from my heart :)
BMihaelll
October 12th, 2011 3:59 amI was searching the web and stumbled upon your website. I really enjoyed reading your posts and will be back to interact with your community.
Mark Wienands
October 12th, 2011 10:52 amJust 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.
aShocka
October 12th, 2011 4:07 pmThis looks absolutely awesome, thanks!
Oliver Gitsham
October 13th, 2011 3:38 amThis is great – would love to see something similar for Axure that I could use as a template for prototypes.
knalle
October 14th, 2011 1:48 amI don’t get this: a PSD with no layers. uumm… ?
ProxY
October 31st, 2011 7:30 amThe PSD is not layered, but thanx anyway, very useful!
tahirm
November 1st, 2011 3:15 amthanks for sharing.
Rogerio
February 20th, 2012 8:16 pmWhy 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?
Aidan Green
November 2nd, 2011 11:53 pmGood 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.
williams
November 23rd, 2011 4:33 amGood work here..
I always found this type of information..
vishu agarwal
January 13th, 2012 4:56 amvery good…….supporting all time …….!!!!!!!!!!!!
Jesse Gilbride
November 10th, 2012 1:41 pmThe 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/
Emanuel
January 25th, 2013 2:52 amThanks alot for sharing this helping form. Regards.