Comment Box

Problem

Users want to comment on an article or product

Solution

Add a small form below the article and after the other comments that allows users to submit a comment

From www.ok-cancel.com


Use when

A comment-box is often used on a Blog Page but can also be used on an Article Page, Guest Book or for sharing experiences about the products of an E-commerce Site. Users may want to comment on the content of an article or share experiences about the product that is being discussed. The comment box serves a means for Community Building.

How

A comment box is basically a simple type of Form. The main fields are Name, E-mail address and the Comments themselves. Additionally a web site address may also be asked. The e-mail address is most of the time asked in order to be able to notify the commenter about replies or follow-ups but it is usually not shown when displaying the comment. Clearly indicate which fields are required and which are optional.

Allowing HTML or not?
When writing a comment it can be handy if you can insert a link or make some text bold. Sometimes using HTML codes is allowed for such purposes but usually the tags that are allowed are limited. Therefore the users must be told what they can use. Be careful though, allowing links attracts blog-spam like honey attracts bees!

Battling blog-spam
Blog-spam can be a very serious and annoying problem. There are several techniques to battle it. Besides technical solutions such as blacklisting IP addresses you can use some other techniques:
  1. Only allow registered users to comments. But then you need to provide them with a Login
  2. Add a Captcha to make sure that only humans add comments. However, this is not effective against humans adding spam.
  3. Use a moderation process. All comments must be approved first by the moderator before they appear on the site. If you use this inform the user that his comment will appear after it has been moderated.

Giving feedback
After a visitor has posted his comment, the comment must be placed below the last comment on the page, just above the Comment Box itself. Highlight the new comment and scroll the page to that position so that it clearly shows that the comment has been added. Using Ajax you can also simply add the comment without reloading the page and then highlight it. The comment shouldn't only display the comment itself, but also the time and date it was posted, the poster, and optionally things like place and country of the poster.

Why

The comment box is a way to create a feedback mechanism on a site, using just a simple form. Instead of offering a generic Contact Page it gives the uses a direct way of reacting on the same page the content resides. By placing the comments also on the page the feedback mechanism is complete. Basically, it becomes a simple one-page Forum.

More Examples


This example rom www.smashingmagazine.com shows how you can explain which HTML tags can be used and how to indicate what is optional and what isn't.


On www.mashable.com/ a slightly more complex variation is used where both registered and unregisterd users can comment.


Literature

Battling spam in blogs
Bloggers Declare War on Comment Spam, but Can They Win?
Akismet anti-spam software

Code examples

PHP guestbook code
Comment Form tutorial
PHP Feedback Form tutorial
TNT comments script
plml logo

Comments

17 comments have been added to this pattern


Matt, 18th January 2008
How did you put this comment box on your website, is there a software or a specific coding language you must be familiar with? Do I have to pay for this, or can I get it for free?

THANK YOU!!!
Chris Poteet, 19th January 2008
Those examples you have are hideous.
Morgan Newall, 21st January 2008
Re: Hideous, I agree. Are these interface examples we want to emulate or avoid?
Martijn van Welie, 21st January 2008
I agree that they are a bit outdated. Time to look for some new examples. Any suggestions?
Russ, 29th January 2008
Suggestion: Build your own in 5 minutes or less.
Ronny, 29th January 2008
Cool stuffs here
Martijn van Welie, 3rd February 2008
I have updated this pattern; changed the description and added new examples.
ems, 27th March 2008
big help!thanks
me, 26th May 2008
im looking for a similar comment box for my site. where would i find the codes? how could i have people register for postings?
Luc Moers, 27th June 2008
Suggestion: an example of a comment box that allows user to use buttons instead having to be sufficient with HTML tags.
john, 12th September 2008
what is the code for post comment box
grant, 30th January 2009
what are the friggin' codes? what is the point of this page without giving the codes or means to put a comment box on a website? how do I put a comment box like this on my website?? html or what? php? hello is there anybody there?
Jakob, 1st February 2009
Dear comment-authors above,

As stated on the front page and page title, this site serves as a pattern book for different user interface interaction elements and their use-cases in web design. It shows you when they are usefully applied and different approaches to how they could be realised.
It does not show you how to realise them - there are too many different elements on this site, some of which have highly complex systems behind them.

That said, this very page features a live comment form (in which you entered your comment) so you can look at the source code of this page to see the basic structure of a comment form. As a comment has to be recorded somewhere and presented on the page, the comment form is just part of larger system. Check any one of the popular CMS/blogging engines out there - blogger, textpattern, wordpress etc.

Finally, I find the rudeness of some of the comments here, as well as in other threads, simply amazing. This is a free resource made available by a private person. Show some respect, please!
Martijn van Welie, 1st February 2009
Added some links to code examples for those that need more code help.
Weblover, 28th April 2009
Thanks a lot for your sharing of your Knowledge.
I found a lot of Interesting Collections at http://www.welie.com/patterns/ . I believe that page is a good reference and starting point to extend my UI and Interaction experience. Thanks you very much for your collection. You are still a good Professor though not employed in any university currently.
Sorry for my poor English.
Thank you.
Lill Miss Sportyy , 3rd August 2009
It's not easy for kids making their own webpage to see what to do, as i am one i am finding it very difficult to find a way to add a comment box to my own webpage!!
johnny, 3rd August 2009
wanted some code :(


Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name

Comment

Enter the verification code you see in the image below
captcha