Updated: January 25th, 2010

thumbnail Introduction

If you follow web design at all, you probably see 5 billion top NN posts on a daily basis mentioning site and blog designs, fonts, icons, etc.

However, nobody seems to be paying attention to these little but important guys: comment forms.

If you have an appealing comment box, you are more likely to receive comments (this is based on days of scientific research that I imagined I did in my head) and your content is more likely to be re-shared, voted up, and saved.

I really do feel that way when I visit blogs, especially when an otherwise aesthetically pleasing site has a plain vanilla comment box.

Let's Go

So here we go. I have looked through hundreds of sites to make this collection, go ahead and let me know if you like it (yeah, I know, my comment box is not as spiffy as theirs).

I've also included my notes with the parts that I liked.

1. blog.spoongraphics.co.uk 

http://www.blog.spoongraphics.co.uk 

  • interesting submit button
  • fun background
  • great font
  • grungy
  • border glow
  • normal:

normal

  • focused:

focused

 

2. springydevelopment.co.uk

http://www.springydevelopment.co.uk

  • 2 column
  • wide submit button

 

3. css-tricks.com

http://css-tricks.com

  • Chris Coyier doesn't mess around with crappy designs – his website is superb in general
  • normal:

normal

  • focused:

focused

  • internal disappearing labels
  • dimming labels
  • interesting submit button
  • custom images

 

4. net.tutsplus.com

image

  • tongue:

tongue

  • internal disappearing labels
  • appealing default avatar

 

5. smashingmagazine.com

http://www.smashingmagazine.com

  • simplistic
  • appealing submit button
  • absence of author website – less spam

 

6. branded07.com

http://www.branded07.com

  • fading
  • interesting background

 

7. depcore.com

http://www.depcore.com

  • simplistic
  • unconventional – looks like a pad of paper or a letter
  • contains an anti-spam measure

 

8. marcofolio.net

http://www.marcofolio.net

  • notify/don't notify option (for the first time the design is cohesive – not some random checkbox under the submit button)
  • lots of formatting buttons
  • smilies

 

9. jankoatwarpspeed.com

http://www.jankoatwarpspeed.com

  • handy and appealing formatting buttons
  • flag next to the country – it then shows up next to each commenter, kind of cool:

http://www.jankoatwarpspeed.com flags 

10. dezinerfolio.com

http://www.dezinerfolio.com

  • highlight the field with focus – concentrate attention on one spot
  • large padding
  • by the way, they have an amazing header. I couldn't resist:

http://www.dezinerfolio.com header

 

11. sohtanaka.com

http://www.sohtanaka.com

  • I love it
  • custom submit button
  • hovering quote
  • very polished look

 

12. productivedreams.com

http://www.productivedreams.com

  • the comment box actually sits *above* the comments – a radical, yet interesting approach
  • custom icons
  • really nice custom highlight on hover effect:

http://www.productivedreams.com hover

  • usability and UX at their best

 

13. kevadamson.com

http://www.kevadamson.com

  • grungy, sloppy – looks great!

 

14. line25.com

http://line25.com

  • clean
  • side by side
  • symmetrical, exact
  • I love it

 

15. markforrester.co.za

http://www.markforrester.co.za

  • colorful, crayon-like (though it looks better on the site itself – you need to see it in its natural habitat)
  • internal disappearing labels

 

16. jrvelasco.com

http://www.jrvelasco.com

  • simple, and yet sophisticated

 

17. gizmodo.com

http://gizmodo.com 1

http://gizmodo.com 2

http://gizmodo.com 3

  • very simple from the UX perspective:
    • single line box, without the need to login first
    • expands on focus
    • no need to login even then, unless you want to – just enter your email

 

18. instantshift.com

http://www.instantshift.com

  • this is one of my favorites
  • I love, love, love the way the comments look, especially the way the author ones stand out:

http://www.instantshift.com comments

 

19. koodoz.com.au

http://www.koodoz.com.au

  • internal disappearing labels
  • the design itself, while seemingly not too special, mashes with comment list very well. Check it out – I think the curvy lines are very creative:

http://www.koodoz.com.au comments

 

20. elliotjaystocks.com

http://elliotjaystocks.com

  • click the image – it's bigger than it looks
  • if you can't tell (), the elements are MASSIVE, which makes this comment box pretty unique

 

Conclusion

If you liked this post, you might also enjoy

So, what did you think? The comment box you're looking for is at the bottom of the page.

● ● ●

Artem Russakovskii is a San Francisco programmer, blogger, and future millionaire (that last part is in the works). Follow Artem on Twitter (@ArtemR) or subscribe to the RSS feed.

In the meantime, if you found this article useful, feel free to buy me a cup of coffee below.



Share
  • jius0

    I like the clean ones – 14, 16, 9. Definitely look good, not too flashy but polished.

    Thanks for compiling these!

  • Coldman

    #11 and #13… stunning.

  • http://www.productivedreams.com Gopal Raju

    Thanks for including ProductiveDreams :)

  • http://www.depcore.com Adam Anlauf

    Thanks for featuring my site Depcore, new version coming soon :)

  • http://www.marcofolio.net/ Marco

    Nice roundup – very inspiring. Especially like the review of each comment form, well done.

    Thanks for including Marcofolio and keep up the great work!

  • Artist

    I like it the best when it's real simple and clear.

  • Adrian

    I never really thought about customizing the comment box, nice to see so many options. I like the darker ones, just because, but my favorite is the sohtanaka – – it begs you to put something, anything in the form!

  • theGREATunknown

    customizing the comment box give additional appeal to viewers/readers. Making it simple yet stylistic plus user friendly.

    Nice List

  • http://www.csharpstring.com/ David

    i really liked blog.spoongraphics.co.uk , thanks.