How to Implement Floating Labels in WeWeb Forms?

Ask us anything How do I?
1

Hello everyone,
I’m new to WeWeb, and I don’t speak English very well, so I apologize if I make any mistakes.

I’m trying to implement Floating Labels in a WeWeb form, but I couldn’t find a built-in option for this behavior.

:bullseye: What I want to achieve:

  • When a user clicks on an input field, the placeholder should move above the input field, acting as a label.
  • If the field is empty, the label should return to its original position inside the field.
  • This is a common UX pattern used in many modern forms (Google Material Design, Bootstrap, etc.)

Example of Expected Behavior:

:one: Before clicking on the input:

markdown

CopiaModifica

-----------------------
| Enter your name    |  <- Placeholder inside
-----------------------

:two: After clicking (or when a value is entered):

markdown

Name
-----------------------
| John Doe          |  <- Label moves up
-----------------------

:one: Is there a native way in WeWeb to achieve this Floating Label effect?
:two: Can WeWeb detect if an input field is empty or filled without writing custom JavaScript?
:three: If I must use CSS, is there a recommended way to structure the form fields in WeWeb?

Thanks in advance for any suggestions! :rocket:

Ben

1 Like
2

You can do this with states and position absolute. There also is an “advanced placeholder” option on WeWeb’s native inputs.

3

Thank you for your response Broberto.

I have checked WeWeb’s native inputs, but I can’t find the “Advanced Placeholder” option. Could you please guide me on where to locate it?

Additionally, I would love some more details on the states and position absolute approach.

:small_blue_diamond: For the “Advanced Placeholder”:

  • Is it a built-in option for all input fields?
  • How does it work? Does it automatically move the placeholder above the input when the user types?

:small_blue_diamond: For the “States + Absolute Position” method:

  • Do I need to manually create a label and move it with a WeWeb state when the input is focused?
  • Could you share an example setup or a small step-by-step guide?

I am new to WeWeb, so any detailed explanation or example would be really helpful! :blush:

Thanks in advance for your support!

4

Thank you for your suggestion! :raising_hands:

I successfully implemented the floating label effect by using States as you suggested.

:pushpin: What I did:

  • I created a label positioned absolutely inside the input container.
  • I added a WeWeb state that checks if the input field has a value.
  • When the input is focused or contains text, the label moves up using the Animations panel.
  • When the input is empty, the label returns to its original position.

It works smoothly and looks great! Thanks again for the help. :rocket:

2 Likes
5

BenGiordanoGPT

6

Haha, Broberto, you got me! :laughing: AI definitely helps me write better English and communicate more clearly. Plus, it’s a lifesaver for finding solutions in WeWeb! :rocket:

By the way, your suggestion about using States was the main input that led AI to the solution, so thanks again! :raising_hands:

If you have any further insights on the “Advanced Placeholder” option you mentioned, I’d love to explore it. The AI solution works well, but it’s quite time-consuming, and applying it to all forms takes a lot of effort.

Any extra tips would be much appreciated!

1 Like