Skip to content

Instantly share code, notes, and snippets.

@billerickson
Created August 3, 2012 20:23
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save billerickson/3251211 to your computer and use it in GitHub Desktop.
Save billerickson/3251211 to your computer and use it in GitHub Desktop.
Gravity Forms labels used as placeholders
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();
}
})
});
#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; }
@mbootsman
Copy link

Thanks for this Bill.
Here is revised code for using with Genesis 2.0 with HTML5 enabled.

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

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

    $('.site-inner .ginput_container input[type="text"], .site-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();
        }
    });

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

});

and the CSS

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment