Menu

25 Stylish Examples of Web Forms

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

This was published on Jun 6, 2009

47 Comments

tehkubix Jun 06 2009

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

Danh ba web 2.0 Jun 07 2009

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

Roseli A. Bakar Jun 07 2009

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

Jacob Gube Jun 07 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 Jun 07 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 Jun 07 2009

sorry I mean a form :)

seriocomic Jun 07 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 Jun 07 2009

Nice collection – I need to learn to code!

Keith D Jun 07 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 Jun 07 2009

Really awesome form designs,
thanks a lot.

Rene Zammit Jun 07 2009

Great forms. Nices ideas. Gonna use these :P

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

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 Jun 07 2009

really inspiring me. i love SocialSnack

Ben Sky Jun 07 2009

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

Webgrapes Jun 07 2009

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

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

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

Farid Hadi Jun 08 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 Jun 08 2009

wowo nice collection of forms and good ideas.

Subramanian Jun 08 2009

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

Chris Wallace Jun 08 2009

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

@Dimas Glad you like it! ;)

Tim Wright Jun 08 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 Jun 08 2009

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

Monique Jun 08 2009

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

Raveendran Jun 09 2009

Very good collection. I like it very much.

Jacob Gube Jun 09 2009

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

David Hellmann Jun 09 2009

nice forms!
here is my contact form: http://www.davidhellmann.com/contact/

Rogie King Jun 09 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 Jun 10 2009

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

Big Buddy Jun 10 2009

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

Sameer Khan Jun 19 2009

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

Danielle Jun 27 2009

SocialSnack is very cute :)

Viljami Salminen Jun 30 2009

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

Fernando Medeiros Feb 13 2010

great web forms!!!
thanks for sharing.

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

Siddharth Jul 11 2010

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

These forms suck.

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

Stripeyhorse Sep 01 2010

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

Marty McColgan Jan 25 2011

great collection

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

Excellent collection, think headscape is the nicest.

Divyang Jul 15 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 Sep 08 2011

Keep it up. Good work!

Geoff McMahen Sep 15 2011

Stunning collection of great design ideas, thanks for sharing!

This comment section is closed. Please contact us if you have important new information about this post.

Partners