- April 17th, 2008
- 94 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
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.
Handwriting in use on Katrin Wegmann’s site. Attractive, eye-catching and playful design which perfectly manages to convey its function to the users.
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.
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.
… so did Wildvuur.com (currently offline) — the web form was perfectly integrated into the site layout.
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.
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.
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.
6. Hand-writing and grunge in use
We’ve already written about the popularity of hand-drawing39 and grunge40 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.
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.
Designorati.com: this comment form is hard to overlook.
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.
- 1 http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
- 2 http://www.softmail.com.br/
- 3 http://www.softmail.com.br/
- 4 http://www.swfir.com/
- 5 http://www.swfir.com/
- 6 http://www.thewatchmakerproject.com
- 7 http://www.thewatchmakerproject.com
- 8 http://www.frexy.com/contact.php
- 9 http://www.frexy.com/contact.php
- 10 http://www.flingmedia.com/contact/
- 11 http://www.flingmedia.com/contact/
- 12 http://www.created201.com/
- 13 http://www.created201.com/
- 14 http://www.chemistryrecruitment.com/contact
- 15 http://www.chemistryrecruitment.com/contact
- 16 http://www.alexcohaniuc.com/
- 17 http://www.alexcohaniuc.com/
- 18 http://tonyyoo.com
- 19 http://tonyyoo.com
- 20 http://www.qwertcity.com/about/
- 21 http://www.qwertcity.com/about/
- 22 http://bubblessoc.net/contact/
- 23 http://bubblessoc.net/contact/
- 24 http://www.intuitivedesigns.net/contact-us/
- 25 http://www.intuitivedesigns.net/contact-us/
- 26 http://www.x-grafik.sk/
- 27 http://www.x-grafik.sk/
- 28 http://kgoule.com
- 29 http://kgoule.com
- 30 http://dressfordialogue.com
- 31 http://www.infectedfx.net
- 32 http://www.infectedfx.net
- 33 http://sidebarcreative.com/
- 34 http://sidebarcreative.com/
- 35 http://www.wp-themes.designdisease.com/testrun/?theme=wp_smashingtheme
- 36 http://www.wp-themes.designdisease.com/testrun/?theme=wp_smashingtheme
- 37 http://blog.bouctoubou.com
- 38 http://blog.bouctoubou.com
- 39 http://www.smashingmagazine.com/2008/01/03/hand-drawing-style-in-modern-web-design/
- 40 http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/
- 41 http://www.redblu.com/
- 42 http://www.redblu.com/
- 43 http://www.fivecentstand.com/
- 44 http://www.fivecentstand.com/
- 45 http://www.pointofe.com/
- 46 http://www.pointofe.com/
- 47 http://www.swiths.com/1_0/index.php?lang=p&s=contact#l
- 48 http://www.swiths.com/1_0/index.php?lang=p&s=contact#l
- 49 http://www.adorama.com/
- 50 http://www.adorama.com/
- 51 http://www.booloob.com/
- 52 http://www.booloob.com/
- 53 http://www.paregonta.com/
- 54 http://www.paregonta.com/
- 55 http://www.sunmatecushions.com/
- 56 http://www.sunmatecushions.com/
- 57 http://www.geekandhype.com/
- 58 http://www.geekandhype.com/
- 59 http://www.revota.com/
- 60 http://www.revota.com/
- 61 http://blogs.catydesign-studio.com/
- 62 http://blogs.catydesign-studio.com/
- 63 http://mymilemarker.com/
- 64 http://mymilemarker.com/
- 65 http://www.xyarea.be/
- 66 http://www.xyarea.be/
- 67 http://www.smileycat.com/design_elements/blog_comment_forms/index.php?page=1