WP SITES

Log in

Customize Comment Form Place Holder Input Text Fields & Labels

—

by

Brad Dalton

In this tutorial, i’ll give you the PHP code which enables you to add Place Holder Text within your comment forms input fields.

I’ll also provide some sample CSS code which you can use to modify the styling of both your placeholder text and field names.

This code works with any theme including Genesis which no longer uses the genesis_comment_form filters.

Here’s the default form without any modifications:

default comment form

And here’s an example of how you can customize your form fields using the comment_form_default_fields filter WordPress provides in the core files.

comment form input

Here’s the code you can copy from the view raw link and paste at the end of your child themes functions.php file.

Register for full access

Other Options

Comments

11 responses to “Customize Comment Form Place Holder Input Text Fields & Labels”

  1. Vadim Avatar
    Vadim

    Brad,

    Thanks for the tutorial! There’s a problem with clearing the placeholder in Chrome, so this may worth adding to the post: http://stackoverflow.com/a/18268521

    Vadim

    1. Brad Dalton Avatar
      Brad Dalton

      Thanks Vadim

      1. Vadim Avatar
        Vadim

        Hi Brad,

        Just to finish it off 🙂 Old browsers can’t handle the HTML5 ‘placeholder’ attribute, and while IE8 is out of MSFT support in 3 months, IE9 will be supported for a while.

        Not only comment fields are affected, actually. Since Genesis (at least, my eleven40 Pro) doesn’t mark the search field otherwise (e.g. with a button), what you get is an empty rectangle. Most people won’t figure it out (at least one of my readers didn’t on the first day :).

        Ok here’s the fix http://stackoverflow.com/questions/15020826/how-to-support-placeholder-tag-in-ie8-and-9 🙂

        1. Brad Dalton Avatar
          Brad Dalton

          Thanks for the heads up on this but old browsers are a security risk and most people will be using one of the latest versions.

          Who would be using older versions?

          1. Vadim Avatar
            Vadim

            Hi Brad,

            Who? Those who don’t understand what you just said 🙂 And technically, it’s not always true. Take IE9. It’s pretty secure, and while it may lack some protection features of newer IEs, update to IE10 is still recommended, but not required for Windows 7 SP1 users. IE9 may get security updates for another 6 years, although I’m sure MSFT will drop it sooner.

            There are plenty of people with browsers that don’t support HTML5. Of course, you don’t see them by looking at the stats from your blog or W3Schools, but there are other less skewed sources of analytics, if you’re interested. By no means I’m advocating to continue using older browsers, quite the contrary.

            Yet the decision to provide a fix for them should be based on the blog stats. Honestly, I wouldn’t bother doing so for the comment fields, but the search field presented a usability issue, and I decided to fix it with 4KB of JS.

            Vadim

  2. Daniel Avatar
    Daniel

    I would like to incorporate this into my Metro Pro themed blog.

    In addition I want to widen the comment text box by default and allow the users to be able edit their comments for say 2-3 hours after they first make them. Is this easy to do with simple Comment Editing WP plugin. I hoping this not effect the threaded comments in the theme.

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Daniel

      No options in that plugin to change the time however this plugin does offer that option: WP Ajax Edit Comments

      You will need to modify the comment function to change the width of the form using filter hooks.

      I’m available for that work if needed.

      1. Daniel Avatar
        Daniel

        Brad,

        Thanks for the reply and the offer of assistance. I will take a look and see if need help..

        Daniel

  3. Rob Cubbon Avatar
    Rob Cubbon

    Some great help in here, Brad, thank for presenting it all so well.

    1. Brad Dalton Avatar
      Brad Dalton

      No worries Rob.

      1. Hassan Avatar
        Hassan

        Your tutorial is working correctly but not completely,
        in this code on my blog this ‘* is not displaying, 🙁

        I also want to display this please can your find out where is the mistake ?

        I completely copy code from this tutorial and paste as it there.
        but its not working ;(

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.