Floating field labels

Floating Labels.md

First create the inline labels following the instructions here: http://documentation.unbounce.com/hc/en-us/articles/203799174-Adding-and-Editing-Form-Fields/#content7

Next, paste the following code in the Javascripts section, selecting 'Head' as the placement:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/derpoho/floatlabels.js/master/floatlabels.js"></script>

<script>
$(document).ready(function () {  
  $('.lp-pom-form :input').floatlabel({
    slideInput: false,
    transitionDuration: .2
  });   
  $('.lp-pom-form .lp-pom-button').click(function(){
    if (lp.jQuery('.lp-pom-form form').valid()) {
      $('.label-floatlabel').css({ opacity: 0 });
    }  
    $(".lp-pom-form :input").keyup(function(){
      $("label[for='"+this.id+"']").css({ opacity: 1 });
    });    
  });    
  $('.lp-pom-form').keypress(function(event) {
    if (event.which == 13) {
      if (lp.jQuery('.lp-pom-form form').valid()) {
        $('.label-floatlabel').css({ opacity: 0 }); 
      } 
    }
    $(".lp-pom-form :input").keyup(function(){
      $("label[for='"+this.id+"']").css({ opacity: 1 });
    }); 
  });
});  
</script>

Paste the following CSS code in the Stylesheets section:

<style>  
.label-floatlabel {   
  font-family: PT Sans !important;
  font-size: 12px !important;
  color: #498ed2 !important;
  top: 1px !important;
  z-index: 1; 
}
</style>

Here you can change the look of the floating label by editing the type of font, size and color. You can also play around with the placement by changing the value of the ‘top’ property.