How to Style the Comment Form on Your WordPress Website

Comment form is one of the simplest (and therefore one of the most important) ways to involve your WordPress website visitors and provide them with a feedback opportunity. Comment forms represent the way to concern your users` time and effort to take part in the life of your project. That is why you probably will need to style any default WordPress theme`s comment form into some unique shapes. It could be very small nuances but they do play the important role on how users perceive your WordPress website or blog.

Most premium WordPress themes allow an admin to customize all elements of his website within a convenient drag-n-drop editor. Today we will consider a bit more complicated but much more all-purpose way to customize your comment forms — with the help of CSS stylesheets of your WordPress theme. This experience will also help you to acknowledge the basic opportunities of WordPress website development and maybe proceed further in learning hidden traits of the WordPress platform.

Basic Preparations

The only additional tool you will need is a FTP (File Transfer Protocol) client. This tool allows you to download stylesheets you want to edit and then to upload the new version to your live WordPress website. It is strongly recommended to save the original copy of your comments.php file before editing it. Otherwise you could face some problems in appearance or performance of your website and the only way of getting things together would be the return to previous back-up version.

Simple Comment Form Styling Tricks

As long as you have downloaded the comments.php file from your WordPress website FTP, you can edit CSS classes to customize the main features of your comment forms. First of all, you should look at your comments.php file and find the following strings in it:

#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 { } 
.comment-form-cookies-consent { }
.form-allowed-tags { } 
.form-submit

If there are no such strings (which can occur in some WordPress themes), you can simply copy and paste them to your comments.php file to acquire the opportunity of further editing.

Now let us observe some examples of customization for your comment forms. One of the useful customization is the highlighting of the field a user is currently using within your comment form. This simple feature helps a user to navigate through form better. Use the following CSS to provide the used field`s highlight:

#respond { 
background: #fbfbfb;
padding:0 10px 0 10px;
}
  
/* 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,
input[type=email]:focus, 
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}

Pay attention to the attributes used in this example. You can change the active field`s background, box shadows, border colors and so on. All attributes correspond to their real names. As you can see now, simple CSS editing is not much of a deal, especially if you have some ready code at your disposal.

We can go a bit deeper with styling of the text inside the comment form`s boxes. For example, you can easily change fonts, their style (bold or italic) and letter spacing. The following code will provide you with the example of such changes:

#author, #email { 
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d; 
letter-spacing:.1em;
} 
  
#url  { 
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace; 
}

Another interesting example of comment form`s styling is the opportunity to change yours submit button. This button has lots of features: colors of background and text, fonts, gradients, hover effects and much more. You can analyze the example below to isolate the options you need and use them within your WordPress website`s comment forms:

#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
} 
  
#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a; 
}
#submit:active { 
position:relative;
top:1px;
}

Social Login Feature for Comment Forms

Social login buttons significantly reduce the bounce rate of your comment forms because they allow your users to sign in in just one click. The simplest way to add social login buttons to your WordPress website is to use the free plugin called WordPress Social Login.

After plugin installation and activation, you will need to get social networks` APIs. The plugin provides the step-by-step instructions for each social network`s API. There should be no difficulty on getting these APIs and adding them to your WordPress admin`s dashboard, to the WordPress Social Login`s directory.

Comment Policy Adding

In terms of new GDPR rules it appears to be relevant for any WordPress project to have its own privacy policy statement. It is also important to provide you users with the seamless access to this privacy policy notice. It would be very responsive to give your users the link to this policy and the statement of its agreement before living a comment.

This time you will need another essential file from your website`s FTP — functions.php. Do not forget to save the original copy of this file before adding the following code to it:

function wpadmin_comment_text_before($arg) {
    $arg['comment_notes_before'] = "

We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy.

“; return $arg; } add_filter(‘comment_form_defaults’, ‘wpadmin_comment_text_before’);

Now you can return to your comments.php file to style appearance of your privacy policy notice. You can use the following code as the template and then choose your own features for background colors, fonts sizes and styles, margins and other parameters:

p.comment-policy {
    border: 1px solid #ffd499;
    background-color: #fff4e5;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    font-size: small;
    font-style: italic;
}

Website or URL Field Removal

By default, your comment forms will have a website or URL field for users to fill in optionally. This field is frequently used by spamers to live their links secretly on your website. Therefore, it is normally better to get rid of this field at all, as it does not bring any use to your website or its normal visitors.

To remove this field from all of your comment forms you just need to add the following code to your functions.php file:

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

Subscription Checkbox inside Your Comment Form

Comment form is also a proper place to offer your users a subscription to your email newsletter. There is a special free WordPress plugin for this purpose — Subscribe To Comments Reloaded. This plugin offers a seamless adding of subscription checkbox to your comment forms and has extended options to customize the styles of this particular checkbox.

Quicktags for Your Comment Form

Quicktags allow users to format their messages within your comment forms with the simplest features like bold or italic font, blockquote or link adding. For this purpose, a special WordPress plugin has been also created. Basic Comment Quicktags is simple and free for use. It provides you with the opportunity to extend comment forms and save more website visitors as loyal members of your community.