The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Contact Form 7
Have labels inside textbox, just like in Twenty Eleven (4 posts)

  1. object81
    Posted 4 years ago #

    Is it somehow possible to have labels showing inside the text-box, then disappear when text-box is clicked?
    This is the case in the Twenty Eleven Themes Comment Form. I would love to see that in my Contact Form to offer my Users a unified experience.

    I tried a bit by tweaking CSS id and class, but I'm no Expert here. Maybe someone has an idea.


  2. Takayuki Miyoshi
    Plugin Author

    Posted 4 years ago #

    Yes, when your text field tag is like this:

    [text your-name "John Smith"]

    Add watermark option to it:

    [text your-name watermark "John Smith"]

  3. object81
    Posted 4 years ago #

    Thanks for your answer. But this isn't was I meant. The Watermark option enables pre-filled text in the Text-box. But I want I label in the upper-left corner of the Text-box. Please look at the Twenty Eleven Theme to see what I mean (http://wordpress.org/extend/themes/twentyeleven Preview > Find Comment Form).

  4. Takayuki Miyoshi
    Plugin Author

    Posted 4 years ago #

    Ok, I checked the twentyeleven comment form. It seems that this CSS style in style.css does the trick:

    #respond input[type="text"]:focus, #respond textarea:focus {
        text-indent: 0;
        z-index: 1;

    The label has the same 'z-index: 1', and the input field comes after the label. So when you focus the input field, 'z-index: 1' is set to it, thus the input field gets shown upper than the label.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic