Streaming live at 10am (PST)

Float Label Form Interaction implemention


#1

Hi there!

I'm working on the float labels implementation in my form, I've used this code and I can't contact with his owner.

Every field works except the textarea field, Does someone know how fix it?

https://webflow.com/website/gammaux

Thanks in advance!


#2

Hi, what should be the proper behavior for the text field area? I can see the form on the site, and I can see the text area field, with a label "What can we do for you"


#3

Hi @cyberdave,

The behavior should be like the previous labels as "name and surname". The code or js is I think only work with text field but not with textarea fields...


#4

Hi @jselva it seems that the codepen code is binding to the "input" fields in the form. The "textarea" is a element, you would need to duplicate that code being used for "input", and target "textarea" for the text area field label.

In short, you could try to make a binding to the textarea field also, because at the moment, you have no code doing anything with the textarea smile I hope that helps you with something to try smile

Cheers, Dave


#5

Hi @jselva, That's a pretty cool design animation! @cyberdave's recommendation will help if you still want to use the plugin. BUT, if you are really just going for the animation effect, I made a small demo on how to achieve this using Webflow interactions.

Take a peek at it here: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb Click on the page titled "Animated Form Label"

It doesn't take into account entered text or inital values, but it captures the basic essence of the animation. Also, you don't have to worry about contacting the owner for help! smile


#6

Hi @thewonglv blush

I've checked your repository, awesome work! will be very helpful for me. About your animation effect could be my second option, I would like fix the current animation... I've tried to contact with the plugin owner, but I haven't news.

Thank you so much for your tips.

@cyberdave thank you for your support as well, I'll try to implement ASAP.


#7