This is something you can create by yourself. Use the Title placement: Display as placeholder option and then style the form fields from there.
Hey there, @mchai888 👋
Following @dt4ils advice — after setting Title placement to Display as placeholder, inserting the following code to Additional CSS section in Customizer should give your inputs the look you’re after.
.happyforms-part--label-as_placeholder input:focus~label .label {
position: relative;
top: -19px;
padding: 0 10px;
background-color: #fff;
}
Hope this helps! 🙂
Thank you @dt4il and @thethemefoundry.
It works when the field has focus. The title, however, does not stay put when the field is out of focus (both the title and text is inside the placeholder).
The link is updated with demo and comments.
(Fun to ‘play’ with HappyForms!)
Got it, @mchai888!
In that case, adding the following snippet in addition to previous one should preserve the state when out of focus.
.happyforms-part--label-as_placeholder.happyforms-part--filled input~label .label {
position: relative;
top: -19px;
padding: 0 10px;
background-color: #fff;
}
And just a quick heads up: We’re taking a few days off until New Year’s. So if you don’t hear back from us right away, just know we will get back to you Jan 2. 🙂
Happy New Year greetings to all.
@thethemefoundry,
Thank you for the out-of-focus code. The code works on Short Text field. However, it is not working on Email, Long Text and Dropbox fields (have not tested on all fields). The on-focus code is not working on Long Text field.
Happy New Year, @mchai888! 🎆
To make this work on Dropdown part, modifying the last snippet we shared to this should do the job.
.happyforms-part--label-as_placeholder.happyforms-part--filled input~label .label,
.happyforms-part--select.happyforms-part--filled label .label {
position: relative;
top: -19px;
padding: 0 10px;
background-color: #fff;
}
As for the Email part — it turns out there’s a little bug 🐛 causing this. We’ll fix it up and release an update later this week. Be sure to stay up to date, the above snippets will work with Email part then.
Thanks! 🙂
@thethemefoundry,
The Dropdown is working. The Email is also working. Your are super. Thanks.
