Skip to content

Instantly share code, notes, and snippets.

@victorzen
Last active August 17, 2017 17:58
Show Gist options
  • Save victorzen/465390156b3a94790832 to your computer and use it in GitHub Desktop.
Save victorzen/465390156b3a94790832 to your computer and use it in GitHub Desktop.
Floating field labels

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment