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!