25 Stylish Examples of Web Forms

Jun 6 2009 by Jacob Gube | 47 Comments

A web form is the primary mode of permitting users to interact with a website. Whether it’s for signing up to a service, leaving a comment on a blog post, or writing an email through a web-based client such as Gmail – forms are a staple to modern websites and web applications.

In this showcase, you’ll be able to set your eyes on a few remarkable and well-constructed web form designs for inspirational ideas on how to build and design engaging and effective HTML forms.

1. Alexandru Cohaniuc

Alexandru Cohaniuc

2. Tea Round App

Tea Round

3. Grooveshark

Grooveshark

4. Substrakt

Substrakt

5. Matt

Matt

6. Pixelight Creative

Pixelight Creative

7. Ballpark

Ballpark

8. MAQUINA studio

MAQUINA studio

9. nclud

nclud

10. MonAssoc

MonAssoc

11. Komodo Media

Komodo Media

12. AllDevJobs.com

AllDevJobs.com

13. Connect

Connect

14. TVI

TVI

15. Webgrapes

Webgrapes

16. Headscape

Headscape

17. Digg

Digg

18. Graphik.fi

Graphik.fi

19. CollabFinder

CollabFinder

20. Digitalmash

Digitalmash

21. Kontain

Kontain

22. SocialSnack

SocialSnack

23. Mint

Mint

24. BBC

BBC

25. Media Temple

Media Temple

Related content

47 Comments

tehkubix

June 6th, 2009

Really like komodomedia and grooveshark. The comment layout on digitalmash is pretty cool too.

Danh ba web 2.0

June 7th, 2009

Very nice and cool. See more: http://tr.im/nGe3

Roseli A. Bakar

June 7th, 2009

This is a great list contact forms Jacob. I should find this list handy in the future.

Jacob Gube

June 7th, 2009

@tehkubix: I try to be impartial when putting these showcases together, but I’d have to say that Grooveshark is my favorite one out of the bunch: clean, simple, and very engaging.

@Danh ba web 2.0: Nice showcase, thanks for sharing.

@Roseli A. Bakar: I was designing the interface for a web form about a week ago, which resulted in a massive collection of web forms that I liked and that my friends liked: this showcase is a trimmed-down version of that list, and I hope it helps you quickly find design inspiration for when you need to design a web form.

hadi060

June 7th, 2009

Wow what a great collection! Me too I like very much Grooveshark. Hope find a css tutorial to creat a menu like it :)
Thanks for sharing..

hadi060

June 7th, 2009

sorry I mean a form :)

seriocomic

June 7th, 2009

Having some insight into the complexity of these, I thought they are worthy of a mention:
http://www.digithinkinteractive.co.nz/contactus.asp
http://mobygreen.com/contact/

Callum Chapman

June 7th, 2009

Nice collection – I need to learn to code!

Keith D

June 7th, 2009

Grooveshark is, as you say, clean and simple but Alexandru Cohaniuc is the one for me.

Crumpled paper with sticky tape… very nice.

Trouble is, if I had another look through, I’d pick another favourite.

They are all great for ideas.

Aneslin

June 7th, 2009

Really awesome form designs,
thanks a lot.

Rene Zammit

June 7th, 2009

Great forms. Nices ideas. Gonna use these :P

Dimas

June 7th, 2009

Very nice … I like: AllDevJobs (something about a simple, stylish search box, its just great), CollabFinder and Webgrapes (color and rounded corners always add flair). Good job Jacob, thanks for sharing!

Jim Gaudet

June 7th, 2009

F!@#in A man, you are like a mind reader. Today I was going to look for some ideas on login forms and you did it for me.

Sweet, its going to be a great Sunday..

Marc

June 7th, 2009

It’s all great looking, but some forms may deter conversion rates because it’s not too obvious how one should interact. Consider your audience and your objective for the page before you design a form.

Om Ipit

June 7th, 2009

really inspiring me. i love SocialSnack

Ben Sky

June 7th, 2009

Nice collection, heres another interesting one done with jQuery: http://bit.ly/GiAI9

Webgrapes

June 7th, 2009

Thanks for including our Contact form! It’s plain simple and we love it :-) Thanks again!

Chris

June 8th, 2009

Great examples of an aspect of site design that is often an afterthought.

div

June 8th, 2009

Happy to see so many varieties. Looking to C many more additions very soon……

Farid Hadi

June 8th, 2009

Thanks for showcasing these nice forms here Jacob. Your timing couldn’t be any better (OK, maybe you could have posted it a couple of days earlier :P ) as I’m currently working on a form on my own site. I hope I can absorb something out of this showcase and do something to improve my form.

Thanks for a great showcase!

webmasterdubai

June 8th, 2009

wowo nice collection of forms and good ideas.

Subramanian

June 8th, 2009

It is simply superb collection. I have no other words to express.

Chris Wallace

June 8th, 2009

@Jacob Good lookin’ roundup of forms. Thanks for putting AllDevJobs on the list!

@Dimas Glad you like it! ;)

Tim Wright

June 8th, 2009

Very well put together showcase. I usually don’t like lists like this because they just contain example from the sites we all usually go to, but this one is actually very useful. Thanks!

Rogie King

June 8th, 2009

@Jacob, Thanks for putting Komodo Media on the list. A special thanks for including the word “Poppycock” in your screen capture ;]

Monique

June 8th, 2009

nice, good ideas. I use a freely available script called PrettyForms.

Raveendran

June 9th, 2009

Very good collection. I like it very much.

Jacob Gube

June 9th, 2009

@Rogie King: Explain to everyone what “Poppycock” is. :)

Rogie King

June 9th, 2009

Sure thing Jacob! Here’s what I lifted from WikiPedia:

PoppyCock Anglicized form of the Dutch pappekak,[1] which literally means soft dung or diarrhea (from Dutch pap pap + kak dung) – is an interjection meaning “nonsense

Ruben Medellin

June 10th, 2009

Just to point out, Grooveshark is Flex based, so it somewhat stands out of the web form category. Neat nevertheless.

Big Buddy

June 10th, 2009

Thanks for this great list of forms. It certainly is some timely inspiration!

Sameer Khan

June 19th, 2009

Its really a great list of forms…I just loved it…I will try to make one of them for me too..

Danielle

June 27th, 2009

SocialSnack is very cute :)

Viljami Salminen

June 30th, 2009

I’m a bit late, but thanks for including my contact form (graphik.fi) ! I appreciate it.

Fernando Medeiros

February 13th, 2010

great web forms!!!
thanks for sharing.

neel

June 8th, 2010

Excellent design forms. Nice to use these design trends in this year.

Siddharth

July 11th, 2010

awesome work .. Really liked a lot..
Thanks for the share

Chris

July 23rd, 2010

These forms suck.

Dev

August 14th, 2010

too good collection. I disagree with you chris. these are good examples.

Stripeyhorse

September 1st, 2010

Yeah some nice stuff there. maybe its time I go back to redesign ours.

Vekta

February 11th, 2011

A very good collection and great insperation. Forms used to be so dull but utilising jQuery can make forms enjoyable to build.

Paul

June 14th, 2011

Excellent collection, think headscape is the nicest.

Divyang

July 15th, 2011

Zoho Creator is really great tool to build web forms without writing a single line of code. It supports CAPTCHA and File Upload which are not even supported by Google Docs. If you’re looking for example of how to build web forms, have a look at this guide Zoho web forms builder.

coldfire

September 8th, 2011

Keep it up. Good work!

Geoff McMahen

September 15th, 2011

Stunning collection of great design ideas, thanks for sharing!

Leave a Comment

Subscribe to the comments on this article.