[Plugin: Contact Form 7] Have labels inside textbox, just like in Twenty Eleven

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

    https://www.ads-software.com/extend/plugins/contact-form-7/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    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"]

    Thread Starter object81

    (@object81)

    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 (https://www.ads-software.com/extend/themes/twentyeleven Preview > Find Comment Form).

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Plugin: Contact Form 7] Have labels inside textbox, just like in Twenty Eleven’ is closed to new replies.