Smashing Magazine we smash you with the information that will make your life easier. really.
Web Form Design: Modern Solutions and Creative Ideas
April 17th, 2008 in Design Showcase | 81 Comments
Web form is often the main communication channel between visitors and site owners. Feedback is always important which is why it’s necessary to make sure that web forms are easy to understand and intuitive to use. Nevertheless, even in form design one can afford some healthy portion of creativity.
Web forms don’t have to be boring and, using CSS or Flash, you can easily make sure that they are appealing and effective. To get noticed, you need to come up with something unique and interesting — symbols, icons, colors, position or the size of web form are often used to achieve interesting design solutions. We’ve searched for some examples and we’ve found them. Creative, original and unusual web forms.
Below we present over 40 (really) beautiful examples of web forms as well as modern solutions and creative ideas related to web form design. Some of the examples are Flash-based; however, in most cases you can easily create similar designs with pure CSS and (X)HTML.
Also consider our previous article
- CSS-Based Forms: Modern Solutions which lists modern solutions for CSS-based form design.
1. Clean, Simple and Beautiful Solutions
Since web form is probably one of the most important sections on the web-site, it’s necessary for you as a designer to make sure that visitors can easily understand what information they need to fill into the form fields. Complex and long web forms increase the cognitive load for users — they are just harder to deal with. In this context, preferring simple and clean solutions seems like a sound approach. However, if the form was designed with an attention to details and looks good, it’s also reasonable to use some attractive imagery in the forms.
Softmail’s newsletter-box comes from Brazil and displays an excellent integration of the message-icon into the form design. The submit-button is clear and attractive. This is a creative design.
Swfir also uses an envelope as a metaphor.
Handwriting in use on Katrin Wegmann’s site. Attractive, eye-catching and playful design which perfectly manages to convey its function to the users.
TheWatchMakerProject impresses with a nice and unusual design. The form is placed at the right hand side of the latest comments.
Frexy.com with a nice and clean solution.
Flingmedia uses a sliding contact form. Depending on the visitor’s intention (general comment, new project request etc.), user can slide to a web form which addresses his/her interests.
Envero.org — the web form is huge and fills the whole layout width. The font-size and the size of input fields are chosen accordingly.
2. Creative solutions
Although web-forms are supposed to enable users to get in touch with site owners, quite often designers risk creative solutions and offer layouts visitors wouldn’t actually expect from a boring, standard web form they’ve used to over years. Many different metaphors are used. Here is an overview of some interesting ones.
Created201.com takes a look at the contact form from a quite different perspective. The effect is created using Flash.
Ok, this is really different. If you’d like to get in touch with Edward Pistachio, you’ll need to solve a puzzle first. This approach isn’t applicable for blogs or business web-sites. However, it perfectly fits to the concept of the site. The visitors are amazed.
Chemistry Recruitments uses a folder, stick-it-notes and few sheet of paper.
Alexandru Cohaniuc presents a huge web form with a sketch and a stamp.
Tony Yoo’s contact form shows the contact details on the left hand side. No happy talk, just getting to the point. And some designers need an extra-page for contact details!
Qwert City enables users to send the designer a “postcard”…
… so did Wildvuur.com (currently offline) — the web form was perfectly integrated into the site layout.
BubblesSOC has a ribbon on the top of a large, laaarge, really laaaaarge web form.
3. Use illustrations to brighten up the form
When a user clicked on the link which leads to a web form, he or she is one step away of getting in touch with site owners. Some designers try to make sure visitors actually fill in the form by using attractive characters and illustrations which serve the purpose of making users feel more comfortable with the form.
Intuitive Designs tries to impress visitors with a busy mailman. Doesn’t he actually have enough to do?
X-Grafik.sk with a mail stamp from Slovakia.
Kgoule.com has a friendly buddy who invites visitors to post a comment.
Dressfordialogue.com (the design is different now) uses a tiny illustration at the top right of the form. Nevertheless, it works. Sometimes a tiny detail is enough.
4. Integrate more functions
Searching for creative web forms, we’ve observed some new functionalities which haven’t been that popular last year. Among them are WYSIWIG-editors and sliders. Editors are used to provide users with rich text-editing for text formatting, different header levels and images. A slider can be used to define the budget limits for a given project.
InfectedFX has a rather complex web form with hints, options and buttons. The form integrates a WYSIWIG-editor into the textarea.
Sidebarcreative.com offers a a slider potential clients can use to limit the project budget.
5. Use icons to communicate required information
From the usability point of view, there is nothing more painful than a long web form with plain-text labels and without any visual indicators. Such forms are boring, unattractive and uncomfortable to use. You can design web forms better. In fact, not much is required. Often icons are used to visually indicate the information required from the user to fill the form.
DesignDisease Wordpress Theme uses simply symbols to indicate the required information.
Bouctoubou.com has very basic and simple symbols. However, they manage to make the form more interesting.
6. Hand-writing and grunge in use
We’ve already written about the popularity of hand-drawing and grunge in modern web design. Such design elements are also being used in web forms as they are always unique and convey the personality of the designer. Particularly Flash-based solutions prefer this approach.
Redblu is presented as a sheet of newspaper. To get to the contact form you need to drag the newspaper accordingly.
Fivecentstand offers a Flash-based solution which is seamlessly integrated in the overall site design. It might be difficult for new users to find the form, though.
Pointofe.com with a web form presented as a stick-it-note. The font-size should probably be increased.
Swiths.com with a vintage design. The hover-effect is provided as well.
7. Experimental solutions
Below you’ll find an overview of some unusual solutions which can serve as a starting point for your further design. Not all of them might look good, but they have something and you may want to improve the ideas further.
Adorama.com offers a nice-looking and compact solution: a newsletter-box in the sidebar.
Different language — different style. On Booloob.com the submit-button is placed on the left hand side of the form.
Paregonta.com: cubism meets minimalism. Colorful yet extremely compact form which uses little space. This is a contact form.
Sunmatecushions.com with a really different style which somehow fits in the design.
Well, why not? Wallpaper for the textarea on GeekAndHype.com.
Revota.com is dark and shady, but uses a light hover-effect to display the current field.
Catydesign is also dark. The form impresses with a clever placement of the hints.
Designorati.com: this comment form is hard to overlook.
MyMileMarker: the web form gone in width. Sometimes horizontal approach is more useful than the standard vertical approach.
Jaroslav Cerný shows how to combine an e-mail with a web form. The form isn’t online any longer, but it’s definitely worth mentioning.
Xyarea.be: unusual and original. This is probably the thinnest newsletter box in the world.
Further Resources
- Blog Comment Forms
A growing collection of examples of blog comments forms by Christian Watson.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 45 Blog Designs
- 50 Beautiful Designs
- 50 Simple Designs
- 60 Elegant Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.
Shari (April 17th, 2008, 8:12 am)
Very cool
Lipton (April 17th, 2008, 8:16 am)
Smashing Magazine = best Web design resource online… OMG u guys rock :)
The top most form got me confused a bit.. .till I read it was from Brazil lol
URL Script (April 17th, 2008, 8:18 am)
Good stuff, but I like this comment form the most. :)
Alex (April 17th, 2008, 8:44 am)
Excellent article! I’m currently developing my site, so I’ll keep some of these ideas for later! :P
Link []
Ronny-André Bendiksen (April 17th, 2008, 8:45 am)
You can also check out this one: Link [ronny-andre.no]
Christoph (April 17th, 2008, 8:48 am)
watch also my accessible and elegant comment-form on a sample post of site: Link [www.scrollleiste.de]
Lukas Rieder (April 17th, 2008, 8:51 am)
Thanks for sharing! Great article and very important for UI Design!
Have a nice day,
lukas from Link [www.lrieder.com]
pickupjojo (April 17th, 2008, 8:54 am)
OMG, thank you so much for the feature, I’m very glad to see my blog here!
Thanks again, Joffrey (http://www.geekandhype.com)
Jackson (April 17th, 2008, 8:56 am)
Nice list. As always, great visual inspiration.
One bone to pick: Paregonta.com is neither Cubist nor Minimal. I think the words you’re looking for are squarish and simple. Cubism is about deconstructing an object from different perspectives and then reconstructing. Minimalism has to take negative space into serious consideration, something I feel people leave out of consideration when applying the term.
Although some of the forms are certainly eye-catching, you also need to consider the form’s place in the entire site design’s hierarchy. Often the contact form is not the most important part of a web page.
Naomi Niles (April 17th, 2008, 9:12 am)
Thanks for featuring our mailman! He’s tired, but he says he likes this job more than the last because he doesn’t have to worry about being bitten by dogs anymore.
RedesignYourBiz.com (April 17th, 2008, 9:44 am)
Thanks a ton… u’ve always been the best resource for webdesigners like us… thanks again.
Gunnar Bruun (April 17th, 2008, 10:27 am)
Great article, but I would have liked to have the links pointing directly to where the forms are.
Khang Toh from Simplebucket (April 17th, 2008, 10:58 am)
Hey, don’t left out our upload form, I think it’s one of a kind for upload forms.
Link [www.simplebucket.com]
Mini0n (April 17th, 2008, 11:24 am)
Awesome article!
Keep up the good work! You guys rule!
Luca (April 17th, 2008, 11:53 am)
Something very simple, but pretty different to the ones listed above: Link [www.arcomunicazione.it].
Jim (April 17th, 2008, 1:08 pm)
I see multiple callouts of required fields, but how do you guys feel about only calling out optional fields when 8 out of 10 fields are required and only 2 are optional?
eanka (April 17th, 2008, 1:53 pm)
This is a great post, but I would love to see a similar one, about styling file input fields! None of the above forms uses file box, and styling this one is really a challenge!
Matty (April 17th, 2008, 1:53 pm)
Another great list, thanks for the inspiration guys :)
Anthea (April 17th, 2008, 2:37 pm)
How interesting, this post gave me some great ideas.
Thanks!
Isopo (April 17th, 2008, 7:21 pm)
This one should have been part of the selection (we created it here at 1|1 Studio for a Tourism Agency Website): Link [www.ctm-argentina.com.ar]
Gaurav_M (April 17th, 2008, 8:13 pm)
Your people are smashingly amazing ..GREAT!!!
Keep it Up
bee (April 17th, 2008, 9:46 pm)
Really beautiful forms, thanks a lot for collecting and showing!
One Winged Angel (April 17th, 2008, 10:05 pm)
Check out my comment form at Link [www.owastudio.com.] However, for the contact form, I’ve tried to style it with the same style as the comment form but some errors occurred so I’ll try next time. *Having final exams now*
Kishor (April 17th, 2008, 10:33 pm)
Nice ideas !
imsraaia (April 17th, 2008, 11:44 pm)
Cool…post…
ptamaro (April 18th, 2008, 6:20 am)
Great designs - innovative and inspirational…
Green wheels Blog (April 18th, 2008, 8:22 am)
Wow, these are great as ever! Love the Edward Pistachio, Chemistry Recruitments and Pointofe.com sticky note. Excellent inspiration as ever guys -Link [www.greenwheelsblog.com]
flko (April 18th, 2008, 8:31 am)
muchas opciones, eso es bueno.
Link [www.quintohache.com]
Braintrove.com (April 18th, 2008, 8:34 am)
Great collection. Thanks!
kysuxd.com (April 18th, 2008, 8:57 am)
Great post
Anthony Ettinger (April 18th, 2008, 10:33 am)
great examples of form designs.
Pagealizer (April 18th, 2008, 11:22 am)
If you would like to learn how long visitors stay on your form pages and where they clicked check out Link [www.pagealizer.com]
bbpoll (April 19th, 2008, 2:05 am)
Stunning.
Banago (April 19th, 2008, 8:25 am)
Impressive!
Ralph (April 19th, 2008, 9:25 am)
amazing… The Team of Smashing Magazine works a lot and hard, again. Many, many nice ideas… Thank you for your great work ;)
Ralph
James Baldwin (April 19th, 2008, 9:27 am)
Thanks so much for the article, will definately be drawing some inspiration to spice up the form on Link [www.jbandg.co.uk]
OverZero.it (April 20th, 2008, 9:47 am)
Impressive & Creative.
Thank you! :)
gedas (April 21st, 2008, 12:02 am)
You can allso check our Longa Visual & Design Studio contact form on the Index page and under Contact Link [www.longa.de]
Mark (April 21st, 2008, 1:42 am)
Those forms are soo beautiful. I really need to get more creative with my web forms.
Nilarian Designs (April 21st, 2008, 12:10 pm)
Very cool. Well, just for viewers info. that Booloob.com is in Farsi on Iranian language.
Scorpiono (April 22nd, 2008, 12:59 pm)
Neat stuff!
Merijoe (April 23rd, 2008, 12:41 am)
Great designs. I designed & programed this one: Link [www.nafarroaoinez.net]. I hope you like it.
markdamo (April 23rd, 2008, 1:01 am)
Cool, nice article and perfect timing for my new project. Thanks for this guys.
dec (April 23rd, 2008, 4:11 am)
thanks for the wonderful resources
zibapost (April 26th, 2008, 11:58 pm)
good website
Alisia (May 5th, 2008, 6:50 pm)
1.Hola quisiera saber si les importa ayudarme con una pequeña duda, aquien Venezuela/Anzoategui, pregunto haber quien sabe un poquito de eso, la berda es que me quiero crear una web y necesito que me recomienden una empresa que no la haga tan exageradamente fina, pues me meti Link [www.iguanahosting.com] tremenda enmpresa, y por eso mismo quiero que me recomienden otra pues la pagina que me crearon en iguanahosting quedo demaciado perfe, por eso mismo quiero que me recomienden otra donde la agan normalita me entienden. espero susu respuestas y suerte si se ban a meter en iguanahosting..!