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.

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

Screenshot3

Swfir4 also uses an envelope as a metaphor.

Screenshot5

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

Screenshot

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

Screenshot7

Frexy.com8 with a nice and clean solution.

Screenshot9

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

Screenshot11

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.

Screenshot

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.com12 takes a look at the contact form from a quite different perspective. The effect is created using Flash.

Screenshot13

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.

Screenshot

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

Screenshot15

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

Screenshot17

Tony Yoo18‘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!

Screenshot19

Qwert City20 enables users to send the designer a “postcard”…

21

… so did Wildvuur.com (currently offline) — the web form was perfectly integrated into the site layout.

Screenshot

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

Screenshot23

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 Designs24 tries to impress visitors with a busy mailman. Doesn’t he actually have enough to do?

Screenshot25

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

Screenshot27

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

Screenshot29

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.

Screenshot30

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.

InfectedFX31 has a rather complex web form with hints, options and buttons. The form integrates a WYSIWIG-editor into the textarea.

Screenshot32

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

Screenshot34

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 Theme35 uses simply symbols to indicate the required information.

Screenshot36

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

Screenshot38

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.

Redblu41 is presented as a sheet of newspaper. To get to the contact form you need to drag the newspaper accordingly.

Screenshot42

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

Screenshot44

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

Screenshot46

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

Screenshot48

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.com49 offers a nice-looking and compact solution: a newsletter-box in the sidebar.

Screenshot50

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

Screenshot52

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

Screenshot54

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

Screenshot56

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

Screenshot58

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

Screenshot60

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

Screenshot62

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

Screenshot

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

Screenshot64

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.

Screenshot

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

Screenshot66

Further Resources

Footnotes

  1. 1 http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
  2. 2 http://www.softmail.com.br/
  3. 3 http://www.softmail.com.br/
  4. 4 http://www.swfir.com/
  5. 5 http://www.swfir.com/
  6. 6 http://www.thewatchmakerproject.com
  7. 7 http://www.thewatchmakerproject.com
  8. 8 http://www.frexy.com/contact.php
  9. 9 http://www.frexy.com/contact.php
  10. 10 http://www.flingmedia.com/contact/
  11. 11 http://www.flingmedia.com/contact/
  12. 12 http://www.created201.com/
  13. 13 http://www.created201.com/
  14. 14 http://www.chemistryrecruitment.com/contact
  15. 15 http://www.chemistryrecruitment.com/contact
  16. 16 http://www.alexcohaniuc.com/
  17. 17 http://www.alexcohaniuc.com/
  18. 18 http://tonyyoo.com
  19. 19 http://tonyyoo.com
  20. 20 http://www.qwertcity.com/about/
  21. 21 http://www.qwertcity.com/about/
  22. 22 http://bubblessoc.net/contact/
  23. 23 http://bubblessoc.net/contact/
  24. 24 http://www.intuitivedesigns.net/contact-us/
  25. 25 http://www.intuitivedesigns.net/contact-us/
  26. 26 http://www.x-grafik.sk/
  27. 27 http://www.x-grafik.sk/
  28. 28 http://kgoule.com
  29. 29 http://kgoule.com
  30. 30 http://dressfordialogue.com
  31. 31 http://www.infectedfx.net
  32. 32 http://www.infectedfx.net
  33. 33 http://sidebarcreative.com/
  34. 34 http://sidebarcreative.com/
  35. 35 http://www.wp-themes.designdisease.com/testrun/?theme=wp_smashingtheme
  36. 36 http://www.wp-themes.designdisease.com/testrun/?theme=wp_smashingtheme
  37. 37 http://blog.bouctoubou.com
  38. 38 http://blog.bouctoubou.com
  39. 39 http://www.smashingmagazine.com/2008/01/03/hand-drawing-style-in-modern-web-design/
  40. 40 http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/
  41. 41 http://www.redblu.com/
  42. 42 http://www.redblu.com/
  43. 43 http://www.fivecentstand.com/
  44. 44 http://www.fivecentstand.com/
  45. 45 http://www.pointofe.com/
  46. 46 http://www.pointofe.com/
  47. 47 http://www.swiths.com/1_0/index.php?lang=p&s=contact#l
  48. 48 http://www.swiths.com/1_0/index.php?lang=p&s=contact#l
  49. 49 http://www.adorama.com/
  50. 50 http://www.adorama.com/
  51. 51 http://www.booloob.com/
  52. 52 http://www.booloob.com/
  53. 53 http://www.paregonta.com/
  54. 54 http://www.paregonta.com/
  55. 55 http://www.sunmatecushions.com/
  56. 56 http://www.sunmatecushions.com/
  57. 57 http://www.geekandhype.com/
  58. 58 http://www.geekandhype.com/
  59. 59 http://www.revota.com/
  60. 60 http://www.revota.com/
  61. 61 http://blogs.catydesign-studio.com/
  62. 62 http://blogs.catydesign-studio.com/
  63. 63 http://mymilemarker.com/
  64. 64 http://mymilemarker.com/
  65. 65 http://www.xyarea.be/
  66. 66 http://www.xyarea.be/
  67. 67 http://www.smileycat.com/design_elements/blog_comment_forms/index.php?page=1

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

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

    -1
  2. 52

    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.

    0
  3. 103

    very much i need this type of design

    THANKYOU !

    0
  4. 154

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

    I would like to know if you are interested

    0
  5. 205

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

    Abzal ABbas

    0
  6. 256

    Thank you very much.

    Give me some new ideas…

    0
  7. 307

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

    1
  8. 358

    Manuel Martinez Campagna

    November 1, 2009 5:42 pm

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

    0
  9. 409

    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

    0
  10. 460

    Thanks smashy. It came in very useful…:)

    0
  11. 511

    AWESOME! as usual. :)
    SM is rocks…….

    Thanks,
    Harry

    0
  12. 562

    Thanks Smashing! This was very helpful! You should make a donation section also this would be very useful.

    0
  13. 613

    Hay
    really cool designs

    0
  14. 664

    This list really helped me… designing is difficult, if you’re not used to it… Thanks.

    0
  15. 715

    Great article, it would be nice to see some examples of help icons in forms too, if anyone has some!

    0
  16. 766

    Gr8 collection…thanks for sharing it…

    0
  17. 817

    Nice! I was looking for contact form designs …. I wanna build a complete customizable one! Good job!

    0
  18. 868

    awesome work!!!

    0
  19. 919
  20. 970

    i go to change my contact us/request form in my website, can one advice me more or creat me one
    irtouring.com

    0
  21. 1021

    Flash Form Builder lets you select from hundreds of templates, customize each form to the look and feel of your site and auto install virtually anywhere on the web. All done online with nothing to download or purchase. No programming or tech knowledge needed. Updates and edits are a snap! Simply editt your form and click update to change your forms. No re-embed of the code. Check it out: http://www.hotforms123.com

    0
  22. 1072

    i agree this was a very good topic, of course the most of them are ugly , but the two first are really nice the both are good

    0
  23. 1123

    Very nice collection. I like the uniqueness of design.

    I used http://www.quickwebform.com. It maybe a great add to your collection.

    0
  24. 1174

    Well, I want to introduce, under the following

    0
  25. 1225

    very nice shared.

    0
  26. 1276

    Jessica @ Jessiker Bakes

    August 19, 2010 1:16 am

    Smashing post!!!!

    0
  27. 1327

    Very nice collection. The company that designed my logo had a nice looking contact form, check it out at logodoctor.co.uk/index.php/contact

    0
  28. 1378

    What about some Iran tour site

    0
  29. 1429

    I really like these examples. They have given me some inspiration on how to tweek my own. Thanks for sharing.

    0
  30. 1480

    stunning content brother i really liked it.

    0
  31. 1531

    Very good collection of form design.

    0
  32. 1582

    it’s very useful for me thanks to smashing magazine

    0
  33. 1633

    Nice blog post. To properly utilize and increase ideal performance for the forms, you do need to take into consideration few other things as well.

    http://blog.9thsphere.com/blog/effective-website-forms-101

    The above blog post talks about Effective Website Forms and includes discussions on best practices such as asking only what you need, being able to track your form conversions through some sort of an analytics tool and to even add a level of trust and credibility in the submissions forms. I thought it would be valuable to share in case someone was further interested in developing not just good looking, but also forms that convert.

    1
  34. 1684

    Awesome designs. Thank you.

    If any readers want some general form design tips, look here…

    flysoftware.com/support/top_10_form_design_tips.asp

    0
  35. 1735

    pls check the links, few links are not working please update it.

    0
  36. 1786

    Great.. I found one of this really useful and easy to inspire for me.. keep up the good work.. thanks for a nice post..

    0
  37. 1837

    Nice post.

    1
  38. 1888

    Excellent collection, really inspiring. I usually go for the principle “seek elegance in simplicity”, however forms are a territory of continuous experimentation.
    For designing dynamic web forms that can be styled with CSS customization, I have used 123 Contact Form generator with great results. These guys are truly amazing, I recommend!

    1
  39. 1939

    Beautiful form design.
    Thanks for sharing!

    -1
  40. 1990

    thank you for sharing your valuable knowledges with all of us . .

    1
  41. 2041

    These are some nice looking forms! We use http://feedbackbutton.org – it’s easy to embed and simple to use!

    0

↑ Back to top