Would be nice if there was an option to have the Placeholder text not disappear when the field is focused or not empty, but rather have the text shrink and move to the top inside of the field as a floating label.
This can be done as a workaround with a text box with conditions and transitions, but it would be so much better is this were a native option in Bubble.
Some examples…
This type of interaction really gives a website a polished feel. Would be great if it was quick/easy for everyone to implement and maintain in their Bubble apps.
Would like to know how to do this too…
This is possible using @gaurav’s Input Labels plugin 
Preview:
https://bdkdemos.bubbleapps.io/better_input_labels
Editor:
Hi @gaurav,
BDK labels is working great but it seems to be interrupting non text inputs on the same screen, such as image uploader which become unclickable.
Any work arounds?
Hi @timzafir,
Yep you can do either of these 2 things
LEGEND!!! This solved it
Hey all- does anyone know if there’s a way to target not visible inputs? Without that ability this is pretty unusable. Can’t have to add a new explicit target ID every time there’s a new field on a page that isn’t visible on load!
Here is another plugin (by zeroqode) which supposedly does that: https://zeroqode.com/plugin/cool-animation-effects-for-inputs-1532952599516x668713368491393000
Haven’t tried it myself yet.
Has anyone come up with a better solution for this, yet?
I bought the Zerocode plugin, but I have not been able to get it to work (or get a refund), yet, so I am hesitate to drop more money on the bdk plugin, which is also poorly reviewed.
Should I just bite the bullet and spend 2 hours adding a hundred tiny text elements to my form?
Don’t bite the bullet yet.
Working on something for you
FYI, I found out from Zerocode why their plugin is not working with my form fields: It only works with the Input Form called Inputs. I was expecting it to work on Dropdowns and every field on my form, since Dropdowns are also under the header of Input Form. Not so.
I’m trying to figure out how best to do this as well (make the placeholder text change to floating labels). I’m also trying to figure out how to increase the padding around the text in an input element, like a dropdown. It doesn’t seem to be possible with the standard Bubble input element.
I recently came across the Material Design UI Kit plugin (Material Design UI Kit Plugin | Bubble). It only has 132 installs, so I’m hesitating. Also, this may not solve the padding issue I’m having as it doesn’t look like it can be customized, but the default padding in the elements in this plugin may be better than that in the standard input elements from Bubble.
Did anyone come up with a better solution for this?
very helpful post
