WPBeginner» Blog» Themes» How to Style WordPress Comment Form

How to Style WordPress Comment Form

Last updated on April 1st, 2013 by Editorial Staff

Special WordPress Hosting offer for WPBeginner Readers

Comments play a crucial role in building a community around your websites. Comments provide an interaction platform for your readers where they can share their thoughts and have a reason to come back. Here at WPBeginner, we have fostered great relationships with several users that started from our comment form. We have also gotten numerous new post ideas from user comments on our WordPress tutorials. There are many ways to encourage users to leave a comment on your blog. One of those ways is to create a good looking, usable and accessible WordPress comment form. In this article, we will show you how to style WordPress comment form and take it to the next level by adding social logins, subscribe to comments, comment policy, and more.

Changing Comment Form Style in WordPress

Each page on your website contains default WordPress generated css style classes. Inside most WordPress themes there is a template called comments.php which is used to display comments and comment form on your blog posts/pages. The WordPress comment form is generated using the function <?php comment_form(); ?>.

By default this function generates your comment form with three text fields (Name, Email, and Website), a textarea field for the comment text, and the submit button. You can easily modify each of these fields by simply tweaking the the default CSS classes. Below is a list of the default CSS classes that WordPress adds to each comment form.

#respond { } 
#reply-title { } 
#cancel-comment-reply-link { }
#commentform { } 
#author { } 
#email { } 
#url { } 
#comment 
#submit
.comment-notes { } 
.required { }
.comment-form-author { }
.comment-form-email { } 
.comment-form-url { }
.comment-form-comment { } 
.form-allowed-tags { } 
.form-submit

By simply tweaking these CSS classes, you can completely change the look and feel of your WordPress comment form. Let’s go ahead and try to change a few things to get a good idea.

First, we will start by highlighting the active form field. Highlighting the currently active field makes your forms more useful for people with special needs and it also makes your comment form look more lively.

#respond { 
background: #ececec;
padding:0 5px 0 5px;
}

/* Highlight active form field */

#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
 
#respond input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

This is how our form looked like in WordPress Twenty Twelve theme:

Highlighting the active form field in WordPress comment form

Using these classes you can change the behavior of how text appears inside input boxes. We will go ahead and change text style of the author name field, and the URL field.

#author { 
font-family: Lobster, "Lobster 1.4", "Droid Sans", Arial;
font-size: 16px;
color:#1d1d1d; 
letter-spacing:.1em;
} 

#url  { 
color: #21759b;
font-family: "Luicida Console", "Courier New", "Courier", monospace; 
}

Notice in the screenshot below that the name field font is different then the rest. Also the text in the URL field is now the color blue.

Changing the style of comment form input area

You can also change the style of WordPress comment form submit button. Instead of using the default submit button, let’s give it some CSS3 gradient, and box shadow.

#submit {
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px;
text-decoration: none;
box-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#006ad4), to(#003366));
background: -moz-linear-gradient(top, #006ad4, #003366);
} 

#submit:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#003366), to(#006ad4));
  background: -moz-linear-gradient(top, #003366, #006ad4)
}

Taking Comment Forms to the Next Level

You are probably thinking that was too basic. Well we have to start there, so everyone can follow along. You can take your WordPress comment form to the next level by adding various other elements such as social login, subscribe to comments, subscribe to newsletter, comment guidelines, quicktags, and so much more.

Add Social login in WordPress Comments

Let’s start with adding social logins to WordPress comments. First thing you need to do is install and activate the WordPress Social Login plugin.

Once activated, go to Settings » WordPress Social Login. You will have to provide an app ID and app Key for Twitter, Facebook and Google. The plugin will provide you with step by step instructions on how to setup your app on each of those platforms. You don’t need to add all the networks either. You can simply choose to add the ones that you want (i.e twitter & facebook). Once you are done with the configuration and saved the settings, click on the Widget tab and scroll down to Advanced Settings. There you can choose where you want login buttons to appear. You can choose to have social login buttons on either the comment form, login page or both of them. You can also edit the CSS style for social login buttons on this page.

This will add social logins like this on your comment form:

Social Login Screenshot

Adding Comment Policy Text Before or After Comment Form

We love all of our users, and we really appreciate them taking a few minutes to leave a comment on our site. However, to create a healthy discussion environment it is important to moderate comments. To have full transparency, we created a comment policy, but you can’t just put this link in the footer. We wanted to have our comment policy be prominent and visible for all users who are leaving a comment. This is why we decided to add the comment policy in our WordPRess comment form.

If you want to add a comment policy page, then the first thing you need to do is create a WordPress page and define your comment policy (you can steal ours and modify it to meet your needs). After that add the following code in your theme’s functions.php file:


function wpbeginner_comment_text($arg) {
  
  $arg['comment_notes_before'] = "We're glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='http://www.example.com/comment-policy-page/'>comment policy</a>. Your email address is required but will not be published.";
    
  return $arg;
}

add_filter('comment_form_defaults', 'wpbeginner_comment_text');

The above code will replace the default comment form before notes with this text. You can also choose to add the comment policy below the comment form and before the submit button. To do that add this code in your theme’s functions.php file.

function wpbeginner_comment_text_after($arg) {
    $arg['comment_notes_after'] = "We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.";
    return $arg;
}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

Remember to change the URL accordingly, so it goes to your comment policy page rather than example.com

Here is how it would look:

Adding text before and after comment form in WordPress

Remove URL or Website field from Comment Form in WordPress

In an earlier article we have already shown you why and how to remove URL or Website field from comment form in WordPress using a plugin. But since we are talking about taking the WordPress comments to next level, we thought why not tell you how to remove URL or Website field from comment form in WordPress without using any plugin. Simply add this code in your theme’s functions.php or a site-specific plugin file.

function wpbeginner_remove_comment_url($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Add a Subscribe to Comments Checkbox in WordPress

When users leave comment on your website, they might want to follow up on that thread to see if someone has replied to their comment. By adding a subscribe to comments checkbox, you enable users to receive instant notifications whenever a new comment appears on the post. To add this checkbox first thing you need to do is install and activate Subscribe to Comments plugin. Upon activation, the plugin adds a checkbox with the text “Notify me of followup comments via e-mail” below the comment form.

Allow users to subscribe to comments in WordPress

Now the Subscribe to comments will notify the user of all comments on that post. If you only want to notify them for replies on their comment, then look at this plugin called: Send Email only on Reply to My Comment.

Note: You can only use one or the other. You can’t use the two combined.

Add an Email Newsletter Sign up field Below Comments

If you have an email newsletter on your site, then comment forms can provide you a good opportunity to maximize your sign ups. You can easily add a checkbox in your comment form that gives the users an option to receive email updates from your site. All you have to do is follow our guide on how to boost your email opt-ins with comment forms.

Add Quicktags in Comment Form

Quicktags are buttons that you can offer users to easily style their comments. For example a simple button to bold highlighted text is a quicktag. When you see a toolbar that has the option to bold, italicize, add headings, etc, those are all quicktags. If you want to add a quicktag in your comment form, then you are in the right place.

All you have to do is follow our article on how to add quicktags in WordPress comment forms.

Below is how it would look:

comment-form-quicktags

We hope that found our guide on how to style WordPress comment form to be helpful. There are probably other ways to improving the comment form styling. If you have suggestions or noticed that we missed something, then please let us know in the comments below.