Any custom Input set ups or plugins

I’m looking for a way to create a custom input using native bubble or if available a plugin that does this:

input

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.

Any suggestions?

this is my fav but there are others https://bubble.io/page?version=live&type=page&name=better_input_labels&id=bdkdemos&tab=tabs-1 by @gaurav its the input labels plugin https://www.notion.so/Bubble-Developer-Kit-Plugins-3eb057d9d81d4176b1be678856c80faf#b0f69ab26fd94076bd5c9072b0a47aed

2 Likes

There’s a new material design plugin available. I haven’t had chance to test it yet, but it looks promising: Material Design UI Components - New Plugin from Purracchio Andrea

1 Like

@boston85719

I bought guaravs plugin but didn’t like it. It doesn’t work on many elements. I ended up not making it as dynamic, but I like my version better.

You just need a text box with the wording to overlap the input or dropdown box. The main elements has a border, the label element does not.

Hope you like it.

1 Like

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.

@troy.roberge

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.

Input

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

Besides that one confusing thing might have been my choice of custom state name ( it is input_is_focused )

Screen Shot 2020-01-03 at 9.46.45 PM

Screen Shot 2020-01-03 at 9.47.07 PM Screen Shot 2020-01-03 at 9.47.22 PM

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.

3 Likes

@boston85719

Looks great! As for the OCD thing, in web design, it’s a good thing!

I totally forgot about that expression hack, it’s a pain it needs to be done, but glad it can work.

Thanks for making the writeup for everyone.

1 Like

Holy lifehack, Batman!! :bat:

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. :wink:

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”)

1 Like

Pun-tastic!

Hey all!

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)

Editor
Demo

2 Likes

Hi @lockymadera

Just curious, the ID Attribute is inputemail, but in the js code, there’s nothing.

image

update: ok just get it! thanks. :slight_smile:

it is, I was sleeping :slight_smile:

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.

1 Like

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

mutliple inputs

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.

6 Likes

Thanks for this, saved me a lot of time!

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”.

Thanks! I was successfully doing so by using floating group as the label…