Skip to Main Content

How to customize the form of comments on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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 WordPress theme files, we have a file that is 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.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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 look and optimize the grip 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 an 404 error page that will redirect the visitor to the home page or custom page, after activating this WordPress plugin.404 Error Page Redirect to Homepage or Custom Page

All 404 error pages will be redirected to the home page or to 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.

This WordPress plugin does not just redirect but it can also be a suitable solution to improve the ranking of your website in the results of search engines.

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

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

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.

...

This article features 5 comments

  1. Thank you for this tutorial, but how to modify the initial translation
    For example Submit a Comment is translated by Post the comment
    I would like to change in Post a comment
    I have nowhere found a .po where this text is found which appears in the comments.php file

    Thanks for your help

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
1 shares
Share1
tweet
Save