Gravity Forms labels used as placeholders

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

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk