I’m looking for a way to create a custom input using native bubble or if available a plugin that does this:
I’ve seen on various sites dedicated to UX design recommending this type of design for input forms and came across this example on a site and find it much better than what I am doing currently.
I do like what you did there…not using a plugin is always my first choice, and now I am going to play around with some setups to see if I can’t create a similar effect. Thanks for sharing.
You inspired me. I went through an idea and came up with something that I think is pretty much spot on for what I was looking to do…the design could be better but the functionality is there.
It required some one custom state and a few conditional workflows. Had to put some conditionals to include more than one or have a conditional on the workflow event to avoid some animation issues.
Here are screen shots…one thing to keep in mind when looking at the screen shots is the conditional workflow actions do not allow you to use “input is focused” or “input isn’t focused”; to be able to get those expressions need to make the expression in a condition on the input and then copy and paste it into the workflow action
Now I need to figure out how to get drop downs to function the same way and then redo all my forms…I don’t know if bubble caused me to have OCD or it just brings it out of me, but its a problem.
I had just watched a video of @romanmg where she gets around that limitation by adding a shape (YouTube link - should go to the correct timestamp 13:04)
Excellent work! If this is what your OCD delivers, please let your OCD run wild.
Thanks for linking that…great tip as there are times that I have noticed the method I used doesn’t work, so her way must be better (ie. “This is the way”)
I’ve been working on this for a little while now and I’ve figured out how to do it with just 3 workflows.
It uses the CSS tools plugin from zeroqode but all the CSS is already written so just copy the elements across (make sure you enable element ID in your settings)
Oh, inputtest is the text element behind the input. The input itself is blank and has no placeholder so the text in the background is the element thats moving. My bad I should change it to something easier to understand.
Wanted to update this thread as @troy.roberge had given some helpful ways to adjust the setup and make it much simpler and less need for workflows ( in fact no need for workflows ).
Here is a link to the editor for anybody who wants to check things out.
There are four different versions
Thanks again to Troy for bringing to light a simpler and more effective way to customize the inputs. Makes it so much easier to have no workflows to copy the custom input.
This is great, thanks!
But, how do you make the label element ‘cover’ the main one? when I add a background color to the label it still show thte main element border behind it.
The best way I know how, but there might be better ways… Is to use a group. It’s the parent one, not rows or cols. Place them to in the group, sand that way you can overlap one another. Just make sure the label is “brought forward”.