Useful Ideas And Guidelines For Good Web Form Design
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 Johnson‘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.
Red Tiki
Red Tiki’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.
Applicom
Applicom’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.
Sophie Hardach
Sophie Hardach‘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.
Two Paperdolls
Two Paperdolls 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”.
Kontain
Kontain 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.
Wopata
Wopata‘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.
Fi
The language used on Fi 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?
egopop
egopop 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.
Idyllic Creative
Some forms are boring, while some are beautiful. Idyllic Creative‘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.
Tinkering Monkey
Tinkering Monkey‘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.
Ditio
Ditio‘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.
Treehouse Editing
Treehouse Editing’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.
Amazee Labs
Amazee Labs 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.
Wing Cheng
The motif of Wing Cheng’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.
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
CollisonLabs‘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.
Visual Republic
Visual Republic‘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.
CSS Tricks
CSS Tricks‘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.
Barley’s Greenville
Barley’s Greenville‘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.
Blue Sky Resumes
Blue Sky Resumes 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.
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 International 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.
El Passion
El Passion 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.
Orlando Advertising
Orlando Advertising‘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.
Reinvigorate
There are usually two essential elements to effective form validation: identifying the specific problem, and clearly marking how and where to fix it. Reinvigorate 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.
GitHub
GitHub‘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.
Blue Sky Resumes (revisited)
I would like to point out another great part of Blue Sky Resumes’ 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.
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 Grooveshark, 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.
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
Unlocking‘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.
Jason Long
Jason Long‘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.
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 Squarespace, 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.
BLITZ
BLITZ 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.
Custom Bags HQ
Custom Bags HQ 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.
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 Six’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).
Bärnt&Ärnst
Bärnt&Ärnst‘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.
Zoltan Hosszu
Zoltan Hosszu‘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.
Stuck Axiom
The labels in Stuck Axiom’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 Giant 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.
Joey Rabbitt
Joey Rabbitt 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.
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
Pieoneers 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.
Information Highwayman
Information Highwayman 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.
Facio Design
Facio Design‘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 some studies, 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.
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
- “Sensible Forms: A Form Usability Checklist,” Brian Crescimanno
Read up on some basic facts and rules for styling and setting up forms on your websites. - “Form Design: 11 Patterns For Accepting User Input,” Linda Bustos
This article identifies which input patterns are useful and explains when hinting and prompting are useful. - “Best Practices for Web Form Design,” Luke Wroblewski
This walks you through the importance of form design, going over best practices based on website analytics, usability testing and eye-tracking studies.
(al) (il) (vf) (sp)
Zoltan Hosszu
June 27th, 2011 5:55 amOMG thanks for the feature! <3
Great collection of form designs.
Zoltan Hosszu
June 27th, 2011 10:08 pmWould you guys be so kind to correct my surname in the article, please? It’s written with double s. Thanks!
Pi3cH
June 27th, 2011 6:44 amPretty awesome list. I was looking for some ideas on designing new form your list inspired me alot. Cheers :)
Rob Loukotka
June 27th, 2011 6:54 amShawn, 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.
James Graves
June 27th, 2011 8:56 amLove this line up! great post! Glad to see designers are taking form design seriously these days, great inspiration!
Jarad Johnson
June 27th, 2011 11:18 amFantastic article, Shawn. Lots of inspiration and techniques to build off of. Appreciate the feature!
Scott Stubblefield
June 27th, 2011 11:38 amI 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.
Caroline Jarrett
June 27th, 2011 12:31 pmLots 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”
stef
June 30th, 2011 1:08 amMuch 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.
Caroline Jarrett
June 27th, 2011 12:32 pmOops- said ‘touch of humour’, meant ‘dash of quirkiness’.
Justin Waddell
June 27th, 2011 2:04 pmGreat article, I always appreciate a good form design. So often are they neglected. Nice work!
D Bnonn Tennant, Information Highwayman
June 27th, 2011 2:20 pmHowdy 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
Thomas Bachmann
June 27th, 2011 2:33 pmNice 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
Kaiser
June 27th, 2011 6:24 pmThe 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…
Jarad Johnson
June 27th, 2011 9:51 pmI 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.
Kaiser
July 3rd, 2011 9:07 amHi 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 :)
Abaya
June 27th, 2011 11:03 pmI 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.
Sagar S. Ranpise
June 27th, 2011 11:49 pmAwesome Roundup on contact forms!!!
Rob
June 27th, 2011 11:52 pmNice collection of forms there! Some really great ideas….
I’d like to add;
homesense.com/page/friends
to this list though!
:)
Srinivas Kothuri
June 28th, 2011 3:16 amCant resist myself from appreciating you.
Great collection . .. .!!! Thanks a lot . . . .!!!
nathan powell
June 28th, 2011 4:00 amThis 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!
Leah
June 28th, 2011 6:03 amGreat article to help brainstorm ideas for contact forms, but what happens after the person pushes submit? Many sites don’t continue the conversation.
Jim
June 28th, 2011 7:38 amGreat collection.
Daniel Máslo
June 28th, 2011 9:25 amWhat about some drawn elemnts at http://www.moredays.com
André
June 28th, 2011 9:33 amI love you smashing! I am working on the exact sane thing now!
biju
June 28th, 2011 8:05 pmNice collection,thankzzzzzzz
Bogdan Pop
June 28th, 2011 10:01 pmReally 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/
srinivas
June 28th, 2011 11:53 pmpretty awesome post
w3designing.blogspot.com/
naymin
June 29th, 2011 1:08 amIt is really a great collection and not only for design it is good for marketing view.
Bart van der Hoeven
June 29th, 2011 3:00 amGreat collection, inspiring :)
I recently visited this website: http://www.thomas-aull.de/kontakt and liked his contactform very much.
webdesigningsingapore
June 29th, 2011 4:14 amthese 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.
webdesigningsingapore
June 29th, 2011 4:22 amI hope i finally win something after reading this blog
Thanks for the great collection of ideas
w3-logics
June 29th, 2011 4:24 amBrilliant 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!!!
Gavin
June 29th, 2011 7:30 amWhat’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?
Larry
June 29th, 2011 9:46 amI 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
Jim Summer
June 29th, 2011 11:07 amWow… 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
Marketing Mike
June 29th, 2011 12:34 pmThanks for these! There really is a fine line between creative and overbearing. Websites need to be easy. – Marketing Mike, @brinkmedia
Bhargavi
June 30th, 2011 12:20 amGreat Collection! Do check the quote form in the pricing page of UConnect website at uconnect.umobile.in/
stef
June 30th, 2011 1:01 amVisually 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!
omagus
July 1st, 2011 2:58 amGreat Colections..!
PhilD
July 1st, 2011 11:28 pmLots Of Great Inspiration.
Mostly Killer With Minimal Filler (:
Thanks
aengus
July 4th, 2011 4:23 pmThese 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.
matejlatin
July 12th, 2011 4:24 amthanks for these… a true inspiration…
qalih
July 24th, 2011 2:36 pmAwesome 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.
Sebastian
July 25th, 2011 3:24 amWhat a pack! Awesome! It’s very inspiring. Thanks!
Purushottam Kushwaha
July 29th, 2011 8:24 amawesome…..i needed this very much
thanks smashing!!
Joeyj01
August 10th, 2011 4:34 amReally nice contact forms.
Rachel
August 30th, 2011 7:39 amGreat article!!. I recently bought a form script that I have installed on my site, it looks great!!. take a look at it emailcs.com
Digant Kasundra
November 9th, 2011 3:17 pmBummer that Blue Sky Resumes doesn’t render in Firefox.
Selesti
November 16th, 2011 6:35 amGreat 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!
Nick
March 15th, 2012 8:41 pmPure love for this article from me, cheerio!
Nick
March 21st, 2012 12:00 pmA well designed comment box will increase responses. great article
chromax
August 1st, 2012 11:37 amSomeone 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.
Chris
August 10th, 2012 5:17 pmActually, yea. I get lots of contact form emails. Probably depends on your site and product
Bob Revolution
August 25th, 2012 8:26 amTerrific 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 =)