Gravity Forms labels used as placeholders

Written by Bill EricksonPublished on August 3, 2012Updated on December 5, 2018

This is really old, used before HTML5 when placeholder support was built into input fields. I recommend you use this plugin instead.

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

	// gravity forms custom placeholders
	$('#inner li.gfield .gfield_label').click(function(){
	$(this).next('.ginput_container').find('input[type="text"], textarea').focus();
	})

	$('#inner .ginput_container input[type="text"], #inner .ginput_container textarea')
	.focus(function(){
	$(this).closest('.ginput_container').prev('.gfield_label').hide();
	})
	.blur(function(){
	if( $(this).val() == "" ){
	$(this).closest('.ginput_container').prev('.gfield_label').show();
	}
	})

	$('#inner .ginput_container input[type="text"], #inner .ginput_container textarea').each(function(){
	if( $(this).val() != "" ){
	$(this).closest('.ginput_container').prev('.gfield_label').hide();
	}
	})

	});

view raw functions.js hosted with ❤ by GitHub

	#inner .gfield_label { }
	#inner li.gfield { position:relative; }
	#inner li.gfield .gfield_label { position:absolute; top: 4px; left: 6px; font-size: 14px; color: #949494; font-weight: normal; margin: 0; }

view raw style.css hosted with ❤ by GitHub