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

How to Style WordPress Comment Form

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
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-notes { } 
.required { }
.comment-form-author { }
.comment-form-email { } 
.comment-form-url { }
.comment-form-comment { } 
.form-allowed-tags { } 

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;

#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=''>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=''>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 :)

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:


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 experts 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 »


  1. SiRetu says:

    Is there any complete tutorial? I mean start from scratch including creating comments.php file from the first time. Thanks, great tutorial as always

  2. Luis Izquierdo says:

    I am customizing my wp themes child theme and I was able to place the policy text above the comment form. But it only shows to logged out users. How do I get it to show to Logged in users?

  3. Luca Morelli says:

    Hello great tutorial: thanks!

    I keep improving my knowledge about WordPress thanks to your lessons. I have a question (I don’t know much about php): I managed to add the comment policy text before the submit button, but I noticed that if I click “reply” and see your codes, the php output is inside the paragraph tag together with a class named “commentpolicy”. How did you achieve that (e.g. how to style the php output on an HTML webpage with a tag and a class, which can then be styled with CSS)?

    Hopefully I explained it correctly and my question makes sense.

    Again many thanks for all your tutorials.


    • WPBeginner Support says:

      We are not sure what you are trying to ask. Can you please explain bit more? Thanks.

      • Jayanta says:

        I have the same question. Trying to clarify a bit.
        I have added your snippet to get the comment policy text before comment field. But This is only some text, no special div class is added for that text. So, I am not able to style it using css (I would like to make the text smaller, or may be put a border-box to it). Please guide us. Hope it makes sense now. Thank you so much.

  4. Erick says:

    How do you make comments look like this website?

  5. gift charles says:

    Thank you very much for this,i was looking for a long time for a way to make the built in comments look better because i prefer them to other services like facebook comments or disqus

  6. Adnan Bashir says:

    As you have noticed, the newest version of WP (4.4) is displaying Name and Email form below Text box, do you have any idea how to revert it to old style (Name and Email box above the Text box) ?

  7. mario says:

    Hello, great tutorial !
    But I’d like to know one more thing: is it possible to add a checkbox for the privacy policy? Since wordpress system collect the ip, I want my users to check teh box before sending the message. Any suggestion ? Thank you !

  8. Ramon says:

    I would like to have the input comments fields above the comments them self so my customers can leave a comment without the need to scroll all the way down the page.

    Is there an easy way to accomplish this?

    Thank you.

  9. dragons says:

    Is there any way to ad an EDIT button for the commenters? So they can fix typos and such? Also what if the site wants to allow commenters the ability to upload images in the comments? Is there a way to do that?

  10. Rick Hellewell says:

    Good tutorial. Used it to develop my own customized contact form
    plugin, where I re-define the $args for the comment form fields.

    But it turns out, while testing, that some themes create their own
    ‘textarea’ field, which adds to my ‘textarea’ field, resulting in two
    comment text fields. Not good.

    I have set my add_filter( ‘comment_form_default_fields’…. with a
    higher priority (99) so that it happens later in the ‘page build’ (after
    the theme does it’s comment_form_default_fields), but the duplicates
    comment text boxes are still there. Also tried a priority of 8, and that
    didn’t do it either.

    So, can you think of a generic (works for any theme) that can
    determine if the comment field has already been defined? And, if the
    duplicate is found, remove the one in the theme, so I can replace it
    with mine?

    I understand that the problem is caused by bad coding practices on the theme, but would like to find a workaround.


  11. Larisa Frolova says:

    Thank you!

    I’ve searched the forums and Google for this, but I’m still a little confused as to what to do. If I just want to change the LOCATION of the comment/reply link that appears on posts, how do I do that? It’s not that I want to make it invisible, or change the wording – I just want it to be at the bottom of a post, not at the top.

    How do I go about doing that for the Twenty-Twelve theme?

  12. Mikael says:

    I like this layout!

  13. lflier says:

    Very helpful!

    I’m really liking the Disqus comment system you’re now using. It’s slick and very inviting. I find myself leaving more comments on sites using Disqus.

    But I’m discouraged from using it on my own site by the lack of integration with BuddyPress activity stream. So the more I can do to streamline the native WordPress comment system and make it as inviting as Disqus, the better. Thanks again for your tutorial.

  14. Therese says:

    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. :)

    • WPBeginner Support says:

      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;
  15. JG says:

    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.

  16. Jewel says:

    Thank you a lot…

  17. Ann says:

    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.

    • WPBeginner Support says:

      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.

  18. Jonathan says:

    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?

    • WPBeginner Support says:

      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.

  19. Jeff Hilron says:

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

  20. Ravinder says:

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

  21. mohib says:

    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 ?

  22. Mike Lee says:

    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.


    • Editorial Staff says:

      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 says:

        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!

        • Editorial Staff says:

          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.

  23. Robo Ek says:

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

  24. Adrian Robertson says:

    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!

  25. Mattia says:

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

    • Mattia says:

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

      • Editorial Staff says:

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

  26. Sue Kearney says:

    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:

    Thanks again!

  27. Ernice Gilbert says:

    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?


    • Editorial Staff says:

      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.

  28. Rifat Bin Sharif says:

    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?

  29. Colin Crawford says:

    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.


  30. Gaelyn says:

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

  31. Umer Rock says:

    I just want to add a Image just right on Comment Box, How i can, for example this is a screenshot of comment box :

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.