Do you like the Floating Label effect in a form like Gmail uses right now?
If yes then you are at the right place, in this video I’ll show you how you can create a floating label effect in elementor form.
Because of the way elementor form is structured we have to use some jQuery along with CSS.
Here is the code
jQuery("input , textarea").focus(function(){
jQuery(this).parents('.elementor-field-group').addClass('focused');
});
jQuery("input , textarea").blur(function(){
var inputValue = jQuery(this).val();
if ( inputValue == "" ) {
jQuery(this).parents('.elementor-field-group').removeClass('focused');
}
});selector .elementor-field-group {
position: relative;
}
selector .elementor-field-label {
position: absolute;
left: 15px;
top: 10px;
color: #999;
z-index: 10;
transition: font-size 150ms ease-out, -webkit-transform 150ms ease-out;
transition: transform 150ms ease-out, font-size 150ms ease-out;
transition: transform 150ms ease-out, font-size 150ms ease-out, -webkit-transform 150ms ease-out;
}
selector .focused .elementor-field-label {
background-color: #fff;
line-height:1.5;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
font-size: .90em;
}This technique will in any form with similar Html structure you just need to target the class properly.
Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.
Plugins required:
- Elementor
- Elementor Pro
- Simple Custom CSS and JS
The post Create a floating label effect in elementor form appeared first on DesignTheWay.
