Add a new style to your WordPress Comment Form

Apply additional Style in WordPress Comment Form

In this trick, You get many name of classes where you can add additional style/CSS to override default styling of Comment form. WordPress allows you to add CSS to get new look of Comment section in 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.

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

Ashutosh Pratap

I am software developer by profession and doing work and research in field of Computer programmings like PHP, WordPress, Magento, jQuery, Google APIs and many more web languages. Apart from this I write blogs on programming languages like PHP, Javascript, WordPress etc. I am also individual and independent Freelancer so you can hire me for your web work.

iamashutosh.com/