Useful Ideas And Guidelines For Good Web Form Design

Advertisement

The input form is an essential element of almost any website or application these days. Input is a core method of interaction, and in many cases it represents the hard conversion point between success and failure. With the amount time and effort we put into bringing users to our sign-up and contact forms, it’s surprising that we tend not to spend a proportional amount of time on the forms themselves.

A number of techniques and elements can be used in Web forms to turn them from abject failures into successful conversion points. In this article, we’ll present some interesting examples and useful guidelines for Web form design.

A Dash Of Quirkiness

Part of Web design is about communicating personality and being relatable, because people enjoy dealing with other people. One quality that almost always helps is a bit of quirkiness and fun. A small dose of friendliness and personality will make the input process a bit more enjoyable and human.

Jarad Johnson

Jarad Johnson1‘s contact form has a flavor of good ol’ post card. The visual appearance of the form makes it stand out from the usual generic forms found elsewhere. A very nice touch to an often forgotten element of Web designs. By the way, the Postage for the email postal service was already paid. Good to know. Very well done.

11jarad in Best Practices of Web Form Design2

Red Tiki

Red Tiki3’s quirkiness is tied to the company’s brand and identity, but is powerful here nonetheless. From the frame motif to the wooden character peeking out, this form feels fun and approachable. Little colloquial phrases like “This lovely form” and “We’re always keen to lend an ear” are fantastic ways to make the company more relatable. The form is bursting with personality and flare, which helps the user complete the form and click the “Submit” button.

4

Applicom

Applicom5’s form is a great example of how to be clean and professional without being sterile. Styling the form like a letter — with a stamp, subtle paper texture, striped edge and handwritten addressee name — may seem cliche, but it demonstrates a certain level of personality and care. Language such as the “Do: Be fine, use your real address. Don’t: Be negative, spam” may seem trivial, but it’s important. At the end of the day, it makes users feel like they are dealing with people who aren’t afraid to speak to them. Craftsmanship always indicates care and professionalism. People like that.

6

Sophie Hardach

Sophie Hardach7‘s form is another example of a post card idea implemented in a contact form. The input fields are a bit clearer than one would think, yet the “Submit”-button is a bit more difficult to find. In order to send the message, a stamp in the right upper corner needs to be dragged to the Stamp area of the form. In fact, the form is not only very original, but also accessible. Excellent work.

20sophie in Best Practices of Web Form Design8

Two Paperdolls

Two Paperdolls9 has probably the busiest contact form of all the forms featured in this article. However, the form fits wonderfully to the overall design of the page which is a “We Are Hiring” page for designers with strong focus on typography. Notice the clean real-time validation for the form: the error indicator is diplayed in the right upper corner of each input field. Too bad that the navigation through form fields doesn’t work properly with “Tab”.

10twopaper in Best Practices of Web Form Design10

Kontain

Kontain11 uses a different kind of a date picker for letting users pick the date for the form. The designers have arranged the dates in four rows rather than displaying them all vertically. A nice idea for reducing the horizontal scrolling for the users.

Kontain12

Wopata

Wopata13‘s slider for the timeframe in their contact form is much different from the generic sliders, select-menus and radio buttons. This is a proof that filling in Web forms can be fun.

Information Technology Development Company iPhone iPad Android PAD14

Fi

The language used on Fi15 is more friendly than formal. The inviting nature is reinforced by the short colloquialism for each form field that illustrates why the information is being requested. The language of labels should give off a little charm, without being insincere or overbearing. Isn’t everyone more engaged in a conversation if the other person is pleasant and approachable?

16

egopop

egopop17 has a very simple, perhaps oversimplified contact form which however has a nice touch. The weird character on the right side plays wonderfully together with the other characters on the site and makes the contact form less boring than it would be otherwise. The contact form opens in a lightbox.

6egopop in Best Practices of Web Form Design18

Idyllic Creative

Some forms are boring, while some are beautiful. Idyllic Creative19‘s contact form is remarkably simple yet beautiful. Another example of a design agency which integrated a character from their work in their contact form.

8idyl in Best Practices of Web Form Design20

Tinkering Monkey

Tinkering Monkey21‘s character on their contact page is another interesting example of how the contact form page can be made a bit less boring. Notice the FAQ area on the right side of the contact form. An excellent idea for helping customers quickly find answers to their questions once they feel lost and can’t find a solution to their problem.

25tinkering in Best Practices of Web Form Design22

Ditio

Ditio23‘s designers have decided to combine their sign up form and a contact form in a hidden sidebar box, very much like it’s often done with the fixed “Give feedback” buttons on the left or right side. Once a trigger button “Inschrijven” is clicked, users can sign-up for their account and even upload a CV. Notice that there is no textarea available for lengthy details.

Ditio - Project Controls Management24

Treehouse Editing

Treehouse Editing25’s contact form is another example of a quirky design with a clean and lean layout. When the user navigates to the page, the background changes to a spring theme, which is itself associated with making contact, thus encouraging them to fill out and send off the form. Notice that all that is necessary for initial contact fits into a couple of fields; further information can be collected in subsequent correspondence. Ask yourself whether a minimal layout would do the trick on your website as well.

26

Amazee Labs

Amazee Labs27 doesn’t have to do much to make its form usable and inviting. The form has only a few quirks, namely the texture, the “Hi there, let’s get in touch!” line, and the “Send It!” button. It may not seem like much, but the casual language, careful color choice and overall texture help Amazee Labs instantly feel like a friendly and easygoing bunch.

28

Wing Cheng

The motif of Wing Cheng29’s website is an open sketchbook, with most of the sections designed as sketches and thumbnail drawings. The contact form maintains this personality and coherency by following the motif. The form is simple and appropriate. The thought diagram with the email address adds visual interest. Maintaining the hand-drawn style is what brings out the quirkiness. Imagine how jarring and uninviting this form would be if it was a default HTML field set stuck on top of a beautiful paper texture.

30

Break It Down

No one likes a humongous unending list, especially a list of elements to fill in or interact with. Just as a giant paragraph of text is daunting to the user, so is a giant block of empty fields. To coax the user to the finish line, the designer should make them feel like they are completing steps, or bite-sized chunks. Take a giant web project: trying to wrap your head around it all at once is almost impossible. But if you break it down into goals, and then stages, and then sets of tasks, it becomes much more manageable. This is what we want in a Web form, especially if you’re asking for a sizeable amount of information. Keep in mind that you can organize a form simply by sectioning off parts of it or by arranging the content into columns.

CollisonLabs

CollisonLabs31‘s contact form might appear to be a bit too complicated at the first glance, but it’s quite straightforward. The left side of the contact page contains alternative contact information as well as a map which is designed with the overall design of the website in mind. On the right side, each input field is clearly represented and highlighted when the user fills out the form. Nice, clean work.

14collision in Best Practices of Web Form Design32

Visual Republic

Visual Republic33‘s choice of design for input field labels is similar to the solution by guys over the CollisonLabs. Giving the field label a solid background with an arrow to indicate where the text would need to be typed is a nice technique that could be used more often.

26visualrepublic in Best Practices of Web Form Design34

CSS Tricks

CSS Tricks35‘s comment area is a great example of a well-organized, helpful and clean comments area. Notice how the “star” image in the text area fades away as the user types in some text in the form.

Screen Resolution ? Browser Window36

Barley’s Greenville

Barley’s Greenville37‘s form for beer rating is an interesting example of how multiple sections can be combined to make the form intuitive and easy to use. Notice the arrow-like symbol between the first and the second section as well as various shades of the brown color within the form.

Barley's Greenville - Beer List38

Blue Sky Resumes

Blue Sky Resumes5139 uses sections to make its extremely long form much more manageable. Standard headings and horizontal rules are used to divide sections. The designer was also careful to visually distinguish the different sections so that the form doesn’t look like a long list of fields.

Image17 in Best Practices of Web Form Design40

Validate Clearly

Users will not spend extra time making sure they have given you all of the information you need. Many designers believe that form validation detracts from the user experience, but its effects are adverse only when done poorly. When validation is simple and clear, it merely offers alerts and guidance to the user.

Make sure that you clearly mark the problem and tell the user exactly what is wrong. The fastest way to kill the user experience is with generic error alerts that mean nothing to the user. People are more than happy to quickly fix an issue if it is pointed out to them plainly.

Moody International

Moody International41 provides an excellent example for a contact form that nicely combines different types of contact information in one place. On the left, you’ll find a postal address along with a map, a phone number as well as the company’s email address. The right side is dedicated for more detailed inquiries and consulation requests. The form’s labels disappear once the user has provided their data. Unfortunately, the form doesn’t have an instant real-time validation and uses JavaScript pop-ups to inform the users about their input mistakes. Besides, the map on the left side could be integrated a bit better by using zoom controls as well as search functionality provided by Google Maps.

1moody in Best Practices of Web Form Design42

El Passion

El Passion43 is another example of a contact form that combines various types of contact information in a very compact and meaningful way. Real-time validation in use. The map on the left side could be zoomable, though.

5elpassion in Best Practices of Web Form Design44

Orlando Advertising

Orlando Advertising45‘s form beautifully integrates its branding colors in a clean and attractive Web form. The red borders might be misunderstood and could be used to visually highlight errors in the form, but instead validation errors are displayed once the “Submit” button is clicked.

28soap in Best Practices of Web Form Design46

Reinvigorate

There are usually two essential elements to effective form validation: identifying the specific problem, and clearly marking how and where to fix it. Reinvigorate47 uses an alert icon and a loud red outline to indicate the problem, and then it uses the side column to tell the user what’s wrong with the information. Moreover, the user gets a visual indication when the information is corrected. Being clear about the problem and not leaving the user in the dark make for a smooth experience.

Reinvigorate in Best Practices of Web Form Design48

GitHub

GitHub49‘s sign up form is as simple as its overall design, yet its beauty lies not in aesthetics, but in its functionality. When you enter your credit card details, GitHub automatically recognizes the credit card provider and visually highlights it in the form, thus providing instant feedback to the user. A wonderful example of invisible design.

15-1-github1 in Best Practices of Web Form Design50

15-2-github2 in Best Practices of Web Form Design

Blue Sky Resumes (revisited)

I would like to point out another great part of Blue Sky Resumes5139’ form. The error alert is clear and specific. By specifically telling the user that their name is missing, the user is spared confusion and is able to find their bearings quickly. To reinforce this message, the name field is clearly highlighted and marked as required.

Bluesky 03 in Best Practices of Web Form Design52

Interactivity

A form is an interactive part of a website or application. In general, people want to interact with elements that feel alive and that follow convention. Many forms have a slight indent, creating a slight 3-D effect, whereas other forms simply show a box outline to delineate form fields. The key to any interaction is expectation and feedback. Make sure your forms react to user input, mainly by specifying the focus and hover states of input elements.

Grooveshark VIP

On Grooveshark53, its styling of the focus and active element makes it clear which field is being interacted with. Besides, erors are displayed in a nice, helpful way while error messages are displayed at the top of the “window” using Ajax.

54

The design helps the user to maintain focus and to breeze through the form. It even makes it kind of fun, because the user wants to see a response when they click on or interact with an element.

Unlocking

Unlocking55‘s checkout form is a nice example of how simple design can work very well with appropriate level of responsiveness. The input fields look nice, the hover state is very clear and the hints on the right side are helpful and unobtrusive. The contact form shows a subtle blue background when the user focuses on a field.
The form uses an additional color to highlight fields. As long as the interaction creates a noticeable effect, the form will be more usable.
The highlighting is not as bold as on some other sites featured above, but still effective and interactive and perhaps even more usable.

Checkout56

Jason Long

Jason Long57‘s form silently sits on the page, doing nothing, unless… well, unless you send it out. Jason uses an animated contact form which flips and changes as the message is being sent. An interesting, memorable tweak that makes the user experience just a tiny bit more interesting.

38-1-black in Best Practices of Web Form Design58

38-2-black in Best Practices of Web Form Design59

38-3-black in Best Practices of Web Form Design60

The Finish Line

An effective Web form should get the user to cross the finish line. It might be a “Submit” button, an order confirmation button or a sign-up button. At the end of the day, the designer wants the user to hit that conversion point and be reasonably happy with their decision.

Make sure that the way of submitting the form is bold and specific. Where possible, use language like “Send email” or “Finish signing up,” so that the user understands exactly what the button will do.

Squarespace

On Squarespace61, the designer has gone as far as to label the button “Finish & Create Site” and has also made note of its function just below. This page is especially effective because of the contrast: the layout is completely monochromatic, so making the button green puts more focus on completing the process.

62

BLITZ

BLITZ63 has come up with an interesting solution for their contact form. A content block appears in a lightbox and presents three different types of contact forms: inquiry about business, jus saying “Hi” and CV submission. The forms have a similar appearance but have a different structure. In all cases, the user has a checkbox for email updates at the bottom as well as postal address under the form. One confusing bit is that the form fields get a red border when you type in your data. Some users might confuse it with error notifications.

12blitz in Best Practices of Web Form Design64

Custom Bags HQ

Custom Bags HQ65 has tried to combine various content blocks within one context. The “Contact” link in the upper navigation leads to a page which contains both the contact form and the “About us” information. In our opinion, “About us” doesn’t really detract from the user experience, but it doesn’t enhance it either. The link doesn’t feel right here, at least at the first glance. Interesting idea: the form contains a checkbox asking users if they are interesting in receiving an email newsletter. A smart handle to keep customers close to you and keep them informed about your updates and news in the future.

Contact us - Custom Bags HQ66

Clear Labels

Any interaction that we encourage must be as non-threatening as possible. After all, we are asking for personal information of the user. They are under no obligation to provide it. The first step to avoiding frustration and confusion is to use plain and simple language. Make it to the point and not flowery.

Foundation Six

Foundation Six67’s labeling is effective because it streamlines the process and simplifies commitment for the user. The company boils each category of information down to one word. The “Submit” button is also clear and straightforward. There is no confusion in the user’s mind. Another strength here is the balance between multiple choice and fill in the blank (which we’ll get to below).

Foundationsix 01 in Best Practices of Web Form Design68

Bärnt&Ärnst

Bärnt&Ärnst69‘s designers follow their minimalistic approach to design and provide all contact information such as postal address, phone numbers, email as well as a short form for user’s convenience. Often you really don’t need to require more information than that for the initial email.

2born in Best Practices of Web Form Design70

Zoltan Hosszu

Zoltan Hosszu71‘s contact page illustrates how icons can be used effectively to indicate the purpose of input fields. The form itself is very simple and quite unspectacular, but icons as well as some subtle textures make it a bit more distinctive and interesting.

Contact form72

Stuck Axiom

The labels in Stuck Axiom73’s “New business” contact form are short and concise. The simple language and clear labeling make the form non-threatening and easy for the user to fill out. Contrasting with the gray of the form fields, the “Submit” button is set off and accented in red, making it clear where to click.

Solid Giant

With clear labeling, not too many check box options and predefined budget ranges, Solid Giant74 can get back to a potential client with a precise offer. The “Submit” button is clear and straightforward, marking the end of an intuitive path through the form. All elements are described carefully, and there is no room for the user to misinterpret what information to enter where.

75

Joey Rabbitt

Joey Rabbitt76 isn’t a fan of lengty emails. The message of the textarea can contain at most 500 characters. However, if the user would like to email Joey directly, he can use an email on the right side of the page. Joey also showcases the networks he is a member of as well as his current location. Notice how beautifully the content is designed by using icons and various colors of grey throughout the page.

4joey in Best Practices of Web Form Design77

Multiple Choice Vs. Fill In The Blank

Selecting items from a list is naturally easier than filling in a blank. A blank sometimes raises more questions than it answers, especially if the labeling is not clear or there are too many empty fields. The user may be confused by the format, the type of information being requested or how exactly to answer a question. In general, a choice is better than a blank, especially with information that could be confusing, such as scope, budget, project type, etc. This is why most order forms do not require you to fill out every piece of information.

Pieoneers

Pieoneers78 uses the fill-in-the-blank format in the left column for generic information, with established conventions for format and type. On the right, more complicated questions are in the form of drop-down boxes, letting you choose between broad options, so that there is no confusion or hesitation.

79

Information Highwayman

Information Highwayman80 cleverly combines multiple choice and fill in the blank. The empty fields are for simple bits of information specific to the user: name, email address, comment. These are all non-threatening and could not be formatted as multiple choice. Questions related to services sought and budget tend to be more complicated. Giving user some options here simplifies the process of explaining what you’re asking for.

Informationhighwayman in Best Practices of Web Form Design81

Facio Design

Facio Design82‘s contact form is probably the most difficult contact form featured in this article, and rightly so. The choice of typeface and the font size is suboptimal as it is very difficult to read, especially on Windows. The designers have tried to mimic the appearance of a letter, but it doesn’t quite work here. Perhaps a very simple, basic form would work better here. Please notice that according to some83 studies84, using this Madlib style form design could increase conversion (thanks, Larry from the comments), but we believe that in this specific case aesthetics doesn’t aid the functionality of the form.

Contact Essex based Facio Design about your next Web design, mobile UI or Email project85

Conclusion

This overview covers a few simple best practices that you can apply to Web forms. Just remember to spend the extra time on your next website; many of these approaches are not hard to implement and will lead to much higher conversion rates, but they are often overlooked. We spend so much time getting people to the door that we forget to make the door as inviting and useful as the path to it.

Useful Sources

(al) (il) (vf) (sp)

Footnotes

  1. 1 http://www.jaradjohnson.com/
  2. 2 http://www.jaradjohnson.com/
  3. 3 http://www.redtiki.com.au/contact
  4. 4 http://www.redtiki.com.au/contact
  5. 5 http://www.applicomhq.com/contact/
  6. 6 http://www.applicomhq.com/contact/
  7. 7 http://sophiehardach.com/#contact
  8. 8 http://sophiehardach.com/#contact
  9. 9 http://www.twopaperdolls.com/hiring/
  10. 10 http://www.twopaperdolls.com/hiring/
  11. 11 http://www.kontain.com/signup
  12. 12 http://www.kontain.com/signup
  13. 13 http://wopata.com/en/quotes/new
  14. 14 http://wopata.com/en/quotes/new
  15. 15 http://f-i.com/
  16. 16 http://f-i.com
  17. 17 http://www.egopop.net/
  18. 18 http://www.egopop.net/
  19. 19 http://www.idylliccreative.com.au/contact-us/
  20. 20 http://www.idylliccreative.com.au/contact-us/
  21. 21 http://www.tinkeringmonkey.com/site/have-a-question/
  22. 22 http://www.tinkeringmonkey.com/site/have-a-question/
  23. 23 http://www.ditio.nl/
  24. 24 http://www.ditio.nl/
  25. 25 http://www.treehouseediting.com/
  26. 26 http://www.treehouseediting.com/
  27. 27 http://www.amazeelabs.com/contact
  28. 28 http://www.amazeelabs.com/contact
  29. 29 http://www.wingcheng.com/
  30. 30 http://www.wingcheng.com/
  31. 31 http://collisionlabs.com/contact
  32. 32 http://collisionlabs.com/contact
  33. 33 http://visualrepublic.net/
  34. 34 http://visualrepublic.net/
  35. 35 http://css-tricks.com/9778-screen-resolution-notequalto-browser-window/
  36. 36 http://css-tricks.com/9778-screen-resolution-notequalto-browser-window/
  37. 37 http://www.barleysgville.com/beer-list/
  38. 38 http://www.barleysgville.com/beer-list/
  39. 39 http://www.blueskyresumes.com/get-a-quote/
  40. 40 http://www.blueskyresumes.com/get-a-quote/
  41. 41 http://www.moodyinternationalllc.com/contact/
  42. 42 http://www.moodyinternationalllc.com/contact/
  43. 43 http://elpassion.pl/contact
  44. 44 http://elpassion.pl/contact
  45. 45 http://soapboxmarketinggroup.com/contact/
  46. 46 http://soapboxmarketinggroup.com/contact/
  47. 47 https://www.reinvigorate.net/signup/?pro
  48. 48 https://www.reinvigorate.net/signup/?pro
  49. 49 https://github.com/signup/medium
  50. 50 https://github.com/signup/medium
  51. 51 http://www.blueskyresumes.com/get-a-quote/
  52. 52 http://www.blueskyresumes.com/get-a-quote/
  53. 53 https://vip.grooveshark.com/signup
  54. 54 https://vip.grooveshark.com/signup
  55. 55 https://secure.unlocking.com/checkout.php#top
  56. 56 https://secure.unlocking.com/checkout.php#top
  57. 57 http://blackantmedia.com/
  58. 58 http://blackantmedia.com/
  59. 59 http://blackantmedia.com/
  60. 60 http://blackantmedia.com/
  61. 61 https://www.squarespace.com/signup/
  62. 62 https://www.squarespace.com/signup/
  63. 63 http://www.blitzagency.com/
  64. 64 http://www.blitzagency.com/
  65. 65 http://www.custombagshq.com/about/contact
  66. 66 http://www.custombagshq.com/about/contact
  67. 67 http://www.foundationsix.com/contact/
  68. 68 http://www.foundationsix.com/contact/
  69. 69 http://www.barntarnst.com/?p=contact
  70. 70 http://www.barntarnst.com/?p=contact
  71. 71 http://www.zoltanhosszu.com/contact/
  72. 72 http://www.zoltanhosszu.com/contact/
  73. 73 http://www.struckaxiom.com/
  74. 74 http://solidgiant.com/
  75. 75 http://solidgiant.com/contact/
  76. 76 http://joeyrabbitt.com/contact/
  77. 77 http://joeyrabbitt.com/contact/
  78. 78 http://www.pieoneers.com/get_in_touch
  79. 79 http://www.pieoneers.com/get_in_touch
  80. 80 http://informationhighwayman.com/contact/
  81. 81 http://informationhighwayman.com/contact/
  82. 82 http://www.faciodesign.co.uk/contact/
  83. 83 http://www.globaluserresearch.com/blog/2011/03/should-we-use-mad-libs-style-form
  84. 84 http://www.lukew.com/ff/entry.asp?1007
  85. 85 http://www.faciodesign.co.uk/contact/
  86. 86 http://www.alistapart.com/articles/sensibleforms/
  87. 87 http://www.getelastic.com/form-design-11-patterns-for-accepting-user-input/
  88. 88 http://www.lukew.com/ff/entry.asp?502

↑ Back to topShare on Twitter

Shawn Borsky is an interface and brand designer. Shawn runs Anthem Design Group and posts thoughts on branding and design via his blog, The Borsky. You can follow Shawn on Twitter or get in touch with him through his blog.

Advertising
  1. 1

    OMG thanks for the feature! <3

    Great collection of form designs.

    7
    • 2

      Would you guys be so kind to correct my surname in the article, please? It’s written with double s. Thanks!

      4
  2. 3

    Pretty awesome list. I was looking for some ideas on designing new form your list inspired me alot. Cheers :)

    1
  3. 4

    Shawn, thanks so much for featuring us (Collision Labs) in your article!

    Really great list, it’s awesome to see how far people are pushing form design these days. Rock on.

    5
  4. 5

    Love this line up! great post! Glad to see designers are taking form design seriously these days, great inspiration!

    2
  5. 6

    Fantastic article, Shawn. Lots of inspiration and techniques to build off of. Appreciate the feature!

    2
  6. 7

    Scott Stubblefield

    June 27, 2011 11:38 am

    I definitely love the creativity. Lots of inspiration here for sure. Every single form is simple and easy to figure out, the way they should be.

    2
  7. 8

    Caroline Jarrett

    June 27, 2011 12:31 pm

    Lots of fun ideas here, for contact forms.

    But: why is there such an outbreak of labels inside boxes, and hint text inside boxes? And whatever point is there in putting hint text inside the boxes that is exactly the same as the labels outside the boxes i.e. Ditio?
    (See my article on UXmatters.com “Don’t put hints inside boxes on web forms”)

    I’d love to see some of these ideas applied to complex forms such as an insurance application or a tax form. I have some doubts about the practicality – my experience has been that it’s really, really hard just to get the lawyers and policy people to agree to writing the forms in plain language, never mind adding a touch of humour.

    And I do wonder whether the ‘touch of humour’ might get a bit irritating, possibly extremely irritating, over the length of something more challenging than a contact form.

    Also, be warned. In 2005, a tax official in Middleton, Ohio was suspended for a week without pay and nearly lost her job because she tried to enliven a tax form with a touch of humour. (Search for ‘tax official suspended for tax form joke’ to pick up the story).

    best
    Caroline Jarrett
    Co-author: “Forms that work: Designing web forms for usability”

    6
    • 9

      Much more comprehensively put than my reply! I have had the horror of dealing with the kind of forms you talk about and my feeling is that most people dont’ ‘get’ forms properly, the main issue is making them usable, to make the chore of filling in reams of information as painless as possible.

      0
  8. 10

    Caroline Jarrett

    June 27, 2011 12:32 pm

    Oops- said ‘touch of humour’, meant ‘dash of quirkiness’.

    -1
  9. 11

    Great article, I always appreciate a good form design. So often are they neglected. Nice work!

    2
  10. 12

    D Bnonn Tennant, Information Highwayman

    June 27, 2011 2:20 pm

    Howdy Shawn; thanks for featuring my site here. A couple of comments that other designers may find helpful re forms:

    1. In spit testing, forms that work the fields into the copy, rather than simply laying them out in a grid fashion, convert up to 50% better. (You can look at my own site for an example!)

    2. It’s surprising to see so many sites still using the word “submit” for their buttons. Look it up in the dictionary. Do you really want those kinds of connotations for you call to action? Using pretty much anything else will increase you conversion rates.

    Kind regards,
    Bnonn

    1
  11. 13

    Thomas Bachmann

    June 27, 2011 2:33 pm

    Nice collection, but I am missing how to design the big forms where I am querying for username, password, billing address, company address, account’s subdomain, terms and conditions, captcha, credit card information, version of product etc.
    Thomas

    2
  12. 14

    The contain DatePicker is aweful. Normally you have a week per row and therefore know which “Day in the week” you’re clicking. Imo that’s the opposite of improvement…

    3
    • 15

      I believe the Kontain form is an example of great design when given context. It’s true they don’t show the days of the week, but they are asking for your date of birth, so why would they need to? When asked your date of birth, the day of the week is no longer applicable, thus making this an improvement for their specific needs.

      PS — I accidentally down-voted you when trying to click reply… damn buttons are so small and close together. I tried to undo it, but can’t figure out how. I apologize, Kaiser.

      0
      • 16

        Hi Jarad,

        I aggree on “they are asking for your date of birth”. In this context it’s ok, as long as ain’t got a second date picker anywhere on the site. When this is the first impression you get of a contain-datepicker, then the majority of non-tech savy users will be slightly confused, because they don’t get delivered the datepicker they’re used to.

        P.s. Don’t worry on downvoting. I really don’t care :)

        -1
  13. 17

    I must say these ideas and guidelines for web form design is awesome. Great source for designers to learn something new always here on smashing magazine.

    1
  14. 18

    Sagar S. Ranpise

    June 27, 2011 11:49 pm

    Awesome Roundup on contact forms!!!

    0
  15. 19

    Nice collection of forms there! Some really great ideas….

    I’d like to add;
    homesense.com/page/friends
    to this list though!

    :)

    -1
  16. 20

    Srinivas Kothuri

    June 28, 2011 3:16 am

    Cant resist myself from appreciating you.
    Great collection . .. .!!! Thanks a lot . . . .!!!

    1
  17. 21

    This is a very timely post as I am setting up a new web now where the contact page (i hope) is going to play a very important role.

    As always a cracking selection of examples!

    Good luck!

    1
  18. 22

    Great article to help brainstorm ideas for contact forms, but what happens after the person pushes submit? Many sites don’t continue the conversation.

    1
  19. 23

    Great collection.

    0
  20. 24

    What about some drawn elemnts at http://www.moredays.com

    0
  21. 25

    I love you smashing! I am working on the exact sane thing now!

    0
  22. 26

    Nice collection,thankzzzzzzz

    0
  23. 27

    Really great article. Love the showcase as it offers a lot of interesting ideas to try out.
    If you want a more technical read on forms you can check out http://www.webia.info/articles/usability/impressive-web-forms-from-coding-to-validation/ and http://www.webia.info/articles/usability/forms-cant-live-with-them-cant-live-without-them/

    1
  24. 28

    pretty awesome post
    w3designing.blogspot.com/

    0
  25. 29

    It is really a great collection and not only for design it is good for marketing view.

    0
  26. 30

    Bart van der Hoeven

    June 29, 2011 3:00 am

    Great collection, inspiring :)
    I recently visited this website: http://www.thomas-aull.de/kontakt and liked his contactform very much.

    0
  27. 31

    webdesigningsingapore

    June 29, 2011 4:14 am

    these are some of the very good resources that you have provided, i know about some of them but most of them are new for me….i was actually looking for a good web template for my new website, so this blog helped me to make a good design your post has just solved my problem.

    0
  28. 32

    webdesigningsingapore

    June 29, 2011 4:22 am

    I hope i finally win something after reading this blog
    Thanks for the great collection of ideas

    -1
  29. 33

    Brilliant blog, time is probably the biggest issue to not designing a great web design! I find sometimes you can rush to launch a site and when it is live keep adding to it so it is perfect!!!

    0
  30. 34

    What’s a good site for getting forms that are easily customizable like in this article, if you don’t know PHP/any programming, and don’t intend on learning?

    -1
  31. 35

    I don’t completely agree with

    “When Things Go Wrong: Facio Design”

    according to many studies, using a Madlib style form of design could increase conversion. I’m not saying that their typeface choice is good, but the concept is well worth researching! even Luke W said that well used it’s a great new way to design forms.

    I suggest you some lecture on madlibs style forms :

    http://www.globaluserresearch.com/blog/2011/03/should-we-use-mad-libs-style-form

    http://www.lukew.com/ff/entry.asp?1007

    0
  32. 36

    Wow… thanks for all the beautiful examples… who says forms have to be boring!? :~)
    I like how Moody incorporates the Google map into the form layout, adds a sense of trust imho.
    Thanks,
    Jim Summer
    @seo_web_design

    0
  33. 37

    Thanks for these! There really is a fine line between creative and overbearing. Websites need to be easy. – Marketing Mike, @brinkmedia

    1
  34. 38

    Great Collection! Do check the quote form in the pricing page of UConnect website at uconnect.umobile.in/

    0
  35. 39

    Visually very enjoyable but doesn’t really approach the main issues in web form design. All these forms are very short (contact or sign-up forms mostly) which aren’t *that* hard to make work. It would be much more useful to show and dissect large and long forms which are much more difficult to get right.

    In my job we have to get and display huge amounts of form data and none of these form designs would come close to addressing these issues.

    very pretty though!

    3
  36. 40

    Great Colections..!

    0
  37. 41

    Lots Of Great Inspiration.

    Mostly Killer With Minimal Filler (:

    Thanks

    1
  38. 42

    These are great, thanks.

    I have sent this link to my web designer to keep as inspiration for future contact pages. Such an important part of the site that is so often overlooked.

    0
  39. 43

    thanks for these… a true inspiration…

    0
  40. 44

    Awesome form inspiration. Thanks.

    Anyone know how to design select element dropdown arrows, withoutJS? I seen this done in foundation six and zoltanhosszu’s blog but have been unable to replicate it.

    -1
  41. 45

    What a pack! Awesome! It’s very inspiring. Thanks!

    0
  42. 46

    Purushottam Kushwaha

    July 29, 2011 8:24 am

    awesome…..i needed this very much
    thanks smashing!!

    0
  43. 47

    Really nice contact forms.

    0
  44. 48

    Great article!!. I recently bought a form script that I have installed on my site, it looks great!!. take a look at it emailcs.com

    -2
  45. 49

    Bummer that Blue Sky Resumes doesn’t render in Firefox.

    0
  46. 50

    Great list here, we have created a very usable solution for Barclaycard for any users who use their payment gateway. It’s a very clean, accessible way to present users with fields with intelligent validation.

    Read more here: http://www.selesti.com/our-work/Barclaycard-CPI-Developement.htm

    To see it in action, try the Avon store and go to checkout. We’d appreciate your feedback!

    0
  47. 51

    Pure love for this article from me, cheerio!

    0
  48. 52

    A well designed comment box will increase responses. great article

    0
  49. 53

    Someone ever asked the question about the need of a contact form?

    Is it used? Are there any numbers?
    I personally never used one and I think that most people click on a Email Link and write directly or call.

    0
    • 54

      Actually, yea. I get lots of contact form emails. Probably depends on your site and product

      0
  50. 55

    Terrific paintings! This is the type of info that are supposed to be shared across the net. Disgrace on the seek engines for not positioning this post upper! Come on over and discuss with my website . Thank you =)

    0
  51. 56

    it very useful for my project

    0
  52. 57

    Sad, what a redesign can make out of your pretty contact page: moodyassociates.net/contact-us/
    PS: Moody link in the article is broken.

    0

↑ Back to top