Streaming live at 10am (PST)

Contact form section naming stay always visible

Hi all,

I wanted to make this effect you see here in this page of “work.co” in the apply section (you can see it if you scroll down).
Here is the link: https://work.co/careers/design/copenhagen/design-director/
The effect were when you click to the text area to write your name the “first name” stays visible on top of the section.

You can see it in my contact section where i have the form. The name by default is there but when i click it disappears.

Thanks in advance
Constantin


Here is my site Read-Only: https://preview.webflow.com/preview/human-brands?utm_medium=preview_link&utm_source=dashboard&utm_content=human-brands&preview=c1bea8c4faa4d5ea6d4981a9a726a1a8&mode=preview
(how to share your site Read-Only link)

The disappearing text you mentionned is the placeholder text. In the case of your example, they are animating the label element, not the placeholder. So they have no placeholder, move the label on top of the field, then move it back while changing its text size.

You can almost do that exactly with Webflow interactions, but that’s not going to help you. You can only reproduce the animation part, where when you click a field the label will move away, and when you click another it resets all the others and move its label away again.

But you will need Javascript, not IX, to achieve that. because you need to check if a field is filled or not in order to reverse the label animation or not. Check my example, that’s as far as you can go. Once filled, the field is covered by the label if you go to another field. Also the text shrink uses Transform, hence the blurry text when small. JS could make the font shrink using text size.

https://sbx.webflow.io/floating-form-fields

Thanks for the responce @vincent. Will try.