Add placeholder attribute to comment form fields

You should filter 'comment_form_default_fields' to add the placeholder attribute.

Sample code

add_filter( 'comment_form_default_fields', 'wpse_62742_comment_placeholders' );

/**
 * Change default fields, add placeholder and change type attributes.
 *
 * @param  array $fields
 * @return array
 */
function wpse_62742_comment_placeholders( $fields )
{
    $fields['author'] = str_replace(
        '<input',
        '<input placeholder="'
        /* Replace 'theme_text_domain' with your theme’s text domain.
         * I use _x() here to make your translators life easier. :)
         * See http://codex.wordpress.org/Function_Reference/_x
         */
            . _x(
                'First and last name or a nick name',
                'comment form placeholder',
                'theme_text_domain'
                )
            . '"',
        $fields['author']
    );
    $fields['email'] = str_replace(
        '<input id="email" name="email" type="text"',
        /* We use a proper type attribute to make use of the browser’s
         * validation, and to get the matching keyboard on smartphones.
         */
        '<input type="email" placeholder="[email protected]"  id="email" name="email"',
        $fields['email']
    );
    $fields['url'] = str_replace(
        '<input id="url" name="url" type="text"',
        // Again: a better 'type' attribute value.
        '<input placeholder="http://example.com" id="url" name="url" type="url"',
        $fields['url']
    );

    return $fields;
}

Result

enter image description here

Some notes

  • Do not use the placeholder as a replacement for label. Screen reader users will get very angry. And it is not allowed anyway.
  • I have changed the type attribute too. This will help your visitors more than a placeholder.
  • Make sure the fields don’t look already filled out. But try to get a readable contrast. Yes, that’s not easy. You can use some CSS, but it doesn’t work in all browsers.

Leave a Comment