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

index.php

<?php
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
/*

	Plugin name: WPCF7 FLoating Labels
	Author: Richard Keller
	URI: http://richardkeller.net
	Description: Adds floating lables to all text inputs

*/
function 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', 'append_style_and_js');

Hi there, whereabouts does this code go in the plugin? Thanks, Matt

This doesnt work in chrome due to a bug...

Hi, I am also a little unsure where to place the code, I have broke it up and put in functions.php

`
add_action('wp_footer', 'append_style_and_js');
function append_style_and_js( ){

?>
<script type="text/javascript">
jQuery(document).ready(function(){

	$(document).on('focus', 'input[type=text], input[type=email], input[type=tel], input[type=number], 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>


<?php

}
`
And the css in a custom.css, works ok but many other conflicts with other plugins, so any advice on where to place the index.php file be appreciated

Hi everyone, was trying to get this applied myself and found that it could be coded slightly wrong for WP, $ isn't usually a function, it needs jQuery written out so try the below. This is a plugin as it is uploaded so you can download and change the contents of the file or I apply it as a php shortcode directly on the pages I need. I use a shortcode creator plugin for this, let me know if you need assistance. I have also added in telephone fields to extend functionality :

<?php

defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
/*

Plugin name: WPCF7 FLoating Labels
Author: Richard Keller
URI: http://richardkeller.net
Description: Adds floating lables to all text inputs

*/
function append_style_and_js( ){

?>
<script type="text/javascript">
jQuery(document).ready(function(){

	jQuery(document).on('focus', 'input[type=text], input[type=email], input[type=tel], textarea', function(e){
		var ph = jQuery(this).attr('placeholder');
		if( ph ){
			jQuery(this).attr('ph', jQuery(this).attr('placeholder') );
			jQuery(this).attr('placeholder', '');
			jQuery(this).animate({'padding-top':'20px', 'position' : 'relative'}, 100);
			jQuery(this).parent().append('<div class="floating-label">' + ph + '</div>');
			jQuery(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', 'append_style_and_js');