WP SITES

2786

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Customize Comment Form Place Holder Input Text Fields & Labels

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

Reader Interactions

Comments

      • 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 🙂

        • 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?

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

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

Leave a Reply