Hide placeholder field when text input

  • Resolved kaizerco

    (@kaizerco)


    6 years, 2 months ago

    I set a ‘short text’ field to display the label as a placeholder. When one clicks into the box to fill in a name, the field’s name slides up to make room for the input text, but it stays visible.

    1. Is there a way to completely remove the field name once text is input?
    – It’s really not needed to see the label when someone enters their full name and email for example. They know it’s their name and email… the lingering label just adds clutter. For other situations I can see this valuable, but not in this case.

    2. When clicking ‘back’ after submitting the form (that happens), there is an overlap between the entered text (from before) and the placeholder labels which are back to their original place – That’s another good reason why to have the option to remove the animated field names once text is input.

    3. It would be much appreciated to have the option to use the simple html ‘placeholder attribute’ instead of javascript animations. It will make things a lot faster and simpler.

    BTW. Thank you for a great plugin!!!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hey again, @kaizerco ??

    As it turns out, that’s currently not baked in to our UI, sorry. It’s on our list though!

    There is a way of achieving the same look and feel with a bit different configuration of your form part and just a small chunk of CSS. Here goes…

    1. When setting a part, choose Above from Title placement dropdown.
    2. Fill the Placeholder input.
    3. Click Advanced and add a class of your choice to Custom CSS class input. For this example, we’ll use placeholder-only class.
    4. Add the following CSS to your child theme or Additional CSS tab in Customizer: .placeholder-only .happyforms-part__label { display: none; }

    You can then use placeholder-only class in other parts as well in order to hide part title and display just a placeholder.

    Hope this helps! ??

    Thread Starter kaizerco

    (@kaizerco)

    Cool, that works for now! ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Hide placeholder field when text input’ is closed to new replies.