fbpx

Create a floating label effect in elementor form

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Do you wish to have a floating label effect in elementor 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.

Here we will learn to create a floating label effect on input fields and textarea. 

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 work in any form with a 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.

You may also like

Ananda Projapati

Ananda Projapati

A freelance Wordpress consultant and educator.

Recent Posts

free wordpress training

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top
website design illustration

Learn The Exact Steps I Follow To Create WordPress Websites

Easily create WordPress websites for yourself and others following my 2 hrs FREE WordPress Training (Video).