WordPress comes with a comment form at its core. This comment form will display usually on your posts. The visitors can leave their feedback using the comment form. Giving a comment feature for visitors helps you understand what they think about your content. It will help to improve your content and work on other feedback as well.

By default, WordPress provides fields like the message, name, email, website, and checkbox(to save your details on the browser for the next time comment) on the comment form. Depending on your requirement, you may require to add or remove fields from the comment forms.

One can also want to add styling for the rendered comment form. WordPress provides a unique class for the form and comment fields. Using these classes, users can apply their own styling.

In this article, we are going to see how to add one more field to the existing comment form. As an example, I’ll take a mobile number field and add it to the form. So, to customize the comment form we are going to perform the below steps one by one.

• Add field to Comment Form
• Verify whether the field is empty or not
• Save this field as a comment meta
• Display Meta Box on Comment Edit Form(on the backend)
• Save Comment Meta(from the backend)

In addition to this, I am also going to show you how to remove the field from the WordPress comment form.

Add Field to Comment Form

The comment form is rendered from the core files of WordPress and we should not touch any core files. Fortunately, WordPress provides hooks to extend the core functionalities. Having said that, WordPress provides an action hook comment_form_after_fields using which we can add fields to the comment form.

Let’s add a mobile number using this action hook. Place the below code in the functions.php file.

add_action( 'comment_form_after_fields', 'additional_fields' );
function additional_fields() {
    echo '<p class="comment-form-mobile-number">' .
    '<label for="mobile-number">' . esc_html__( 'Mobile Number' ) . '<span class="required">*</span></label>' .
    '<input id="mobile-number" name="mobile-number" type="text" size="30" tabindex="5" /></p>';
}

Now, head over to your web page and reload it. You should see the new field ‘Mobile Number’ added to your comment form.

Verify whether the field is empty or not

This step is optional. If you don’t want to keep a mobile field compulsory then skip this step. If this field is required then we have to check whether visitors filled up this field or not. To add these checks at runtime, we will use the filter preprocess_comment. When a user hits the submit button, this filter checks if the specific field is empty or not. If it is empty then it stops the execution and shows the message to users.

Use the filter preprocess_comment as shown in the following code. This code also goes inside functions.php file.

add_filter( 'preprocess_comment', 'verify_comment_mobile_number' );
function verify_comment_mobile_number( $commentdata ) {
    if ( empty( $_POST['mobile-number'] ) ) {
        wp_die( esc_html__( 'Error: You did not add a mobile number. Please resubmit your comment with a mobile number.' ) );
    }

    return $commentdata;
}

Save New Field Against a Comment

In the previous steps, we added a new field and also saw how to make it compulsory. Now we should save this field in the database against the same comment. To achieve this, we will use the action comment_post. This action gives us the currently submitted comment id. Using the comment id, we can save our mobile field with the add_comment_meta function.

add_action( 'comment_post', 'save_comment_mobile_number' );
function save_comment_mobile_number( $comment_id ) {
    if ( ( isset( $_POST['mobile-number'] ) ) && ( ! empty( $_POST['mobile-number'] ) ) ) {
        $mobile_number = wp_filter_nohtml_kses($_POST['mobile-number']);
        add_comment_meta( $comment_id, 'mobile-number', $mobile_number );
    }
}

Here, I have used the wp_filter_nohtml_kses function to sanitize the inputted data.

Display Meta Box on Comment Edit Form(On Backend)

So far we are done with adding a new field to the frontend comment form and saving this newly added field. Now, as an administrator, you should see this field on the backend.

If you go to the comment listing on the backend, you can see each comment has its own edit form. From this form, the admin can edit the comment. Our next goal is to show the mobile number on this comment edit form.

For this, I am going to add a meta box under which we will place the mobile number. Use the code below in the functions.php which will add a meta box with a mobile number in it.

add_action( 'add_meta_boxes_comment', 'comment_add_meta_box' );
function comment_add_meta_box() {
    add_meta_box( 'title', __( 'Comment Metadata' ), 'comment_meta_box', 'comment', 'normal', 'high' );
}

function comment_meta_box( $comment ) {
    $mobile_number = get_comment_meta( $comment->comment_ID, 'mobile-number', true );
    wp_nonce_field( 'comment_update', 'comment_update_nonce', false );
    ?>
    <p>
        <label for="mobile-number"><?php esc_html_e( 'Mobile Number' ); ?></label>
        <input type="text" name="mobile-number" value="<?php echo esc_attr( $mobile_number ); ?>" class="widefat" />
    </p>
    <?php
}

Save Comment Meta(from Backend)

We are almost finished with the task. The final stuff remains is to edit the mobile number when the admin updates it. It can be easily done with the help of edit_comment action as follows.

add_action( 'edit_comment', 'comment_edit_metafields' );
function comment_edit_metafields( $comment_id ) {
    if ( ! isset( $_POST['comment_update_nonce'] ) || ! wp_verify_nonce( $_POST['comment_update_nonce'], 'comment_update' ) ) {
        return;
    }
 
    if ( ( isset( $_POST['mobile-number'] ) ) && ( ! empty( $_POST['mobile-number'] ) ) ) :
        $mobile_number = wp_filter_nohtml_kses( $_POST['mobile-number'] );
        update_comment_meta( $comment_id, 'mobile-number', $mobile_number );
    else :
        delete_comment_meta( $comment_id, 'mobile-number' );
    endif;
}

It’s all about adding a new field by customizing the comment form in WordPress. Now, let’s see how one can remove fields from the comment form.

Remove Field from Comment Form in WordPress

As we all know WordPress provides a few fields(message, name, email, website, and checkbox) in the comment form. You may want to remove any one of them. Let’s say you want to remove the website field from the form. We can do this using the filter comment_form_default_fields. You should know the key of the website field. Now the question is how to get the keys of comment form fields.

I do it by writing the fields to the dummy text file.

add_filter('comment_form_default_fields', 'remove_comment_form_fields');
function remove_comment_form_fields($fields) {
    file_put_contents('test.txt', print_r($fields, true));
}

Now if you reload the page which has a comment form, the file test.txt will be created in the root folder. In my case, this file has the following content.

Array
(
    [author] => <p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p>
    [email] => <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p>
    [url] => <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p>
    [cookies] => <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p>
)

It clearly gives you the keys of form fields. For the website field, the key is ‘url’. So, I will modify the above code as follows which will remove the website field from the comment form.

add_filter('comment_form_default_fields', 'remove_comment_form_fields');
function remove_comment_form_fields($fields) {
    if(isset($fields['url'])) {
       unset($fields['url']);
    }

    return $fields;
}

In the same method, you can also remove other fields from the comment form.

I hope you understand how to customize the comment form in WordPress. Please share your thoughts and suggestions in the comment section below.

Related Articles

• Display Posts from Specific Category on a WordPress Page
• How to Add Masonry Grid Layout in WordPress
• How to Export Posts to CSV in WordPress

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.