Following on from our look at fantastic login pages comes a look at more comprehensive form design such as contact forms, order forms, sign up forms and comment forms. Below are just some of the best examples on the web.
WPCoder uses a high quality image of a clipboard for their order form.
Alex Cohaniuc uses a piece of paper for his contact form.
Paramore Redd have a nicely styled, clean contact form.
Graphik uses a big friendly header on their contact form.
Kontain clearly defines form fields by using bounding boxes and colour.
Tumblr uses big form fields and a nice clean appearance.
News Pond gets users to focus on their sign-up form with the use of a background glow.
Duoh uses a big bold header and a paragraph to introduce their contact form.
Neutron Creations fills in fake details on their contact form, showing clearly, at a glance, what details should be entered.
Ballpark has a nice clean design with clearly defined sections.
Dragon Interactive uses a tab interface to distinguish the type of message on their contact form.
Substrakt uses the familiarity of a postcard for their contact form.
Battle.net implements a progress tracker for each step of signing up to their service.
Tuitive uses sIFR for non-web safe fonts on the label tags of their contact form.
David Hellmann uses plastic tape for the label tags of his contact form.
Elliot Jay Stocks uses nice big and clear elements on the comments form of his blog.
Be Inspired
As you can see, forms don’t have to be boring, there are a number of different ways that you can make forms more interesting and more usable, increasing the chance that users will sign up to a service or send feedback.
Feel free to share your own form designs and any others that you have seen out there in the comments.
Tweet
good work, nice way to use form and good designs.
Great Examples! Not enough people pay attention to forms. I think that it’s one of the most important things in a web design. Thanks.
Really awesome collection, definitely bookmarked for later use! It’s amazing how many free resources there are for web designers these days.
very good designs and lt looks very nice
thx for sharing!
wp coder is really nice.
Just added Elliot Jay Stocks’ comment form design on the recent redesign of his site. Another superb example.
The new Battle.net account management site really is pretty awesome.
I agree with Tim, not enough people spend time on forms in their designs, I myself am guilty of this. This has made me realise the error in my ways.
Time to make a new form
- The use if ACME for the company on Neutron Creations made ma laugh
This is a very inspirational list, thanks.
Great list!! Unfortunately for me I am on the hunt for amazing forms that include Select elements, not just text inputs. Those are especially hard to style, and only one or two of the above forms has a select (pulldown/dropdown) menu. If you ever do another roundup can you also include forms that have more than just text inputs? Thank you!! Awesome list!
Excellent post, I especially like the newspond user registration form, very attractive, simple and clean design.
Really Awesome! i like WPcoder so much. Thanks