Best Guide To Style Wordpress Comment Form

Would you like to update the form for commenting on WordPress on your site? Comments play a prominent role in encouraging user participation on a website.

Users are inspired to participate in the discussion through a user-friendly comment form. That’s why we created the definitive guide on effortlessly designing the comment form for WordPress. Continue reading to know how to style WordPress comment form.

Before you Get Started

WordPress themes control the appearance of your website. The various files include template files, functionality files, JavaScripts, and design literature for each WordPress theme.

CSS rules for all elements utilized for your WordPress theme are presented in stylesheets. To override the rules of your theme, you can apply your custom CSS.

If you haven’t done this before, check out our tutorial on adding custom CSS for beginners in WordPress.

In addition to CSS, you may need to add functions to change your WordPress comments form’s default appearance. Please see our post on copying and pasting code into WordPress if you didn’t do it before.

Customizing WordPress Comment Form Using a Plugin

First, let’s look at how we can customize WordPress form utilizing a plugin. I’ve found a big small plugin, Advanced Comment Form, to do this.

It’s adaptable and user-friendly. For example, it allows you to customize a WordPress form from the backend of your site without worrying about adding any code as it has a wordpress custom comments template inbuilt.

Here are some of the things you can do:

  • Remove Fields of Form
  • Fields for changing form
  • Modify Styles of Text Switch
  • Please use shortcode

Installing and Activating the Plugin

First of all, the advanced comment form plugin should be installed and activated on your website.

Image Showing Installing Advanced Comment Form Plugin

Only click Comments > Comments form once this plugin is installed and activated in the WordPress admin area of your website. This brings you to the main plugin settings page.

Here we will personalize a comment form for WordPress.

Image Showing Go To Comment Form In Wp Dashboard

You can start to make the changes you want on the main page of the Advanced Comment Form Plugin and begin to customize it.

The first part is “Fields.” You can delete URL fields and delete email fields if you select them in the “Fields” section. Selections are pretty thorough. When clicked on the corresponding checkboxes, they share precisely what is about to happen.

Image Showing Fields Section In The Plugin

You will notice the second part called “Texts.” You can add or delete material in this section from the comment form for WordPress. “text before form” and texts after form” are included in the text fields.

Don’t worry that the plugin will use customized HTML tags and properties. Instead, it will just spice the form up and provide you with even more personalization choices.

Image Showing Text Section In The Plugin

You can see the third and last part entitled “Layouts.” This portion is quite simple. When you click the checkbox, you’ll see a layout style with two columns. It depends on your preference.

Image Showing Layout Section In The Plugin

Now that you have made all the modifications and adaptations you want, please do not forget to click the “Save” button to ensure that your WordPress comment form changes are implemented.

Customizing Style WordPress Comment Form Using Codes

This applies to highly developed users. You can use a few blocks of code to customize if you do not want the above plugin to customize the comment form.

I won’t be too advanced in this, but I’ll show you how to use some code to execute the above plugin functions because the code you put in depends on what you wish to customize.

Some of the codes are mentioned below, which many websites use for comment form customization.

Style WordPress Comment Form With Some Text.

Sometimes, things can get heated or out of hand in a comment debate. For this reason, it can be a good idea to add some comments form policy text.

Add your theme functions.php file with the following code:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ] function yoursitename_comment_text_before ($arg) {

$arg[‘comment_notes_before’] = “

We're happy that you chose to leave a remark. Please note that our comment policies moderate comments.

”;

return $arg;

}

add_filter(‘comment_form_defaults’, ‘yoursitename_comment_text_before’);[/ht_message]

Move text field to the bottom Comment Form

A WordPress comment form will first of all display the comment text area, as you may have noticed. In some circumstances, you may wish to do this, first insert the field, then name, email, etc.

Add the following code to the functions.php file of your topic to do that:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]function examplename_move_comment_field_to_bottom( $fields ) {

$comment_field = $fields[‘comment’];

unset( $fields[‘comment’] );

$fields[‘comment’] = $comment_field;

return $fields;

}

add_filter( ‘comment_form_fields’, ‘examplename_move_comment_field_to_bottom'[/ht_message]

Delete Website URL Field from Comment Form WordPress

Spam was a long-lasting problem with WordPress forms of comment. However, spam can be dealt with in many different ways. Deleting a comment’s Website URL won’t prohibit spam, but it will help solve the problem of a link to the wrong author.

You may modify the form by removing the URL box using the following code in the functions.php section of your theme:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]function yoursitename_remove_comment_url($arg) {

$arg[‘url’] = ”;

return $arg;

}

add_filter(‘comment_form_default_fields’, ‘yoursitename_remove_comment_url’);[/ht_message]

How to Change Comment Form Style in WordPress

There is a template named Comment.php within most WordPress themes. This file displays your blog entries with comments and comments form. The comment form for WordPress is created using the <?php comment form();?> feature.

This function will produce your comment form by default with 3 text fields (name, email, website), a comment text field, a GDPR compliance checkbox, and submit button.

You can easily alter each field by just altering the default CSS classes. Below is a list of standard CSS classes added to the comment forms by WordPress.

#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

You may change the style and sensation of your WordPress comment form by just tweaking these CSS classes. So let’s get on with trying to tweak a couple of things, so you get a decent understanding of how it works.

First, it will highlight the active form field. The highlighting of the current field makes your form more accessible and makes your comment form more comfortable for persons with special needs on smaller devices.

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

}

This is how our form looked like following the adjustments in the WordPress 2016 theme:

Image Showing Classic Comment Form

You can adjust the text in the input boxes using these classes. We will continue to update the author’s text style and the URL boxes.

If you look closely at the following image, the name and the email field font are different from the URL on the website.

Example Image Of Modified Text In Comment Form

You can also change a WordPress comment form by just submitting it. Let’s give CSS3 gradient, and box-shadow rather than the default submit button.

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

}

Image Showing Example Comment Form

How to Take the WordPress Comment Form to the Next Level

Maybe you thought it was too fundamental. But, we must start right there so that everyone can keep up with it.

Users can change form fields, add social connections, subscribe to comments, comment guides, fast-tags, and more to the next level by using your Style WordPress comment form.

Adding Social login to WordPress Comments

Let’s begin with adding WordPress comment social logins. First, the WordPress social login plugin must be installed and activated. Next, you must visit WP Social Login page Settings » before activating plugin configuration.

To connect to social media, the plugin needs API keys. You will see links to how you may obtain this information on each platform.

Click the Save Settings button to save your changes after entering your API keys. Now you may access the social login links on your website above your comment form.

Add Comment Policy Text – Before or After Comment Form

We love all of our people and are pleased to comment on our website for a few minutes. However, it is vital to regulate comments to establish a healthy environment for conversation.

We have built a policy comment page for complete openness, but you cannot place this link at the bottom.

We wanted our comment policy prominently and visibly for all users who leave a remark. That’s why we decided to include the policy comment in our comment form for WordPress.

If you wish to add a policy comment page, you must first construct a WordPress page and define your policy on commenting (you can steal ours and modify it to meet your needs).

Then, in your theme function.php file or a site-specific plugin, you can include the following code.

function wpbeginner_comment_text_before($arg) {

$arg['comment_notes_before'] = "<p class='comment-policy'>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>.</p>";

return $arg;

}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

The code as mentioned above replaces this content for the default comment form. Also, in the code, we have introduced a CSS class to emphasize the message via CSS. The CSS example we used here is:

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;

Use the following code if you wish to display the link after the text section of the comment.

function wpbeginner_comment_text_after($arg) {

$arg['comment_notes_after'] = "<p class='comment-policy'>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>.</p>";

return $arg;

}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_after')

Don’t forget to modify the URL correctly, so go to your policy comment page instead of example.com.

Moving Comment Text Field to Bottom

By default, the comment form displays first and then name, email, and website fields in the Comment text box. WordPress 4.4 introduced this amendment.

Before this, WordPress websites showed first, and then the comment box text box, names, email, and site areas. We believed that the comment form was used by our users, so that we still utilize the old field order on WPBeginner.

You only need to add the following code to the functions.php files of your subject or a site-specific plugin if you want to do so.

function wpb_move_comment_field_to_bottom( $fields ) {

$comment_field = $fields['comment'];

unset( $fields['comment'] );

$fields['comment'] = $comment_field;

return $fields;

}

add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom');

This code moves the text area comment field to the bottom.

Removing Website URL Field From WordPress Comment Form

There are many spammers on the website box in the comment form. You will undoubtedly save yourself from the unintentional acceptance of a Comment with the wrong author’s website link during removal.

It also reduces fields from the comment form and makes it easier and easier to use. For example, see our article about deleting a WordPress comment form from the website url area.

Add the following code to your functions.php file or a plugin unique to your site to remove the URL field from the comment form.

function wpbeginner_remove_comment_url($arg) {

$arg['url'] = '';

return $arg;

}

add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Adding a Subscribe to Comments Checkbox in WordPress

You might want to follow up on that thread if you leave any comment on your website to see whether anybody has responded to your comment. When a new comment emerges on the mail, you can get users to receive fast notifications by adding a subscription to the comments checkbox.

To add this checkbox, install and activate Comments Reloaded Plug-in Subscribe first. Then, you have to visit Settings » Subscribe to Comments to set the plugin settings when you are activated.

Adding Quicktags in Comment Form

Quicktags are buttons to a format that allows users to make their comments easy. These include bold, italic, link, or block quotes. This includes the buttons. The Basic Comment Quicktags plugin must be installed and activated to add fast tags.

Changing the Font of Comments Form

You can modify how texts appear in the input boxes using CSS classes. For example, the typeface, email address, and URL are changed in the code below. Just add your style code to the code file of CSS:

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

}

Changing the Submit Comment Button

Use the following code in your style to change the appearance of the comment button in the WordPress File of CSS:

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

}

Use the code listed below in the functions.php file or add it to the plugin to change the name of the submit comment button for the style WordPress comment form to customize:

$commenter = wp_get_current_commenter();

$req = get_option( 'require_name_email' );

$aria_req = ( $req ? " aria-required='true'" : '' );

$fields = array(

'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .

'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',

'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .

'<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',

);

$comments_args = array(

'fields' => $fields,

'label_submit' => 'Send My Comment'

);

comment_form($comments_args);

Adding a Field to the Comments Form

You can add new fields to the WordPress comment form by using the comment form’s default fields filter.

When you want to personalize your comments from the plugins, it becomes helpful to use filters without editing the theme files manually.

For instance, we’ll include the age in the WordPress comment form with the following code:

function add_comment_fields($fields) {

$fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .

'<input id="age" name="age" type="text" size="30" /></p>';

return $fields;

}

add_filter('comment_form_default_fields','add_comment_fields');

Adding reCAPTCHA to Comment Form

ReCAPTCHA enhances your website security and prevents publishing spammers’ comments on your website.

The Invisible reCAPTCHA plugin is one of the top reCAPTCHA plugins for WordPress plugins.

ReCAPTCHA is a Google-supported tool that is designed to split bots from individuals. However, only a person may answer his security questions, and You cannot bypass the reCAPTCHA safety layers.

The Invisible reCAPTCHA plugin is, as you may know, an invisible plugin. It tracks your mouse and IP address to detect whether you are human or bot.

This plugin filters the form of comments and prevents spammers. The Invisible reCAPTCHA plugin is one of the essential features.

The WordPress dashboard can go to Plugins and Add News to add reCAPTCHA to the comment form. Specify and activate the Invisible reCAPTCHA in the search box. Follow the following steps to configure Invisible reCAPTCHA

Google supports this service. So, in Google reCAPTCHA, you must create an account:

  • Open the https://www.google.com/recaptcha/admin/creates this link
  • Enter the information you need to connect your account with ReCAPTCHA.
  • Click on Submit to register.
  • You will receive a site key and a secret key when the registration procedure has ended. Copy these into a notebook. Make sure to. To activate the plugin, you will need these keys.
  • We need to turn on the functionality we want in the next stage. Go to the dashboard of WordPress and then reCAPTCHA Invisible settings.

The settings have a few tabs. First, you must check “Allow Comments from Protection,” to enable reCAPTCHA in the comment area. Then, save the amendments, finally.

Changing the Title of Your Comment Section

To alter the title above the form for comment on WordPress, add the following code to functions.php or the plugin to customize the comment form on WordPress:

$commenter = wp_get_current_commenter();

$req = get_option( 'require_name_email' );

$aria_req = ( $req ? " aria-required='true'" : '' );

$fields = array(

'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .

'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',

'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .

'<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',

);

$comments_args = array(

'fields' => $fields,

'title_reply'=>'Please give us your valuable comment',

);

comment_form($comments_args);

Customizing Comments for a Specific Post Type

You may want to insert or delete fields of a specific post type from the WordPress comment form. For example, the Age field of the Post Films type can be seen in the code below:

function add_comment_fields($fields) {

if( is_singular( 'Movies' ) ) {

$fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .

'<input id="age" name="age" type="text" size="30" /></p>';

}

return $fields;

}add_filter('comment_form_default_fields','add_comment_fields');

Lazy Load for Comments

The Lazy Load for Comments does not provide your site with any new functionality, but it does optimize your site. The user is satisfied and happy if a site loads quickly.

The Lazy Load plugin for Comments decreases your comments’ loading time.

Therefore, when users scroll down the page or post, the comment part will be loaded. The comment area is also shown at the bottom of the page.

Also Read: Our latest article on How to create an online order form in WordPress.

Conclusion

Any website’s comment area is highly significant. In other words, you can use the comment section to grow your community.

Even if the default style WordPress comment form isn’t particularly appealing, this platform is quite adaptable, and you can customize every area of it, including the comment section.

As a result, you can personalize the WP comment form to match the look of your website. We hope this article has helped you learn how to design WordPress comments CSS for your users.

Load More Related Articles
Load More By Susana Taylor
Load More In WordPress Themes

Leave a Reply

Your email address will not be published. Required fields are marked *