Skip navigation

Comment Live Preview Placement

A feature I really appreciate on many blogs, including WordPress blogs, is the comment live preview feature. This is a feature that allows the writer to see what they are writing in the comment form as they write.

To be honest, there are two forms of comment preview. One is the live preview which displays the keystrokes as they are typed in the comment form. The other is a user initiated comment preview. The user types in their comment and then pushes a button to see a preview of the comment before they commit by hitting the Submit button.

Either form works well to help prevent errors in spelling and grammar by giving the user a chance to see what they are writing before they post their comment. But it does more than that.

Seeing a preview of your comment gives the user a second chance to change his or her mind. This can also give them a second chance to reword their comment, if they are responding out of emotion rather than logic and kindness.

It also helps when the discussion involves programming code. If the user can see whether or not their <php code(); ?> will appear in the comment or turn to mush and jumble. It can prevent two and three attempts to post the code, with a lot of apologizing and frustration on their part and yours when you find all the attempts to post the comment.

The key to using a comment live preview WordPress Plugin or feature is placement. Helping the user use the preview their comment as they make their comment.

Placing the Comment Live Preview

Using a comment live preview WordPress Plugin is generally as simple as installing the Plugin and placing the appropriate template tag for the Plugin in your comments.php or comments-popup.php template file. The question is where do you put it.

There are generally three places to put your comment preview feature in relationship to your comment form: Above, below, or to the side. Let’s look at what happens in each of these spots and how to improve the visibility and use of your comment preview features.

Placing the Live Comment Preview Below Your Comment Form

Many web page designers and WordPress Theme designers put the live comment preview below the comment form. This makes sense. It prevents clutter by moving the preview section lower, and it puts it near the Submit button.

It also has some serious downsides that need to be considered.

Depending upon how your comment form is designed, placing the live comment preview below your comment form pushes the preview off the screen. If the user hasn’t scrolled down far enough, they won’t see it, possibly until it’s too late.

If you put it below the comment form, but above the Submit button, it does give them a chance to see it when they scroll down to find the Submit button, but then, they’ve already written their comment, so will they take the time to scan the content before hitting submit?

If the preview is below the Submit button, the odds are that they might not even see it, so why bother?

Let’s look at some examples of the comment live preview set below the comment form.

The example below shows a very long comment form. It is made longer because of the spacing as well as the addition of the smilies and the long comment form box (textarea). If the user hasn’t scrolled all the way down the page, past the end of the comment box, then they may never see the comment preview.

Comment Live Preview featuring a long comment form

Notice where the Submit button is. It is above the comment preview section. The user could click the button before they even see the preview.

Let’s switch things around and move the comment preview above the post between the smilies and the comment form. Now the comment preview is visible and connected with the comment.

Comment Live Preview featuring a long comment form with the comment preview moved above the comment form

If you choose to put the comment live preview below your comment form, make sure the preview is connected to the comment form in some visible way. In the next example, the designer has done that by creating outline boxes around the comment form box and the comment preview.

Comment Live Preview featuring preview form below visually connected to the comment form above

When looking at user’s usability of your blog, helping them find the comment preview feature helps them take advantage of the feature’s benefits.

Placing the Live Comment Preview Above Your Comment Form

As shown in the example above, by moving the comment live preview above your post, you increase the odds the user will see the comment preview in order to take advantage of it.

This is one of the benefits. They can see it. They can also see it as they type, just above where they are typing, if the preview is close to the comment form, which may help them type and express them self better. Like watching yourself type on the computer or typewriter. You see the letters and words as they are written, and as they will appear on the final posted comment. It gives you the chance to think about what you are writing as you watch the words form.

The downside is that it can add to the clutter of the comment area. Still, anything added to the comment area can add to the clutter, so its a trade off. How you highlight the comment preview area adds to the clutter for the look of the page, even without comments. So think about how you want this area to be visible, deciding between highlighting the live comment preview feature and maintaining a clean and simple design look.

Comment Live Preview featuring preview form below visually connected to the comment form above

In this example, the comment live preview is above the comment form and below the contact information, visually connecting the preview with the comment, and allowing the preview to be seen on the same screen as the comment form.

Placing the Live Comment Preview on the Side of Your Comment Form

Another alternative to placing the comment live preview above or below your comment form is to put it on the side.

Comment Live Preview featuring preview form on the side of the comment form

This directly connects the comment preview with the comment form, placing it directly next to or very near the comment form. It is immediately visible on the same screen as the comment form.

It can also add to the clutter of your comment area. More importantly, it causes the user to shift his or her eyes away from the side of the screen that the comment form is on and move them to the right or left of the comment area. Is this comfortable? Is this comfortable for the language your blog is in? If the blog is in Hebrew, Arabic, or another right-to-left language, having the comment form and preview next to each other includes the decision about which side to choose.

Using a Comment Preview Button

If you choose to not feature a totally live comment preview but one triggered with a click of a button, then the comment preview button needs to be as close to your comment form and Submit button as possible in order for the user to see they have this opportunity.

Comment Preview featuring a comment preview button to click to see the comment preview

The web page designer gave their comment preview design element some thought. They wanted the preview feature to stand out without cluttering up the area. So they put the preview button in an obvious place across from the Submit button, but also left a subtle graphic placeholder for where the comment preview would appear once the button was pressed.

Again, it’s about helping the user use your site and encouraging and helping them to leave comments on your blog. It’s up to you to decide how and where you want to showcase your comment preview feature, if you choose to use one.

WordPress Comment Preview Plugins

This is not a complete list of all the Comment Preview WordPress Plugins. Check the resources below for more and newer versions of Comment Preview Plugins.

Other WordPress Plugin Resources

Digg Digg | | Blinklist BlinkList | Furl Furl
Spurl Spurl | Reddit | Add to Simpy Simpy | Add to RawSugar RawSugar

Site Search Tags: , , , , , , , , , , , , , , , , ,
Copyright Lorelle VanFossen


  1. Posted April 1, 2006 at 12:56 pm | Permalink

    I had seen it before but never got around to it, a no-brainer install, thx.

    Got Preview? lol

  2. Posted April 2, 2006 at 5:15 am | Permalink

    Good work Lorelle, I always liked this feature, but always got puzzled about the placing of components.

    This clears it out. I will install it after I upgrade to WordPress 2.0. (Yep, haven’t yet upgraded, go me)

  3. Posted April 5, 2006 at 5:28 pm | Permalink

    My personal favorite (though a little annoying to configure): AJAX Comment Preview. Could use a little polishing, but it tells you exactly what WordPress will do to a comment, all without any page reloads.

  4. Posted January 31, 2007 at 8:57 am | Permalink

    Nearly a year later, I take it that there is no way to do this on blogs? Or heck, even have just about any sort of preview option for comments? I can’t recommend to my friends, chiefly because it neither allows commenters to see what is going to happen, nor does it allow them to later edit or delete their comment.

  5. Posted January 31, 2007 at 1:12 pm | Permalink

    Is comment preview “that” important to you? Odd. There are so many other features that make blogs worth recommending. Comment spam protection, fast and easy to use and design blogs, all kinds of Widgets that allow you to add lots of gadgets to your blog, podcasting, audio and visual content, and…well, there’s a lot offers. Live comment preview isn’t that desirable for most bloggers.

    As for why they can’t see the comments when the write them, that’s odd. The majority of blogs do not feature a comment preview. People type what they type, they see it in the comment form as they are typing (all a preview does is how you how it will look when posted, nothing more) and they control what they write. If they can’t control what they write in a comment in the first place, a comment preview isn’t going to help them. 😉

    Still, if you want it bad enough, ask them. They’ve provided a lot of things people asked for that many bloggers don’t like and don’t use. Snap Anywhere Preview, for example.

  6. Posted January 31, 2007 at 10:12 pm | Permalink

    Comment spam protection

    The captcha works well enough.

    all kinds of Widgets that allow you to add lots of gadgets to your blog, podcasting, audio and visual content, and…well, there’s a lot offers.

    True, but only truly “professional” bloggers would use such things. I’m talking more about “personal” blogs, written by someone and usually read by only a few of their friends. These features are probably more useful when one is writing for, or trying to acquire, a large audience of strangers.

    Live comment preview isn’t that desirable for most bloggers.

    You’re right; sorry about that. What I meant is comment preview in general, not necessarily live comment preview.

    Both Blogger and have weird restrictions on what is allowed in comments. For example, neither of them allows lists — <li> tags. allows <blockquote>; Blogger doesn’t. Maybe you are linking to somewhere, but it turns out as something else. Maybe you are writing a ratio, like 3:8, which gets turned into a smiley. Maybe what looks a different line in this textarea will turn up on the same line when posted. Maybe your post looks longer, or shorter, after posted. Maybe you are typing the comment it in your own HTML editor and pasting it into that intolerably tiny textarea, in which case anything might happen.
    Right now, on, there is no way of knowing what your post will look like after posting it. If you find some goof-up after posting, it doesn’t even allow you to delete your comment to post a new one. (I don’t think allowing people to delete their comments, as Blogger does, is desirable, but without preview…)

    Now here I go, crossing my fingers and clicking “Post”….

  7. Posted January 31, 2007 at 10:15 pm | Permalink

    Ugh. If I had known the blockquotes would have been so huge and distracting, maybe I would have only set the quoted parts in italics. Or something else, whatever seemed the best. If only there was a way of knowing how it would seem…

  8. Posted January 31, 2007 at 10:32 pm | Permalink

    Sorry for posting so frequently, but what I forgot to mention — probably the most important thing — is that while Blogger at least warns you (during Preview) that your post contains disallowed HTML and gives you the chance to fix it, WordPress silently discards all tags, and turns your post into a mess.
    I asked about this in the forums a few months ago, but I just tried asking again through the “Contact Support” option, let’s see.

  9. Posted February 1, 2007 at 6:23 am | Permalink

    I admitted there were issues with comments, and few people blockquote in comments, though I’m seeing a new trend, so I may style blockquotes for comments differently.

    Still, everyone, including bloggers professional or otherwise, need to think through their comments, with or without code, before posting. Site owners can clean up comments if they want to, which I highly recommend when people make mistakes.

    I know this is of critical importance to you, but it is a fact that it isn’t so important to most.

    I recommend you read How NOT to Comment on Comments and Editing Your Blog Comments for more help on this.

  10. Posted July 10, 2007 at 11:48 am | Permalink

    Wow that is cool… I think im gonna have to install it on my internet marketing ideas blog.. hmm I figured you’d have it installed for us to preview.. lol.. thanks for the helpful post!

  11. Posted January 30, 2008 at 1:59 am | Permalink

    umm.. sorry but how do you change the position?

  12. Posted January 30, 2008 at 8:30 pm | Permalink

    @ klongofconsciousness:

    Change the position of what? The live comment preview? If you have a blog, you currently cannot change anything associated with Comments. This is only for users of the full version of WordPress.

  13. Ted Powell
    Posted February 15, 2009 at 7:48 pm | Permalink

    “If you have a blog, you currently cannot change anything associated with Comments.”

    Thank you for that clarification. Now I know that it’s no use to request a blogger to enable comment preview. It hadn’t occurred to me that such a basic feature would be completely missing.

    “As for why they can’t see the comments when the write them, that’s odd.”

    The simple answer is that when they write them they have no reliable way of predicting how the software will process them. Note for example shreevatsa’s surprise, expressed in comment 7 above, at the big blue rectangles that showed up in his comment 6 *after* he submitted it for processing by the site software. (I would have put “after” in italics rather than using asterisks, if I were able to preview the result.)

    “The majority of blogs do not feature a comment preview.”

    I almost made a snarky remark here, but I really do review my comments before posting them. This may actually be true, if it’s the case that the majority of blogs are hosted by Having said that, what *is* the basis for this claim?

    “If they can’t control what they write in a comment in the first place, a comment preview isn’t going to help them.”

    Trivially true, but you are skipping over the real issue. Commenters can *not* control the processing of their comments by the site software, and some of us care enough about our public personas to want the opportunity to check in private for surprises perpetrated upon us by the submission process.

    “Still, everyone, including bloggers professional or otherwise, need to think through their comments, with or without code, before posting.”

    I *do* think through my comments. How does thinking them through let me know what a blockquote, for example, is going to look like? Please explain.

  14. Henrik Kjelsberg
    Posted April 23, 2010 at 12:01 am | Permalink

    I REALLY dislike your suggestion and think it’s bad UX. The comment-area could be styled to mimic a regular comment pixel by pixel, so there is no use for an extra preview. That’s just confusing or at least messy.

12 Trackbacks/Pingbacks

  1. […] Lorelle on WordPress » Comment Live Preview Placement Links to comment preview plugins for WordPress along with tips for placement and styling. (tags: wordpress howto usability) […]

  2. […] So far so good.  My next step was to go back to the various .php sheets and reenable the relevant plugins, like the browser identifier.  That was the job of a few minutes.  I had been reading Lorelle VanFossen’s pages on WordPress and blogging in general and remembered that she had posted recently about the live preview function for the comments page.  I recommend her site for any bloggers, by the way, she updates very often and very regularly and has a host of advice for bloggers.  In fact, whenever I tweak the site, it’s usually because of a post I have read on her site. […]

  3. […] Then build a section to display the live comments preview. Per an excellent post titled Comment Live Preview Placement by Lorelle on, I recommend placing this box between the login block and the input box – this helps readers notice the preview. Add Comment Preview to COMMENTS.PHP […]

  4. […] Comment Live Preview Placement […]

  5. […] Letting the user have a chance to see what they are about to post prevents not only spell mistakes or grammatical errors but also gives them a chance to have a second thought over what they have written. There are some nice plugins like Live Comment Preview to add this type of feature into WordPress comment form. But the question is not only the preview functionality but also where the preview will be shown, Lorelle VanFossen has written a good tutorial about live comment preview position. […]

  6. […] Comment Live Preview Placement […]

  7. […] Comment Live Preview Placement […]

  8. […] Comment Live Preview Placement […]

  9. […] Comment Live Preview Placement […]

  10. […] Filosofo Comments Preview WordPress Plugin and Comment Live Preview offer a preview button option for blog comments near the comment form. For more information on using comment previews on your blogs, see Comment Live Preview Placement. […]

  11. […] Comment Live Preview Placement […]

  12. […] Comment Live Preview Placement […]

Post a Comment

Required fields are marked *

%d bloggers like this: