Smashing Magazine - we smash you with the information that will make your life easier. really.

Web Form Design: Modern Solutions and Creative Ideas

Advertisement

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.

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.

Assine in Web Form Design: Modern Solutions and Creative Ideas

Swfir also uses an envelope as a metaphor.

Swifr in Web Form Design: Modern Solutions and Creative Ideas

Handwriting in use on Katrin Wegmann’s site. Attractive, eye-catching and playful design which perfectly manages to convey its function to the users.

Hand in Web Form Design: Modern Solutions and Creative Ideas

TheWatchMakerProject impresses with a nice and unusual design. The form is placed at the right hand side of the latest comments.

Watch in Web Form Design: Modern Solutions and Creative Ideas

Frexy.com with a nice and clean solution.

Forms-11 in Web Form Design: Modern Solutions and Creative Ideas

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.

Blue in Web Form Design: Modern Solutions and Creative Ideas

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.

Riesen in Web Form Design: Modern Solutions and Creative Ideas

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.

Created in Web Form Design: Modern Solutions and Creative Ideas

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.

Pistachio in Web Form Design: Modern Solutions and Creative Ideas

Chemistry Recruitments uses a folder, stick-it-notes and few sheet of paper.

Forms-03 in Web Form Design: Modern Solutions and Creative Ideas

Alexandru Cohaniuc presents a huge web form with a sketch and a stamp.

Forms-13 in Web Form Design: Modern Solutions and Creative Ideas

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!

Tony in Web Form Design: Modern Solutions and Creative Ideas

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.

Forms-19 in Web Form Design: Modern Solutions and Creative Ideas

BubblesSOC has a ribbon on the top of a large, laaarge, really laaaaarge web form.

Forms-18 in Web Form Design: Modern Solutions and Creative Ideas

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?

Forms-14 in Web Form Design: Modern Solutions and Creative Ideas

X-Grafik.sk with a mail stamp from Slovakia.

Xgrafiksk in Web Form Design: Modern Solutions and Creative Ideas

Kgoule.com has a friendly buddy who invites visitors to post a comment.

Kgoule in Web Form Design: Modern Solutions and Creative Ideas

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.

Forms-21 in Web Form Design: Modern Solutions and Creative Ideas

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.

Infected in Web Form Design: Modern Solutions and Creative Ideas

Sidebarcreative.com offers a a slider potential clients can use to limit the project budget.

Regler in Web Form Design: Modern Solutions and Creative Ideas

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.

Forms-16 in Web Form Design: Modern Solutions and Creative Ideas

Bouctoubou.com has very basic and simple symbols. However, they manage to make the form more interesting.

Typol in Web Form Design: Modern Solutions and Creative Ideas

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.

Forms-06 in Web Form Design: Modern Solutions and Creative Ideas

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.

Forms-05 in Web Form Design: Modern Solutions and Creative Ideas

Pointofe.com with a web form presented as a stick-it-note. The font-size should probably be increased.

Forms-02 in Web Form Design: Modern Solutions and Creative Ideas

Swiths.com with a vintage design. The hover-effect is provided as well.

Hand2 in Web Form Design: Modern Solutions and Creative Ideas

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.

Adorama in Web Form Design: Modern Solutions and Creative Ideas

Different language — different style. On Booloob.com the submit-button is placed on the left hand side of the form.

Ara in Web Form Design: Modern Solutions and Creative Ideas

Paregonta.com: cubism meets minimalism. Colorful yet extremely compact form which uses little space. This is a contact form.

Como in Web Form Design: Modern Solutions and Creative Ideas

Sunmatecushions.com with a really different style which somehow fits in the design.

Dynamic in Web Form Design: Modern Solutions and Creative Ideas

Well, why not? Wallpaper for the textarea on GeekAndHype.com.

Dropdock in Web Form Design: Modern Solutions and Creative Ideas

Revota.com is dark and shady, but uses a light hover-effect to display the current field.

Revota in Web Form Design: Modern Solutions and Creative Ideas

Catydesign is also dark. The form impresses with a clever placement of the hints.

Catys in Web Form Design: Modern Solutions and Creative Ideas

Designorati.com: this comment form is hard to overlook.

Designorati in Web Form Design: Modern Solutions and Creative Ideas

MyMileMarker: the web form gone in width. Sometimes horizontal approach is more useful than the standard vertical approach.

Mymile in Web Form Design: Modern Solutions and Creative Ideas

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.

Form3 in Web Form Design: Modern Solutions and Creative Ideas

Xyarea.be: unusual and original. This is probably the thinnest newsletter box in the world.

Xy in Web Form Design: Modern Solutions and Creative Ideas

Further Resources

  • Blog Comment Forms
    A growing collection of examples of blog comments forms by Christian Watson.

Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5.00 out of 5)
Loading ... Loading ...

Tags: ,

Advertising
  1. 1
    Shari
    April 17th, 2008 8:12 am

    Very cool

  2. 2
    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

  3. 3
    URL Script
    April 17th, 2008 8:18 am

    Good stuff, but I like this comment form the most. :)

  4. 4
    Lukas Rieder
    April 17th, 2008 8:51 am

    Thanks for sharing! Great article and very important for UI Design!

    Have a nice day,

    lukas

  5. 5
    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)

  6. 6
    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.

  7. 7
    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.

  8. 8
    RedesignYourBiz.com
    April 17th, 2008 9:44 am

    Thanks a ton… u’ve always been the best resource for webdesigners like us… thanks again.

  9. 9
    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.

  10. 10
    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.

    http://Simplebucket.com

  11. 11
    Mini0n
    April 17th, 2008 11:24 am

    Awesome article!
    Keep up the good work! You guys rule!

  12. 12
    Luca
    April 17th, 2008 11:53 am

    Something very simple, but pretty different to the ones listed above: super minimal contact form.

  13. 13
    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?

  14. 14
    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!

  15. 15
    Matty
    April 17th, 2008 1:53 pm

    Another great list, thanks for the inspiration guys :)

  16. 16
    Anthea
    April 17th, 2008 2:37 pm

    How interesting, this post gave me some great ideas.
    Thanks!

  17. 17
    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): http://www.ctm-argentina.com.ar/contactus.php

  18. 18
    Gaurav_M
    April 17th, 2008 8:13 pm

    Your people are smashingly amazing ..GREAT!!!

    Keep it Up

  19. 19
    bee
    April 17th, 2008 9:46 pm

    Really beautiful forms, thanks a lot for collecting and showing!

  20. 20
    One Winged Angel
    April 17th, 2008 10:05 pm

    Check out my comment form at http://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*

  21. 21
    Kishor
    April 17th, 2008 10:33 pm

    Nice ideas !

  22. 22
    imsraaia
    April 17th, 2008 11:44 pm

    Cool…post…

  23. 23
    ptamaro
    April 18th, 2008 6:20 am

    Great designs – innovative and inspirational…

  24. 24
    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 -Gren Wheels Blog Team

  25. 25
    flko
    April 18th, 2008 8:31 am

    muchas opciones, eso es bueno.
    QuintoH es·tu·dio2

  26. 26
    Braintrove
    April 18th, 2008 8:34 am

    Great collection. Thanks!

  27. 27
    kysuxd.com
    April 18th, 2008 8:57 am

    Great post

  28. 28
    Anthony Ettinger
    April 18th, 2008 10:33 am

    great examples of form designs.

  29. 29
    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 Pagealizer

  30. 30
    bbpoll
    April 19th, 2008 2:05 am

    Stunning.

  31. 31
    Banago
    April 19th, 2008 8:25 am

    Impressive!

  32. 32
    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

  33. 33
    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 my site

  34. 34
    OverZero.it
    April 20th, 2008 9:47 am

    Impressive & Creative.
    Thank you! :)

  35. 35
    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 http://www.longa.de

  36. 36
    Mark
    April 21st, 2008 1:42 am

    Those forms are soo beautiful. I really need to get more creative with my web forms.

  37. 37
    Nilarian Designs
    April 21st, 2008 12:10 pm

    Very cool. Well, just for viewers info. that Booloob.com is in Farsi on Iranian language.

  38. 38
    Scorpiono
    April 22nd, 2008 12:59 pm

    Neat stuff!

  39. 39
    Merijoe
    April 23rd, 2008 12:41 am

    Great designs. I designed & programed this one: link. I hope you like it.

  40. 40
    markdamo
    April 23rd, 2008 1:01 am

    Cool, nice article and perfect timing for my new project. Thanks for this guys.

  41. 41
    dec
    April 23rd, 2008 4:11 am

    thanks for the wonderful resources

  42. 42
    zibapost
    April 26th, 2008 11:58 pm

    good website

    • 43
      barb
      November 3rd, 2009 5:32 am

      yup

  43. 44
    Víctor
    May 22nd, 2008 7:04 am

    Excellent list! as always
    We made this one two or three years ago, trying to do a different form:
    l una lunera festival

    Una lista excelente!! como siempre
    Nosotros hicimos éste hace dos o tres años con el fin de mostrar un formulario distinto:
    luna lunera festival

  44. 45
    Alex Seim
    May 30th, 2008 3:27 pm

    excellent post, thanks

  45. 46
    Pritam
    July 1st, 2008 12:25 am

    Awesome read. Excellent variety, really makes me drive for that “out of box” thinking even for as small a element as a contact us form.

    Keep going SM!!!

    Cheers

  46. 47
    D
    July 12th, 2008 9:55 pm

    Created 201 website is genius! I am green with envy

  47. 48
    James G
    August 28th, 2008 8:17 am

    Smashing Magazine is becoming the firs place I look for inspiration.

    Keep up the quality work.

  48. 49
    ali
    October 22nd, 2008 3:55 am

    a cooooooooooooooooollllll! :-p

  49. 50
    Robert
    January 30th, 2009 3:37 am

    What is the Trackback-URL for this Article?

  50. 51
    Mike
    April 9th, 2009 8:08 am

    Great examples. I have seen some awesome works at bestwebforms.com. Thanks

  51. 52
    Mike
    April 17th, 2009 9:40 am

    You may want to see this forms and compare.
    Link: bestwebforms.com

  52. 53
    BaKiLiOgLaN
    April 20th, 2009 4:06 am

    И как это автору не влом столько времени на написание статей тратить, мы конечно очень благодарны, но вот я на такой альтруизм не способен :)

  53. 54
    Adam
    May 18th, 2009 3:04 pm

    Regarding the booloob.com example: the form has submit button on the left because it is written in a language that reads from right to left. In English this placement would probably be rather unintuitive.

  54. 55
    ambalika
    June 7th, 2009 11:41 pm

    very much i need this type of design

    THANKYOU !

  55. 56
    melina
    July 2nd, 2009 1:27 pm

    First of all, congratulations for your great and useful website.

    I would like to know if you are interested

  56. 57
    Abzal Abbas
    July 16th, 2009 6:51 am

    Thanx buddy….. really good job done i found lot of design from here…

    Abzal ABbas

  57. 58
    Eddie LX
    July 21st, 2009 4:37 pm

    Thank you very much.

    Give me some new ideas…

  58. 59
    Dhamaso
    October 14th, 2009 2:59 pm

    Wow que mentes tan brillantes los cabrones que hicieron estos diseños.
    saludos desde mexico.
    o en ingles jeje see you later

  59. 60
    Manuel Martinez Campagna
    November 1st, 2009 5:42 pm

    En mercuria.com.ar podes encontrar un javascript sencillo para reemplazar los campos de un formulario con imagenes

  60. 61
    Brian Wood
    November 6th, 2009 12:20 pm

    Great post. Some of these form designers could greatly benefit from a study like the following though: http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
  • Re: Correct way to learn PHP

    Start off by reading all the 15 parts of PHP 101 on Devzone.

  • Re: Using Tutorials?

    I say you're okay. I wouldn't straight up jack someone else's design and present it as my own, even if it was a tutorial, but it's certainly acceptable to learn some…

  • Correct way to learn PHP

    So, I'm a designer but I wanna expand my abilities and learn PHP, to be more exact I wanna learn CI - Codeigniter!

  • I wanna make comics!

    Hello,I'm designer but I've never involved in vector painting so I need your help

  • Re: Twitter

    @gatorwebdesignShould tweet something really...

Post your job