• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  • Add Remove & Change Order of Comment Form Default Fields
  • How To Remove Comment Form Allowed Tags
  • Remove Comments From Specific Posts and Different Categories
  • Modify Text Before & After Comment Form
  • Style Comment Form Submit Button
  • Customize Comment Form Text Area & Label

Reader Interactions

Comments

  1. Vadim says

    January 15, 2014 at 7:09 pm

    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

    Log in to Reply
    • Brad Dalton says

      January 15, 2014 at 11:39 pm

      Thanks Vadim

      Log in to Reply
      • Vadim says

        January 23, 2014 at 7:38 pm

        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 πŸ™‚

        Log in to Reply
        • Brad Dalton says

          January 24, 2014 at 12:59 am

          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?

          Log in to Reply
          • Vadim says

            January 24, 2014 at 10:01 am

            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 says

    September 13, 2013 at 2:19 pm

    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.

    Log in to Reply
    • Brad Dalton says

      September 13, 2013 at 3:11 pm

      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.

      Log in to Reply
      • Daniel says

        September 14, 2013 at 9:49 pm

        Brad,

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

        Daniel

        Log in to Reply
  3. Rob Cubbon says

    September 2, 2013 at 10:10 am

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

    Log in to Reply
    • Brad Dalton says

      September 2, 2013 at 11:16 am

      No worries Rob.

      Log in to Reply
      • Hassan says

        December 14, 2013 at 2:04 pm

        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 ;(

        Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.