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
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 aplaceholder
. - 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.