fbpx

Create a floating label effect in elementor form

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.

Plugins required:

Here are some of my favorite website building tools

Thank you for reading the article hope you have found this helpful. Here are some of my favorite tools that I always use and hope you will find them helpful too. Please note these are affiliate links, if you do purchase anything using my links I’ll earn a small commission at no extra cost to you. I recommend these tools to my clients and friends as well.

Web Hosting: For starting a new website, I like to use GreenGeeks. They are reliable and affordable for a beginner. They have a very simple setup process that anyone can use. I’m personally using their service for over a year now.

Page Builder: For building beautiful websites in a short period of time I like to use Elementor. It is one of the most powerful page builders in the market. You don’t need any technical knowledge to make websites.

Content Writing: When you make a website you have to add content to it. I use Grammarly to write better content. It improves the writing by checking spelling and grammar mistakes automatically. It has a premium version but for starters, the free version is a good starting point.

Advertising Network: When you have built the website and have traffic on it, ads are the easiest way to monetize the website. Adsense is the most popular choice but I recommend Ezoic which will give you a much higher earning than Adsense and the best part is it is free to use.

You may also like

Picture of Ananda Projapati

Ananda Projapati

A freelance Wordpress consultant and educator.

Recent Posts

21 thoughts on “Create a floating label effect in elementor form”

  2. MIGUEL

    If you could help me, I am trying to adapt the code fragment of the floating labels, in the PIOTNET PAFE form builder, but the effect only happens in the first field of the form, the rest does not work, and the truth, I am already blocked I don’t know where to look, it would be great if you can help me

    Reply
      1. Miguel

        the code snippet does not work for select type inputs, it would be great if you could complete the code for the different input types out there. Thank you very much in advance .

        Reply
        1. Ananda Projapati

          Hi Miguel,
          I have covered the text field and text area only because those two input fields can have this floating effect, rest can’t. For example, a select field would already have some value in it from the list and we can’t force our label on top of it.

          Hope my point is clear.

          Reply
  4. Flor

    Hi, do you have some video showing how to display label and input in the same line in a form with elementor pro? Thanks!

    Reply
    1. Ananda Projapati

      Hi Flor,

      Unfortunately, I don’t have a video for this but with some CSS tweak, you can do this. If you know CSS then, you have to target the label and give it a width, then target the form fields make sure they are not at 100% width it will make them inline.

      Make sure you target the large screens only.

      Hope this helps!

      Reply
  5. Axl

    Great, but if you have put in some entries and reload page, then the placeholder overlaps over your input text.
    Is there any solution?

    Reply
  7. Craig

    Hi, thanks for this great tutorial on a contemporary and elegant way of styling forms. I’m trying to do this in Elementor but using the Crocoblock Jet Engine Forms. I’m trying to change the arguments in the Java code but can’t seem to get it to work. I was hoping you could give a brief overview of the elements of the jquery code that might make it adaptable to other form types?

    Reply

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.