Turn input placeholders into floating labels for WP Contact Form 7 fields

index.php

/*
*
*  Description: Adds floating lables to all text inputs
*
*/
function ns_append_style_and_js( ){ ?>
 <script type="text/javascript">
     jQuery(document).ready(function($){
	$(document).on('focus', 'input[type=text], input[type=email], textarea', function(e){
		var ph = $(this).attr('placeholder');
		if( ph ){
			$(this).attr('ph', $(this).attr('placeholder') );
			$(this).attr('placeholder', '');
			$(this).animate({'padding-top':'20px', 'position' : 'relative'}, 100);
			$(this).parent().append('<div class="floating-label">' + ph + '</div>');
			$(this).parent().find('.floating-label').fadeIn();
		}
	});
  });
 </script>
 <style type="text/css">
	.wpcf7-form-control-wrap {
	display: block;
	}
	.wpcf7-form-control-wrap .floating-label {
		display: none;
		position: absolute;
		top: 3px;
		z-index: 9;
		left: 12px;
		font-size: 12px;
	}
 </style>
<?php
}
add_action('wp_footer', 'ns_append_style_and_js');