Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Style WordPress Comment Form

Last updated on by
Follow WPBeginner on YouTube
How to Style WordPress Comment Form

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)
}

Changing the style of comment form submit button in WordPress

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.

Adding social login buttons in WordPress Comment form

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.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • Therese

    Thank you so much for all this! It’s really helping me get more familiar with WordPress!
    I’ve got the social media logins, I’ve got the border sorted, but now I am totally stuck in trying to find *where* to edit the font for the comment box’s individual boxes.

    I can’t figure it out. :(

    Can you please tell me where exactly to find that? You don’t specify this clearly enough in the tutorial. :)

    • http://www.wpbeginner.com/ WPBeginner Support

      Please see how we changed fonts for #author and #url input fields in the article. To change font in the comment box you can use something like this:

      #comment { 
      font-family: arial, verdana, sans-serif; 
      font-size: 16px;
      } 
      
  • JG

    how do I add a required checkbox people have to tick before the form gets submitted? I have tried adding the field in via adding a field under add_filter(‘comment_form_default_fields,) while the field shows the form can still be submitted without ticking the box.

  • Jewel

    Thank you a lot…

    • Bhushan

      I’m trying

  • Ann

    I read through your tutorial… and was wondering if it can be applied to a WordPress site that has a Genesis Framework and Child theme. I am using the Epic Child theme by the way. Thanks for your help.

    • http://www.wpbeginner.com/ WPBeginner Support

      Yes some parts of the tutorial can be directly applied to your child theme. For CSS styling you need to over ride your childtheme’s CSS.

  • Jonathan

    Any idea how to place those checkboxes for Subcribe to Comments and other plugins so that they appear above the Submit button? Is there a way define where wordpress would normally include those items?

    • http://www.wpbeginner.com/ WPBeginner Support

      if you are using Subscribe to comments plugin then you can place <?php show_subscription_checkbox(); ?> in your templates where you want the subscription checkbox to appear.

  • Jeff Hilron

    Im trying to figure out how to get the round avatars.

  • Ravinder

    Nice Tutorial. the information you have provided here is very good. I was searching for it from a while. Thanks for sharing.

  • mohib

    This is a wonderfull tuturial, “Click here to cancel repley” i want ot chage this name, but not found any way, would you pls help me ?

  • Mike Lee

    Hi, your tutorial is so wonderful and i would like to ask how to make the comment form appear under the specific comment when clicking the ‘Reply’ word of that coment.

    Thanks

    • http://www.wpbeginner.com Editorial Staff

      This happens by default in the WordPress theme when you allow threaded comments. WordPress loads comment-reply.min.js. If your theme is not loading that, then you need to load it.

      • Jae

        I have the Elegant Tonight theme on my WordPress, and I have my dashboard-settings-discussion set to: Enable threaded (nested) comments 3 levels deep. So, I should be seeing threaded comments, but I am not. WordPress doesn’t seem to be loading comment-reply.min.js. Where in my comments.php theme do I add this? And do I add exactly that, or in some other coding format? Thank you for any advice!

        • http://www.wpbeginner.com Editorial Staff

          Hey Jae,

          Elegant themes staff is better equipped to answer that question because we are not very familiar with that theme. When you pay for Elegant Themes, you also get access to their support.

  • Robo Ek

    Helpful article once again from you. Maybe you should change your name. Even professionals would find your tutorial useful

  • Adrian Robertson

    Another nice tutorial from you guys, time and time again when I can’t remember how to do something I end up on your site.

    Great work!

  • Mattia

    Hi guys thanks a lot. Just a question: which is the difference between and . With this last one, your adivecs don’t work! ;)

    • Mattia

      sorry the output deleted my question: difference between “comment_form” and “comment_template”… ;)

      • http://www.wpbeginner.com Editorial Staff

        No problem. So comments_template is a function that loads the template used to display comments. It loads the comments.php file by default however you can use another file if you have a customized version. The comments.php file usually contains the code to load all the comments, and it also contains the function comment_form. The commnent_form function outputs the actual comment form (name, email, website, message, submit button, etc).

        Hope that helped clear things up :)

        • Mattia

          It did. Thanks ;)

  • Sue Kearney

    I’m loving all of this juicy input, some of which I’ve shamelessly lifted from what you do. I’m about halfway done. Check it out here: http://goo.gl/8r9uO

    Thanks again!

  • Ernice Gilbert

    Hello, how do I add a reply button in the comments box just like yours to my wordpress site? It is a plugin or tweaking of code?

    Thanks.

    • http://www.wpbeginner.com Editorial Staff

      Hey Ernice,

      It is not a plugin. We are using the same technique showed in this article. Instead of using background color, we are using the background image property of CSS.

  • Rifat Bin Sharif

    In my wordpress theme, I just noticed that in comment area there is a word ”says’ but I couldn’t find it in comments.php file. How to remove this text?
    Thanks

  • Colin Crawford

    Hi Nice article and I have used some of your suggestions but I found a code error that needs fixing under ‘Adding Comment Policy Text Before or After Comment Form’.

    You have placed the add filter within the function or otherwise it won’t get executed, it needs to be moved outside of the function.

    Colin

    • http://www.wpbeginner.com Editorial Staff

      Fixed it :)

  • Gaelyn

    All wonderful suggestions. Now, how do you change the word “responses” to “comment” and make it more prominent. On Suffusion theme. Thanks.

    • http://www.wpbeginner.com Editorial Staff

      Edit your comment.php file in the theme to make the change.

  • Umer Rock

    I just want to add a Image just right on Comment Box, How i can, for example this is a screenshot of comment box : http://oi48.tinypic.com/2itrket.jpg

    • http://www.wpbeginner.com Editorial Staff

      You could probably use the filters shown in the article and CSS to make it look like that.

      • Umer Rock

        Ok. Thank you, let me consider again on article. well i am not expert with CSS.