Comments play a crucial role in building a community on the internet. Comments provide a platform for interaction for your readers where they can share their thoughts which very often keeps them coming back.

There are several ways to encourage users to leave a comment on your blog. One of those ways is to create a beautiful, usable, and accessible comment form.

In this tutorial, we will show you how to style the default WordPress comments form, we will also show you how to add comments functionality via social media IDs and how to create comment subscribe functionality and much more. more.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

How to change the style of comments WordPress

When we talk about style, we mean the CSS side of the thing. Below, I will show you how to customize the look of the comments form in WordPress. Each element by default on WordPress has a CSS code, this is the case of the list of comments, navigation menus, the comments form, the widgets and more.

Among the files of WordPress themes, we have a file named comments.php which is used to display comments and comment form on blog posts and pages. To display the WordPress comments form, the " comment_form () " is used.

Discover How to find the link to the WordPress login page

By default, this function generates your comment form with three text fields (name, email and website), a large text box, for the comment content and the submit button.

You can easily modify each of these elements just by manipulating the default CSS classes and identifiers. Here is a list of the default CSS classes that WordPress adds on each comment form.

#comment {# #} {# # #} # comment # reply-link {} #comment # .comment-form-author {} .comment-form-email {} .comment-form-url {

By simply adjusting these CSS classes, you can completely change the appearance of the comments form. Let's try to change something to give you an idea of ​​what we can do.

Discover How to replace image links after installing SSL on WordPress

First, we'll start by highlighting the active field of the form. By highlighting the active fields, users can easily see what they are changing and it gives a little dynamic side to your website.

#respond {background: #ececec; Padding: 0 5px 0 5px; } / * Highlight the active text field * / # match 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; } # Input 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); }

Here's what your comment form will look like with Twenty Twelve.

highlight-active-form-field

With the use of these classes, you can change the way text appears inside fields. This is what we will do in the following example.

#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", minivan; } 

Here is the result that the previous code will produce.

how-form-input-style

You can also change the style of the comment form button. In the following example, we will give it a gradient background.

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

Here is the result that will be displayed.

how-submit-button

How to add social interaction in comments

Let's start with adding social logins to the WordPress comments form. The first thing you need to do is install and activate the plugin Social Login

Discover How to install a plugin in WordPress To activate this plugin you must create a free account by going to the following address: https://app.oneall.com

Once that's done, you won't have to configure an API for every network you want to use to let your users connect through them.

Although the APIs of different social networks are constantly changing, you won't have to do anything, the developers of this plugin will update their APIs for you. All you need to do is log into the OneAll API.

This is how your forms will display.

how to customize wordpress 2 feedback formhow to customize wordpress feedback form 

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. WP Instant Search & Auto Suggest

The "WP Instant Search & Auto Suggest" plugin allows you to instantly get suggestions for articles, pages and custom post types when searching your WordPress blog. It works with WPBakery et Cornerstone. wp-instant-search-wordpress-plugin-for-search

Its features include: the rsearch in full screen mode, the rInstantaneous search for custom types of publications, compatibility with Visual Composer, Tthree integrated design styles, 5 color schemes to choose from, the pkeyboard and mouse support, efully customizable via parameters etc ...

Download | Demo | Web hosting

2. 404 Error Page Redirect to Homepage or Custom Page

Here is one of the best ways to easily add a 404 error page that will redirect the visitor to the homepage or custom page, after enabling this WordPress Plugin.404 Error Page Redirect to Homepage or Custom Page

All 404 error pages will be redirected to the homepage or a custom URL. By using this WordPress Plugin, you will allow Google to reduce the pagerank of your website if it has many 404 error pages.

Ce WordPress Plugin does not just do redirection but it can also be a suitable solution to improve the ranking of your website in search engine results.

Download | Demo | Web hosting

3. Related Posts 

Related Posts Pro provides a simple yet powerful solution for all kind of similar content on WordPress. It supports custom post types, multisite, categories, mixed content, custom content, and more ...Related Post Pro

As features it offers among others: 3 different types of layouts, 65 predefined templates for each layout, ano coding will be necessary, the support of tbrowsing and Autoplay, compatibility with the custom post types used by plugins WooCommerce, WP eCommerce, bbPress etc ..., a search bar with filter, a dvery descriptive documentation and much more.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's it for this tutorial. We hope this article has helped you make your feedback forms more engaging. Do not hesitate to also offer us your tips on customizing WordPress, and especially share this article with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments.

...