Could this be added in the future: floating label with placeholder

Do note inspiration was taken from a design of Tailwindcss which looks just awesome. Do note that the font size of the label and the placeholder is the same.
https://drive.google.com/file/d/1Ka0kvgqcx6fpwAUj1IFDZYQF-cgEr9GR/view?usp=sharing

• This reply was modified 3 years, 9 months ago by snippet24.
• This reply was modified 3 years, 9 months ago by snippet24.

Hi @snippet24

I think Google are unlikely to add this to their Material Design Components library because the original intention of floating labels was to “start as a placeholder and turn into a label” to combat this – https://www.nngroup.com/articles/form-design-placeholders/

I’ll consider adding this in future versions of the plugin, but for now you could do something like this:

#cf7md-form .mdc-text-field__input::placeholder {
    opacity: 0;
    color: #888888 !important;
    transition: opacity 0.3s linear;
}
#cf7md-form .mdc-text-field--focused .mdc-text-field__input::placeholder {
    opacity: 1;
}

Thanks for using the plugin!
Angus

Thank you very much!! ??

“start as a placeholder and turn into a label” to combat this – https://www.nngroup.com/articles/form-design-placeholders/

Thank you for this wasn’t aware of this website from Jakob Nielsen who wrote the ten usability principles!!!

but for now you could do something like this:

What should that do: I ask because I’m seeing this:
https://drive.google.com/file/d/1wB58WPC-hqBipQy0as-G2UrnhK5lEJs5/view?usp=sharing

Thanks for using the plugin!

Thank you for developing such a nice plugin and for the excellent support ??

Hi @snippet24

It should look like what you were aiming for. You must have some theme CSS overriding the padding on the fields..?

If you send a link to your form (front end) I can help you debug.

Thanks,
Angus

Hi Angus!
Thanks to you! I was testing it on a local WordPress test installation but I can definitively create a test page with a test form on the live website in question ??
Kind regards!!

Hi Angus,
Here it is:
https://www.tomastestart.com/testeo-formulario/

Password: formtest

Well I set a password for the page but seems seem to not be working (I will ask in the appropriate forum) but in case it asks you this one is it.

Do note the first field “your name” is the one with placeholder set via contact form, so that is overlapped.

Kind regards!

Hi @snippet24 ,

When I add the CSS I provided to your page, it works perfectly. Are you still seeing the issue with the mis-aligned placeholder?

Don’t forget to add the CSS I provided under Appearance > Customize > Material Design Forms > Custom CSS

Thanks,
Angus

Hi,
Okey I was adding those rules to my main.css site rules… Ok added now in the customizer, but I meant this as initial state (perhaps I poorly explained before):
https://drive.google.com/file/d/15dF0TckT9hgLGaA0ht164N8RPe_OktQ-/view?usp=sharing
rather than this (which is what I’m getting):
https://drive.google.com/file/d/1GmGVjl9HZtFmcBfhOYD5U5ejEUlMsi8l/view?usp=sharing
Regards!

• This reply was modified 3 years, 9 months ago by snippet24.
• This reply was modified 3 years, 9 months ago by snippet24.