Placeholder Transitions

README.md

##Gravity Form "placeholder" transition.

Uses labels as placeholders.

• Fields must be required.
• Labels must be placed behind the text inputs

input-transition.less

@gray : #3b3b3b;
@light-gray: #bebebe;

.gform_wrapper li       { position: relative; }
textarea + label { top: 28px; }

label                     { position: absolute; .transition(all .2s); font-size: 18px; line-height: 30px; text-transform: uppercase; color:@light-gray; pointer-events:none; top:50%; left:25px; margin: -14px 0 0; }
    input                     { height:55px; padding-top:10px; }  
    textarea                 { padding-top:20px; }
    input, textarea        { .placeholder(@light-gray); font-size: 18px; line-height: 30px;

     &:focus + label,
     &:valid + label    { color:@gray; margin-top:0; left:15px; top:5px; font-size: 12px; line-height: 12px; }
}

mixins.less

// Placeholder text
.placeholder(@color: @input-color-placeholder) {
  // Firefox
  &::-moz-placeholder {
    color: @color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

.transition(@transition) {
  -webkit-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

move_labels.js

jQuery(document).ready(function($){

	    handle_labels();

	    jQuery(document).bind('gform_post_render', function(){
	       handle_labels();
	   });

	   function handle_labels(){
	       $('form.contact .gfield').each(function(){
	            $(this).find('> label').appendTo($(this).find('.ginput_container'));
	        });
	        $('form.contact .gfield_contains_required input, form.contact .gfield_contains_required textarea').attr('required','required');    
	   }
	    
	});