Forum Academy Marketplace Showcase Pricing Features

Are you tired of adding labels to the inputs? Try the Libelizer Plugin

Labelizer

Now you can “labelize” (put an automatic label) to your native input fields and native multi-line input fields without change design or structure of your project. It can be animated as in Material Design.

Where to find it
The plugin is a workflow action so you have to add it into an event, for example inside the “Page is loaded” workflow event. Labelizer action is in Plugins → Labelizer. Be sure that when the event where the action is, is called, the input fields are visible.

Set input ID
Labelizer uses the ID of the input field to display and name the label.
First we need to enable the option in Settings → General → “Expose the option to add an ID attribute to HTML elements”. Then we can add a special ID to the input where we want to display the label. The ID consists of a first part “labelizer_” and a second part which is the text of the label, where spaces should be underscores. For example: labelizer_This_is_a_label.

Look at this!
2023-01-20 11.06.34

Thanks to @bubblernz who saved the placeholder with his suggestion.


Are you already satisfied? So go to the plugin page

Take a look at the cozynocode sandbox site to know how it works.

Take a tour at cozynocode.com to see all my plugins or propose yours.

Reply to this forum topic to ask for support or for a new feature.

4 Likes

I like it!

Can we change the formatting of the label?
The edit-button in the sandbox isn’t doing anything, so can’t try it myself :wink:

Cheers,

Steven

Hi @steven11,
I just tried the EDIT button in the sandbox and it seems to work, however, for now, you cannot change the label formatting, but in the next version. You can only set if it is fixed or animated, for now.
Give me some suggestions of what you would like it to do. Bye and thanks.

Hi @piuiux,

Thanks for getting back to me.
I checked, apparently safari is a bit buggy. Some clicks the button works, some not… Chrome works fine.

I would like to be able to change font-size, -color & -weight.

Also very nice would be to set a background-color to the text. Then you can do a ‘border-overlapping’-label, just as google does it:

I really like the component! The main benefit for me - besides the nicer and cleaner UX - would be setting up forms much quicker as separate labels aren’t neccessary.

Your sandbox page has a lot of workflows going on for the UX making it a bit hard to seperate what is used for labelizer and what not.
I’m I correct in assuming that the only necessary workflow to have is this one:
image

Thanks!

New version 1.1.0

What’s new

Font family
It is used to set the font family of the labels. To do this you can, either type in the family name (e.g.: Lato) if this is already among the fonts used on the page, or you can set a new font in the “Style variables” and type in “var(–font-[variable name])”

Font color
The color of the labels.

Font bold
You can change it in a bold label

2 Likes

Hi @piuiux,

Thanks for the update. Made me start using it :slight_smile:

Small bug. If you select bold font. After deselecting the input field (but not filling a value), the label reverts back (good), but stays bold (bad):



Also: if there is a text element directly above the input: this is then pushed down to below the input field, but this is not how it is set up in the design. Not an issue for me atm. But there could be a valid use case for having text above the input field which should not move.


Search Box element seems not to be supported yet, but is part of the forms I use. So would be much appreciated if this would be added.

Tiny request: Would be nicer being able to set ID with L_Label_Name, instead of Labelizer_Label_Name. This plugin is all about convenience. Or Maybe $L_Label_Name

Still have the feature request to be able to set the label-background-color (and set negative alignment (padding) values), so you can create a proper material design label type: Material Design
image
image

Once again: thanks for the update!

Cheers, Steven

Hi @steven11 ,
After a tons of requests, I’m working for a new reform release (but back compatible) more complete and customizable, however this takes several days. Be patient and you will be rewarded. :wink:

Awesome! Looking forward to it. No rush

New version 1.2.2

What’s new

ID prefix
With this parameter you can choose a custom ID prefix to name your inputs. This allow you to run different labelizer actions to different inputs.

Top
Change the label initial position by moving from top.

Left
Change the label initial position by moving from left.

Background color
The background color of the label. Transparent if it is not set.

…so now you can make this…

Try it on https://24c6f019b2dc67cbb92bf6c24e174cf4.bubbleapps.io/version-test/af462ccd

1 Like

Awesome! Quick turnaround. Thanks!

I think you mixed up the Top & Left setting :slight_smile:

One small issue with this new release.
The normal placeholder position & font-style now seem to be changed. This wasn’t the case before? See below. Top one labelized, bottom one regular:

Also, nice thinking with the custom prefix! Makes it very flexible like this.

Cheers, Steven

Ah and also the ‘on hover’ behaviour seems to be overwritten. At least not working now

Update to the last version and refresh your project.

Thanks!

L/R has been fixed. Still have the placeholder placement, fontstyling & hover issues though.

Sorry Steven, but there’s not placeholder placement and fontstyling issue I think. I tried some composition and I can’t found an error like yours as you can see below.

Schermata 2023-03-29 alle 10.48.40

Schermata 2023-03-29 alle 10.48.52

The first is labelized, the second not.

An advice: Check and play the padding parameters for position and with Font family and Placeholder color for the style. I think that is the problem.

If you can’t solve the issue you grant me to your app so I can check what’s the problem (obviously for free).

For the hover issue (that don’t work when labelizer is animated only) you have to wait several time for a solution. Meantime, try to not use hover event in input (moreover, hover event is completely useless in the mobile devices).

Thank you very much for your appreciation and I hope I’ve been helpful. Bye.

@piuiux Love this plugin! It could same me a lot of space for complex forms. But I can’t use it in production yet.

Couple of things
I can’t get it to work on dropdowns or Multi-Select fields, also doesn’t work on input fields if I change type to email

I use auto space between rows and cols to do basic formatting like this

But there’s extra padding being put in by the plugin that I have no control over and it only applies it to text fields so I get this uneven layout when displayed
image

I’ve also noticed that if I open a blank copy of a form, close it (which calls a reset inputs in the workflow) then open the same form but this time with pre-filled data the label and the filed data show over each other
image

Also would it be possible to have all values set by a database field (like you do for colour) ? That way I could add in constants and only change them once and update the whole app.

Cheers - Johnnyweb

Thank you very much for your appreciation.

I know. I’m sorry but you have to wait several time for a Labelizer for Multi-select and Dropdows because a different structure to be implemented. About Input field (every types) the next release (1.3.1) will fix the problem.

This is a “must be” limitation. The “extra padding” is the invisible label present above the input where the animated label have to be placed at the and of animation. In your design you have to calculate this space like necessary. This is not a really limitation but, if you use the animated label you need a space to place it. Isn’t it?

This issue would be fixed in the new release 1.3.1. Update and refresh multiple times you editor.

I hope I help you. Bye.

New version 1.3.1

What’s new

1 - Now you can set the Labelizer parameters with dynamic data.
2 - When you change input types Labelizer won’t works - FIXED
3 - Extra labels when you call Labelizer multiple times - FIXED

1 Like

Firstly thanks for the super fast update I really appreciate it!

All your fixes look great and have resolved what I noted. I will wait for the new structure for multi lines and dropdowns. this will be fantastic when its available :smiley:

Yes in principle I agree with you but that should be up to the designer. I don’t know how much space you have allowed for and rather than use responsive design and set up cell gaps I have to individually set spaces for some elements. This may become less of an issue when you support dropdowns etc but some elements will never be controlled (like checkbox) and they will always be misaligned if labelizer ignores them and adds in space for other types. - Just some food for thought you are the developer :slight_smile:

I’m just “wow” by this whole thread and its title.

I totally agree with you, but some consideration:

The designer works and solves problems with the tools he may have, and unfortunately, I cannot accommodate him on this issue. I’ll explain more about why.

When Libelizer sets inputs with an animated label, if we were to consider an initial state where above the input there are no extra spaces, when it animates to place itself above the input, it will have to create that space. The end result, will be much more problematic than extra space to manage, in fact, the animation will create a very ugly shifting effect of the inputs being focused or, in static condition, a different space will be created between the inputs with default values and the empty ones. I hope you can imagine the disaster :wink:

Some solutions:

There’s not an elegant way to show to the designer how much space will be created by Labelizer: It depends by 5 parameters:

  • Font size
  • Label H padding
  • Label W padding
  • Top translation
  • Left translation

that you set.

So, you can open the browser inspection by Mouse Right Button click → Inspect to get the actual size of the space.

(when will be supported search, dropdown, etc…) Just add some padding to checkbox elements only. Given what I said, I think it is a small cost to bear.

I love critics. I am who I am because 30 years of experience made by critics.
So I really thanks you very much.

1 Like