A comment form is a great tool – it allows your readers to interact with your authors and vice versa. Engagement is significant for any website; such a direct line of communication should be fostered with care.

In this short article, we’ll look at some of the options we have for bending the comment form to our will.

The Comment Form Function

WordPress has a single function for outputting the contact form: comment_form(). It accepts a (rather lengthy) array as its first argument, which allows you to specify everything from the labels to the notice below the comment box.

It is most commonly called from the comments.php template file. In Twenty Fourteen and other default WordPress themes, this is the favored approach, and I suggest you do the same.

comments.php itself is usually called from the single post template, single.php. It is called via the comments_template() function, take a look at the default themes to follow along.

Customizing The Form

There are three basic things we can do to customize our comment form. We can add our styling, we can modify the arguments passed to the generating function to alter its behavior or we can use plugins. We’ll mainly be focusing on the first two here.

Styling The Form

There are two approaches you can take. If you’re building a theme from scratch, you can add the necessary CSS to your existing stylesheet. If you would like to modify a current theme, you should create a child theme.

Of course, how you style your comment form is up to you. However, since forms are generated using the same function, their HTML output is roughly the same. Using the arguments we will discuss shortly, you may add and remove elements, but other than that, the classes and IDs are usually the same. Here’s how the HTML for the default comment form in Twenty Fourteen looks:

Customizing The Form Function

The comment_form() function takes two parameters. The first is an array to customize it, and the second is an optional post ID. This can be used to output a comment form for an arbitrary post:

Let’s dig deeper and take a look at all the parameters we can use to modify the behavior of our form:

Element IDs

Two parameters allow us to overwrite the default ID for the form and the submit button. id_form controls the ID for the form itself while id_submit determining the ID for the “submit” button.

Labels & Titles

Four functions allow us to control some of the labels and titles in the form. title_reply controls the title at the top of the form when writing a top-level comment. title_reply_to controls the title of the comment comment form when writing a reply to another comment.

You can control the text of the cancel reply link using cancel_reply_link , and you can modify the text in the submit button using the label_submit parameter.

Notes & Text

There are four larger blocks of text available in the contact form. comment_notes_before and comment_notes_after controls the text seen before and after the comment form. Many people prefer to hide the notice about the usable HTML elements and just set comment_notes_after it to an empty string.

The text in the login notification can be controlled using the must_log_in and logged_in_as parameters. The former is used when a user comments without logging in, and the latter is displayed for logged-in users.

Field Customization

Fields can be customized by specifying their full HTML. Oddly enough, the author, email, and URL fields can be customized by using the fields parameter while the comment field has its own parameter: comment_field. Take a look at the example below, which shows the default code for each field.

Using Plugins

There are several plugins which modify comments. Some add functionality like AJAX to prevent page reloading, add styling, and replace the default comment form with a third-party solution like Disqus or Facebook comments.

Take a look at the comments related to plugins available in the repository. There are plenty to choose from, as you’ll see.

Overview

Hopefully, you have a better picture of the possibilities the comment_form() function offers. While this is not a perfect implementation from WordPress by any measure, it is flexible enough to allow for many modifications.

If you have any great tips on handling comment forms, or perhaps you’ve written your comment form, let us know in the comments below.

Image credit: Sergey Zolkin, icons made by Yannick from www.flaticon.com is licensed by CC BY 3.0

Have you used a comment form on your website? What do you think of them? Let us know in the comments!

Tags: