WordPress comment form is usually the left out portion of most blog designs. Most blog designers do not care to make the comment form unique and stylish but just create it in a hurry. Here are 10 ways with examples to make your blog’s comment form stand out from the crowd.
1. Change the Layout
Most wordpress theme developers do not give much thought into changing the layout of comment form and usually use the same layout as in the default wordpress theme. By creating a different layout of comment form, you can make your blog stand out from the crowd. Here are some nice comment form layouts you can get inspiration from to create a different and unique layout for your net blog design.
Name, Email, URL in line
Name, Email, URL in line at bottom
Name, Email, URL to right
Name, Email, URL to the left
Name, Email, URL after comment area
2. Using tabindex
tabindex is the attribute for form elements using which you can decide the tab order that is where to focus next when user presses tab to proceed to next input field. By default, tab index will be the order in which input fields are present in html code. But if you change the layout, it will be better to specify tabindex attribute with input fields.
3. Use label and fieldset
The comment forms should be accessible to all, even those who use screen readers, they should be able to comment on your blog. label and fieldset tags make your comment form more accessible as screen readers use information in label tag to specify input fields.
4. Highlight Field in Focus
Highlighting the input field currently in focus makes your comment form more usable. You can use the :focus pseudo CSS selector to define styles for highlighting field in focus.
But the CSS technique does not work everywhere as older versions of IE do not recognize :focus pseudo selector. For that You can use JavaScript. Here’s the sample code in jQuery to highlight field in focus.
$('input').focus(function(){
$(this).css('border-color', '#000');
})
.blur(function(){
$(this).css('border-color', '#666');
});
5. Add a Formatting Toolbar to Comment textarea
This one is not that necessary but if you want to enhance user experience by providing them with options to format their comment, you should consider adding a WYSIWIG text editor toolbar to your comment textarea. Here’s a nice plugin called TinyMCE Comments that utilizes the same editor which is used in WordPress Admin area.
6. Let Users Subscribe To Comments
This is a must have feature for any WordPress blog as it lets users know if anyone has replied to their comment or added some useful information to the article. You can use Subscribe to Comments WordPress plugin to add this functionality.
7. Show Errors Instantly
In WordPress, if comment form data has some errors, users are taken to a new page that only displays error message and nothing else. As a result user has to click back button and sometimes comment data is lost which will have to be typed again.
It is always a nice idea to have form validation on the spot using JavaScript and display error messages to user as he leaves a particular field rather than form posting back to server and then coming out with errors. Here’s a nice tutorial on adding form validation with jQuery.
8. Preview Comments
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.
9. Edit Comment After Posting
10. Spice Up With Graphics
Using some fancy graphics to style your comment form will give it a unique appearance and brand. Moreover, graphics say more than words and will help catch user attention and will motivate them to comment on your blog. Here are some spicy comment forms with appropriate use of graphics.
That’s It! With a litlle thought and time, you can make your blog’s comment form more usable and enhance the user experience.