Add Placeholder to Your Comment Form in WordPress

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Last Updated: July 2, 2020 | Reading Time: < 1 minute

By default, WordPress doesn’t support placeholder in their function form. To add this function simply add this code to your functions.php.

Here’s the code to alter the default comment form Name, Email, and Website:

/**
 * Comment Form Placeholder Author, Email, URL
 */
 function placeholder_author_email_url_form_fields($fields) {
    $replace_author = __('Your Name', 'yourdomain');
    $replace_email = __('Your Email', 'yourdomain');
    $replace_url = __('Your Website', 'yourdomain');
    
    $fields['author'] = '<p class="comment-form-author">' . '<label for="author">' . __( 'Name', 'yourdomain' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
                    '<input id="author" name="author" type="text" placeholder="'.$replace_author.'" value="' . esc_attr( $commenter['comment_author'] ) . '" size="20"' . $aria_req . ' /></p>';
                    
    $fields['email'] = '<p class="comment-form-email"><label for="email">' . __( 'Email', 'yourdomain' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="email" name="email" type="text" placeholder="'.$replace_email.'" value="' . esc_attr(  $commenter['comment_author_email'] ) .
    '" size="30"' . $aria_req . ' /></p>';
    
    $fields['url'] = '<p class="comment-form-url"><label for="url">' . __( 'Website', 'yourdomain' ) . '</label>' .
    '<input id="url" name="url" type="text" placeholder="'.$replace_url.'" value="' . esc_attr( $commenter['comment_author_url'] ) .
    '" size="30" /></p>';
    
    return $fields;
}
add_filter('comment_form_default_fields','placeholder_author_email_url_form_fields');

And now the Comment part:

/**
 * Comment Form Placeholder Comment Field
 */
 function placeholder_comment_form_field($fields) {
    $replace_comment = __('Your Comment', 'yourdomain');
     
    $fields['comment_field'] = '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) .
    '</label><textarea id="comment" name="comment" cols="45" rows="8" placeholder="'.$replace_comment.'" aria-required="true"></textarea></p>';
    
    return $fields;
 }
add_filter( 'comment_form_defaults', 'placeholder_comment_form_field' );

Here’s the final result:

comment-form-alter

6 Responses

  1. Hello and thank you for the interesting blog.

    I have two questions please. First: in my website, I have the comment field displayed before both the author and the email fields. Do I need to invert the codes in php and place the “function placeholder_comment_form_field” before the “function placeholder_author_email_url_form_fields”?

    Second question: I removed the “URL” field, from my comment form. Shall I just remove the following codes from your PHP “$replace_url” and “$fields[‘url’]” inside the “function placeholder_author_email_url_form_fields”?

    Many thanks.

    Luca

    1. Hi Luca, sorry for the late reply:
      #1 You can place the codes randomly, actually.
      #2 You can either remove or keep it.

  2. Textarea (comment field) replacement is incorrect, because it is remove stars of rating from woocommerce product pages at “add review” area

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.