How To Design The Perfect Form
Posted on 02. Feb, 2009 by Brian in Web Design
When your users have dedicated enough time on your website to be interested in your service or product, and want to learn more, there is no bigger turn-off than an inaccessible, unusable form. A form can be anything from a sign-up form, to an email opt-in form, to a contact form, and more. You want to make sure that these forms are convenient, easy to use, and of course, good looking, for any of these visitors that are interested in what you do.
In this post, I want to explore the countless tools and resource for designing forms, and I want to show you how you can use these tools to your benefit to create the perfect form that will help to maximize conversions, sales, subscribers or for whatever else you may be using your form.
Jump To A Section:
- What To Consider When Designing The Perfect Form
- Modern Examples Of Forms + Best Practices
- Contact Forms
- Web Forms: Tutorials And Resources
- Further Reading
What To Consider When Designing The Perfect Form
The following sections are meant to inspire you with new ideas to create the perfect form for your own website. Remember, each site has its own purpose and needs when it comes to forms, so while reading this post, keep your audience, site genre, and form purpose in mind.
I want to emphasize simplicity in this post – forms are all about making it as easy as possible for people to give you their time, their money, or their interest. If you have a complicated form that is hard to use, you will lose your readers’ attention.
Less Is More
When creating your form, remember that less is more. The fewer fields your visitors have to fill out, the more of them will actually complete the submission process. Let’s take a look at some online web forms to explore what makes them float or sink.
Facebook’s sign up form has only three main text input fields with two additional information objects (birth date and sex). This simplicity has made it easy for millions of people to sign up for their service.
On the other hand, take a look at MySpace’s sign up form.
First and foremost, this form is on an interior page meaning that users had to first visit the home page, then click “sign up.” Second, take a look at how big this form is – I counted fourteen information areas (including the CAPTCHA) for users to fill out. Fourteen! No wonder Facebook has already far surpassed MySpace (according to Alexa).
Even though Twitter’s sign up form is on an interior page of the site, I give them respect for making their form extremely simple and easy to fill out. With only four fields and a captcha, signing up is a breeze.
Context & Assistance
Forms can be made easier and more usable through the use of context and field assistance. What this means is that as you are filling out each field, the form is providing feedback to help you make sure you are doing everything correctly. The only true way to understand this is to check out the following picture:
Last.fm uses context assistance to help users identify when they have properly filled out a form. As you can see in the above picture, I got a green check mark for my username and passwords, but a red exclamation for my incomplete email.
These types of assistance save time and help users know that they are using your form correctly. Here are more examples:
Prominence On The Page
Even if your form is simple and easy to use, it won’t do you any good if your users can’t find it on your site. Having a prominent form, or a link to the form, is essential for streamlining the workflow of your visitors. Let’s take a look at some websites that have found places on their website that make it easy for users to find and use their forms:
WordPress puts a big button right to their sign-up form at the top of their site, giving it the most prominence, color, and attention.
Once a user clicks through to the sign-up page, the form takes up the entire screen. This form is big, easy to read and use, and simple. With only four fields to fill out, and a check box to click, it really is possible to have an account in seconds.
Netflix puts their trial sign-up form right on the home page, right where it counts. With only four fields to fill out, Netflix has made it extremely fast and easy for new visitors to get started on a free trial right away. This has contributed to the companies phenomenal success, having delivered over 1 billion movies.
Let’s compare this to Blockbuster who tries to offer a very similar service.
Take a look at their very content-heavy, image-overloaded homepage. So you want to sign up eh? Here are the options that they give you: a tiny link below the navigation and an image placed among advertisements on the right side. That’s it. Who do you think has more members?
Once you get to the registration form, you’ll find what appears to be a quick and easy form to fill out.
Distractions
Distractions can make or break a form. Ideally, once you have a user filling out a form, you want it to be quick and easy to fill out. The last thing you want is for the user to see another link of interest that takes them away from your form. These distractions often come when a website fails to optimize their registration page to reduce the distractions to a minimum.
When you are designing your form, keep in mind that you want people to actually finish filling it out. The fewer distractions that prevent them from doing this, the better. Often times this means getting rid of your sidebar, footer, and in some cases, a header, in order to give your form the most attention on the page.
Let’s take a look at Deviant Art. This website, normally packed with images and links, really cleans up its form page to remove any distractions, giving visitors straight, unblocked access.
A website that does similarly well in reducing distraction is Fresh Books. Stripping away every part of their website aside from their logo, navigation, and contact number, Fresh Books really puts emphasis on their forms to maximize registrations.
Windows Live follows suit by stripping away every link on the site and leaving only their logo and their form, front and center on the page.
Finally, Yahoo does a wonderful job of putting focus on their sign-up form for their mail service. Leaving only their logo and the form, users are pushed to complete the registration process.
Modals
Modals are a very new, and growing way, to build a unique, usable, and aesthetic form. A modal is a pop-up window that dims or darkens the background elements to reduce distractions and put maximum emphasis on the form. When done well, this method of form design will provide for a great experience for users and make registration a breeze. Let’s take a look at some websites, that are using modal windows to house their forms.
Reddit uses a modal window for both a login and registration form. Also keep in mind the ‘less is more’ rule when looking at Reddit’s form, which only has five fields.
The form on Hall Pass uses a very simple, minimalist modal form with only four fields to fill out! Not only does the form look great, but it is also very easy to use.
Meebo also uses a modal form. One minor thing that detracts from this modal window is the left half of the pop-up. It provides reasons for why people should be registering, but it is logical to assume that if someone has clicked the register link, they know why they want to sign up and what service they are signing up for.
Resources For Working With Modals
Modal Dialogues Using CSS & Javascript
jqModal : Minimalistic Modaling For jQuery
WordPress Plugin: SimpleModal Contact Form (SMCF)
Modals are a great way to work with forms, but be careful about your audience when using them. Older, less tech-savvy users may be less familiar with modals and might be inclined to think that it is some sort of pop-up advertisement.
Modern Examples Of Forms + Best Practices
To help you get ideas and inspiration for your own personal form, I’ve compiled a list of web forms organized by the type of site that they are on. When looking through these forms, keep in mind a few things:
- Simplicity – how many fields are required?
- Audience – who is the form targeted to?
- Prominence – where is the form on the page? Is it hard to find, or easy to see?
- Distractions – how much focus is put on the form?
Social Sites
Product Sites
Video Sites
Game Sites
Contact Forms
Contact forms get their own section in this post because they are different than any of the other sign up/registration forms that have been featured thus far. Contact forms serve a different purpose – getting in touch with someone – thus needing their own design style and rules.
Often times people figure that all a contact form needs is a few fields and a submit button. True, but why not be creative and try something different? Through the use of colors, icons, and other design styles, you can make your contact form stand out from the crowd and make it more usable and user-friendly.
Here is a collection of 20 beautiful and unique contact forms. While looking through these forms, keep the following in mind: color, layout, spacing, icons, text positioning, and the design of the submit button. Each of these elements help to make a contact form original and creative. Find a style that you like, and work with it to make it your own.
Web Forms : Tutorials and Resources
I have compiled a brief list of tutorials and online resources to help you get started creating the perfect form. Be sure to check out the online resources at the end of this section that offer great form creation for very low prices.
Form Development
A CSS Stylesheet Collection For Web Forms
Ajax Auto-Suggest Auto Complete Text Field
Online Tools
When writing this post, I consulted a couple of my Twitter followers to get their opinions on the use of forms in modern web design. I posed the question, “What is the most important element of design for a web form?” Here is what they said:
@Brendan_McNally – Getting it filled out>>.Striking the balance between too much information and true purpose or analysis.
@bryanzmijewski – Using fewer form fields will increase conversions (whether it be transactions, accounts or newsletters).
@WilhelmR – Context Popups with help/examples how to fill the fields. Kind of like those in in-text ads, but less annoying 
@Steve Moseley – I would say “readability” see the fields clearly and understand what to put where – I mainly employ white-space for this
@Aaron Is Here – The submit button. Why? If for no other reason then the fact that windows and mac default submit buttons look nothing alike.
@Kyle Roussel – I believe a form cannot be intimidating – i.e. everything “above the fold” and not spread over multiple pages.
Further Reading
Web Form Design Patterns: Sign-Up Forms
CSS Based Form: Modern Solutions
Web Form Design: Modern Solutions And Creative Ideas
For more web design tutorials check out the new tutorial site, The Tutorialist.
Share This Post
47 Responses to “How To Design The Perfect Form”
Leave a Reply
User Link Feed
Please submit your resources at Elite By Design. Elite By Design provides more traffic for your submissions!
Wolferey
02. Feb, 2009
Insane.. just.. insane O_O
ReplyGreat work! xD!!
Brendan
02. Feb, 2009
Great list of examples!!
Don’t think I’d want to use online tools at the moment to create my forms for me but the tutorials look good, will have to look over them when I have more time…
Great work though Brian!
ReplyAnshu IT Solution
02. Feb, 2009
Great Work..
Replyreally helpful
joyoge designers' bookmark
02. Feb, 2009
Great list of examples! thanks..
ReplyMarco
02. Feb, 2009
Wow – Amazing list Brian, well done! Complete and with great examples
.
Thanks for sharing this info!
ReplyJessica Routier, IAC-EZ
02. Feb, 2009
What a great post! Very in-depth on a much-overlooked detail!
ReplyCaroline Jarrett
03. Feb, 2009
Loved the collections of examples.
If you’re faced with dealing with a registration form, you might enjoy my article: “Registration forms: what to do if you can’t avoid them”
http://www.usabilitynews.com/news/article2629.asp
(Shameless plug: our book goes into more types of forms in more depth: http://www.formsthatwork.com)
best
ReplyCaroline Jarrett
Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
04. Feb, 2009
[...] How To Design The Perfect Form | Web Design Tuts The Perfect Storm. I mean. Form. (tags: design webdesign showcase marketing web ergonomie form pattern webstandards benchmark interface usability inspiration tutorial) [...]
ReplyBrian
06. Feb, 2009
Thanks everyone for the great response – I’m glad you enjoyed the post and hope it helps!
ReplySujhon
07. Feb, 2009
Nice post! like it..
Just to point out all the free online forms builder can be found here
http://i-exist.co.cc/2009/01/24/best-and-free-online-form-builder/
ReplyLiam
07. Feb, 2009
A lot of your examples have right-justified label text. I don’t know if anyone can definitively say that right-justified label text is a bad thing, but a lot of people have tried
due to the tendency for English readers to scan from left to right. Just something for readers to keep in mind.
ReplyJo
07. Feb, 2009
Great (long!) list thanks. It’s always enlightening to get so many examples crammed into one space.
Liam, on the left/right align issue – I find that it normally boils down to the variability of the label length, so when it comes to a site-wide choice it ends up being right aligned in the css.
And then you have the label above vs label inline choice.. and that ends up being a page by page choice depending on various factors.
Each to their own.
ReplyDesigning the Perfect Form | Design Shack
08. Feb, 2009
[...] View Post [...]
Replyricardo filipe » Blog Archive » CSS and Web design tips!
08. Feb, 2009
[...] How to Design the Perfect Form, by Web Design Tuts [...]
ReplyLarry Roth
08. Feb, 2009
Thanks for the indepth post! I have always been a proponent of simple, minimalist forms with a focus on legibility. But your post has helped to inspire me to explore the variety of options available to someone creating a form. In particular, I really liked the semantic horizontal form example and I am going to definitely explore that further.
The only item I would add, would be to humbly suggest that form designers also consider accessibility so that Web surfers using assisted technologies can properly use the form.
ReplyAn overview of form design for the Web | LarryRoth.net
08. Feb, 2009
[...] Roth on Feb.08, 2009, under Usability, Web There is a great post on Web Design Tuts discussing How to Design The Perfect Form. The author does a great job of showing many different examples, but in particular, he breaks down [...]
ReplyLifeStyle Link#2 | LifeStyle Web
08. Feb, 2009
[...] How to Design a Perfect Form – Ecco un ottimo esempio di articoli che voglio arrivare a produrre ed a offrirti per migliorare le tue conoscenze in questo campo! Questo è un articolo teorico, quindi non troverai codice che ti permetterà di realizzare dei form, ma ti permetterà di accrescere le tue conoscenze in questo campo. Infatti tramite una approfondita analisi dei punti di forza dei vari siti web, potrei capire come iniziare a sviluppare form usabili, che sono il centro focale di qualsiasi metodo di contatto! [...]
ReplyLarissa Reynolds
08. Feb, 2009
Hi Brian, great great post. Thanks for compiling all of these resources and samples!
One thing I’d add is to skip any kind of CAPTCHA or other roadblocks for visitors to complete forms. Alternatives like Form Armor can help manage Web form spam without disrupting the customer experience (not to mention all the hard work you’ve invested in designing the perfect form).
ReplyBest Practice in Web Forms | Chicago Computer Advice
08. Feb, 2009
[...] Check out the article here. Don’t forget to check out DQSupport’s Chicago Web Design group page as well! Written by admin in: Uncategorized | [...]
Reply?????????(2009/02/09) - sj6works
08. Feb, 2009
[...] How To Design The Perfect Form ???????????? [...]
Replylinks for 2009-02-08 « riverrun meaghn beta
08. Feb, 2009
[...] How To Design The Perfect Form | Web Design Tuts (tags: webdesign forms interactive) Possibly related posts: (automatically generated)Two memes, one postTaxpayer group responds to President Bush’s budget proposalToday’s del.icio.us bookmarks [...]
Replylinks for 2009-02-08 « Mandarine
08. Feb, 2009
[...] How To Design The Perfect Form | Web Design Tuts (tags: form webdev webdesign tutorial inspiration usability) [...]
ReplyPatrick
08. Feb, 2009
Really nice collection of examples here.
Go easy on the commas though.
ReplySelvam
09. Feb, 2009
awesome….thanks
ReplyDave Sherohman
09. Feb, 2009
I’m going to have to disagree with you on modal forms. While they are, as you said, clean-looking and effective at clearing away distractions, they suffer from the same problem as modal forms in traditional desktop applications:
They lock the user in to a specific action.
Granted, it’s not as solid of a lock-in, as the user (if he’s expecting a modal) can open a second copy of the page to use for reference or to copy/paste from, but it’s still bad practice to say, “You are registering. You may not do anything else until you are finished registering!”, even if there is an easy workaround to escape that restriction.
ReplyPablo
10. Feb, 2009
Great post! You’ve really done your homework!
Lots of great examples for each of the sections.
Thank you.
ReplyLori Cappozzi
11. Feb, 2009
Great job, thank you for great examples about web form, this help me much.
ReplyPerfect Form | Remgo Design
11. Feb, 2009
[...] want to explore the countless tools and resource for designing forms, and I want to show you how you can use these tools to your benefit to create [...]
Replykovshenin
12. Feb, 2009
I redrew all my forms after reading this.. Thank you!
ReplyLauraLee
12. Feb, 2009
This is great post, certainly have to revisit my work
thanks
Reply.net DEvHammer : Designing Good Web Forms
13. Feb, 2009
[...] across this really thorough and interesting article on form design and development via Jeff Schoolcraft, and thought it was worth [...]
ReplyGood Links, February 15, 2009 « Emad’s Weblog
15. Feb, 2009
[...] Designing the perfect form: http://webdesigntuts.com/web-design/how-to-design-the-perfect-form/ [...]
ReplyJosh Walsh
17. Feb, 2009
These are some examples of good forms, but I’d like to see designers pay more attention to vertical rhythm. Some of these examples have strange whitespacing.
Some forms benefit more from labels on top, vs on the side. Some of the labels could be closer to the input elements as well.
ReplyDesigning the perfect form « Absolute Bits & Beats
26. Feb, 2009
[...] 26, 2009 I came across this interesting post on form design and development, and thought it was worth sharing, it shows by example what to consider when designing the prefect [...]
ReplyErika
03. Mar, 2009
Outstanding post. I’m in awe at the amount of resource you’ve pulled into one place. The examples and commentry are superb. Thank you very much!
ReplyHow To Design The Perfect Form -Reblog | Remarkable Things
20. Mar, 2009
[...] http://webdesigntuts.com/web-design/how-to-design-the-perfect-form/ [...]
Reply33 Dinge die kontrollliert werden müssen! webdesign, tipps, tricks, checkliste | daswebdesignblog.de :: Artikel, Tutorials, Freebies und Interviews
12. Apr, 2009
[...] oder ein umfangreiches Formular zur Bestellung eines Zeitschriftenabo. Der Artikel “Wie gestaltet man das perfekte Formular” ist ganz [...]
Replysriganesh
27. Apr, 2009
http://webdesigntuts.com/web-design/design-the-psdtuts-website-in-photoshop/ – this link is not working, i came thru photoshoplady.com and its shows NOT FOUND.
I NEED AND SEARCHED FOR MANY MONTHS THIS PSDTUTS WEBSITE TUTORIALS, I CNAT GETIT. SO PLZ TRY TO FIX THAT.
ReplyLista de forms bonitos | CSSBlog ES
01. May, 2009
[...] Vía | Webdesigncuts [...]
ReplyBlogBuzz May 9, 2009
09. May, 2009
[...] How To Design The Perfect Form [...]
ReplyCSS and Web design tips! - ricardo filipe
31. May, 2009
[...] How to Design the Perfect Form, by Web Design Tuts [...]
ReplyRealisation-Site-Internet » Blog Archive » Gloubi-boulga de blogs #3
17. Jun, 2009
[...] lire aussi, une étude intéressante sur les formulaires d’inscription sur Web Design [...]
Reply?????
12. Oct, 2009
awesome ! nice information thanks .. how to design http://games.m5zn.com
Replyits free online games site…
?????
31. Oct, 2009
If anyone of you have any interest in playing online game then visit the link where you can find all kind of games to play.
Replyislamiyet
01. Dec, 2009
thanks islamiyete.com
ReplyXpa???e??
31. Dec, 2009
?? ???????, ????? ?? ????? ???? ?????????
ReplyMichel
07. Feb, 2010
Excellent in depth information and explanations. Thank you.
Reply