Add the following to a js file that is enqueued from your theme
jQuery(document).ready(function($){
// gravity forms custom placeholders
$('li.gfield .gfield_label').live('click', function(){
$(this).next('.ginput_container').find('input[type="text"], textarea').focus();
})
});
jQuery(document).bind('gform_post_render', function(){
// add any other js here that you want to run before/after validation
jQuery('.ginput_container input[type="text"], .ginput_container textarea').focus(function(){
jQuery(this).closest('.ginput_container').prev('.gfield_label').hide();
});
jQuery('.ginput_container input[type="text"], .ginput_container textarea').blur(function(){
if( jQuery(this).val() == "" ){
jQuery(this).closest('.ginput_container').prev('.gfield_label').show();
}
})
jQuery('.ginput_container input[type="text"], .ginput_container textarea').each(function(){
if( jQuery(this).val() != "" ){
jQuery(this).closest('.ginput_container').prev('.gfield_label').hide();
}
})
});
Add this to your theme css:
li.gfield,
div.ginput_complex span {
position: relative;
display: inline-block;
}
li.gfield .gfield_label,
div.ginput_complex span label {
position:absolute;
top: 7px;
left: 11px;
margin: 0;
}
.gfield_required {
display: none;
}