So you don't want to use an input title and you don't want the placeholder text to disappear as soon as the user clicks on the input. Well, do I have a solution for you. In this post, you will learn how to have a placeholder text turn into an input title using a little Velo.
To get started, feel free to watch this video. It will show you how to set up the input properly.
Now that you have set up the input form properly, here you can find the code:
import { timeline } from 'wix-animations'; $w.onReady(function () { const placeholder = $w('#placeholder'); if ($w('#input1').value.length > 0) { } else { timeline() .add(placeholder, {scale: 1, y:0, x:0, duration: 400, easing: 'easeOutCirc'},0) .play(); } $w('#input1').onClick(() => { const clicked = {y:-18,x:-80,scale:.5, duration:400, easing: 'easeOutCirc'}; if ($w('#input1').value.length > 0) { } else { timeline() .add(placeholder,clicked,0) .play(); } }); });
Just copy this code over to your site and make sure you name your text and input elements properly. Keep in mind, it may take a bit of guess and check to make sure the placeholder text goes exactly where you want it to go!
Have fun using this on your website!