Back to the top

Creative Web Form Designs: Ideas And Realizations

post_teaser
PUBLISHED ON

February 9th, 2010

TAGS

DISCUSS

35 Comments

Getting feedback from your customers or readers is very important, and because of that, web form must be easy to use. Web form doesn’t have to be boring. To create a standout web form, we must come up with something creative and unique. We can use icons, symbols, textured backgrounds, vintage and grunge details…
Use your imagination!

Here is a list of Creative Web Form Designs, which can serve you as an inspiration in designing your own web form.

Minimal Web Forms

Jilion use minimal web form on their site,

also Chocaholic

and Panic on their blog.

Clean Web Forms

Smashing Magazine has nice and clean and huge contact form,

Chitich also use clean and simple web form,

also MB Dragan,

and Deluge Studios.

Creative Ideas and Realizations

Alexandru Cohaniuc have a big web form with crumpled paper, stamp and it’s attached with sello-tape.

Fernando Landi use notebook paper as background in his web form.

Jan-Eike Koormann has nice, beautifully designed web form that slides from the top.

Bert Timmermans use notebook for his web form.

We Love Icons have beautiful contact form with big submit button.

Octopia Labs presents clean looking web form, with big let us know button and nice reflection at the bottom.

Web form on Headscape.co.uk is located in the footer.

Orman Clark’s contact form is decorated with butterfly.

BubblesSOC has a big contact form with ribbon on top.

Mutant Labs contact form is compact and it has all the traditional contact details on top.

Todd Adams use concrete background in his web form.

Pixelight Cretive’s contact form pops up in the middle of the screen.

Design Informer use huge mail envelope and text, and illustration of informer who shows up from the hole.

Catalyst Studios has 3 buddys and bag full of letters decorating their web form.

Contact form on N.Design Studio is a bit vinatge, with notebook paper in the fields.

Sprockethouse.com web form is completely vintage and pops up in the middle of the screen.

Qwert City allows users to send a postcard.

Web Designer Wall contact form has a retro feel.

Fivecentstand offers hand drawn, seriously old web form, which is maybe a bit hard to find on the page.

Kev Adamson web form is created in grunge style.

Contact form in The Greg Brady Project is placed in the footer, and it has a vintage feel, with all these magazines, pictures and coffee stains around.

Substrakt also offers a visitors to send a postcard with nice post stamp.

Pompaneo with vintage design.

The Glasgow Collective use icons and big Send Message button.

Which style suits You most?

If you are seeking easy success then you should opt for 640-460 training by test-king. No regular classes no hassle, download F50-521 exam material with 642-515 test engine and pass your certification on first attempt guaranteed.

Tell Us What You Think

Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

Enjoy This Post?

About Nikola Lazarevic

Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

35 Comments So Far

  • Nice collection, I like the deluge studio’s form.

    Antonio
  • Great inspiration list!

    k.rammen
  • Awesome collection mate! Thanks for this Wednesday morning inspiration! Some are really great 8-)

    ~ @kovshenin

    Konstantin
  • Hi there, I’ll like to ask, where do i generate the forms from???

    Perlie
  • Nice collection dude!

    vivekdevaiah
  • Great for inspiration. The contact form is for me one thing that I do not take lot of attention but I should!

    DJaVuPixel
  • Excellent collection mate. The minimalistic forms (first three) are the ones that I like the best, but most of these are definitely unique. I think the form is one of the most ignored parts of websites and if we spend hours upon hours on the site design, we also need to make sure that our forms look good as well.

    Design Informer
  • Very good collection, Nik. Most of them are unique in their approach. I like minimalistic forms like the ‘Chitich’. In terms of logical design, I think the form of ‘Deluge Studios’ simply stands out.

    Gives some inspiration for me, for sure :)

    Richie
  • I like the forms of Kev Adamson, Fernando Landi and Pompaneo. Unfortunately this last has been achieved in Flash.

    Thanks for inspiration Nik! ;)

    Simone D'Amico
  • Great inspiration here! Thanks Nikola!

    piervix
  • Nice article, nice range of examples. I especially like the minimal forms.

    Reminds me I should do something about my own contact form, hummm…. :-)

    Thanks! – Bob

    Bob Hays (@purplehayz)
  • Awesome collection of forms. I think the importance of a well designed (contact) form is underestimated. I think well designed forms can motivate users to fill out the forms and even enjoy it. We always pay a lot of attention to our forms ( http://www.sbschepens.nl/contact/ for an example) .

    Leon
    • Hi Leon, thanks for stopping by and commenting. I agree with you!

      Nikola Lazarevic
  • kev adamson design is so cool, i like that one apart from others, and you gave a nice roundup of form for inspiration :)

    sriganesh
  • Great collection! Simple and functional.
    txs

    Lais
  • really useful and wide collection of example… thanks

    webbografico
  • Amazing and USeful collection.

    Jasha
  • This article is a great source of inspiration, thanks!

    Mihai O.
  • wow really inspirational list!

    jared thompson
  • This article has been shared on favSHARE.net. Go and vote it!

    favSHARE
  • A ton of inspiration :)

    Arun Basil Lal
  • You must have had a lot of work to select all these cool webforms. Thanks a lot!

    Zeemp
  • great round up of forms :) designers tend to forget this area of a website, even I have in the past. A nice unique contact form can be the final touch to a nice design.

    Michelle
  • I love the variety here. When it comes to contact forms, the simpler the better. Nice roundup!

    Chris Thurman
  • Awesome! Nice collection of contact forms!

    Amol Nirmala Waman
  • Nice list but like many posts I have seen every example only shows text boxes, textareas or radio buttons. So many forms require drop down lists and there does not appear to be a way to design these consistently in all browsers without the use of jquery etc. A showcase of well designed forms using more form elements line drop downs lists would be a great article for the future ;-)

    Niall
    • I agree with you Niall and that’s great idea for the next article about web forms!
      Thanks for stopping by and commenting

      Nikola Lazarevic
  • Great Post, thank you!
    Check this form: http://thetravellingosteopath.com/contact.html
    when you complete filling the details it’s flip.

    Oshik
  • Very nice collection!
    I belive that my form has a cool clean style with icons. Look at thiagofaleiro.com/contato .. if you like you can add to the list.
    Thank you friend!

    Thiago Faleiro
    • Beautiful and clean form you have on your site Thiago! I’m so sorry I missed it.
      Thanks for leaving a comment!

      Nikola Lazarevic
  • Thanks for all comments and suggestions!
    I really appreciate your help!

    Nikola Lazarevic
  • Nice collection. Thanks

    SM
  • good collection! thanks nikola ;)

    Juanpol
  • very nice!!!!

    maya(animacia)
  • Awsome collection! I love the concept and minimalism on most forms. The simpler the better. Las Vegas Web Design

    Las Vegas Web Design

Leave Your Comment