Gravity Forms Placeholders without a Plugin
Gravity Forms, which now has native support for placeholders, also now seems to add a placeholders.jquery.min.js file to every page of your site, whether you use placeholders or not. Bummer. See the first code snippet below for how to remove this, without any issue or affect on the back end of your WP Admin or front end form display.
function remove_gf_placeholder_script( $scripts) {
if (!is_admin()) {
wp_deregister_script('gform_placeholder');
wp_dequeue_script('gform_placeholder');
}
}
add_action('wp_enqueue_scripts', 'remove_gf_placeholder_script');Read on below for the original post.
There is a placeholder plugin for Gravity Forms that works perfectly well as far as removing labels and adding them as placeholders in form fields.
However, if you’re a performance freak you may not want the additional load of a Javascript file the plugin calls for something as simple as placeholders (Gravity Forms, please add this as default functionality!).
The tutorial below simply takes the Javascript provided by those files and shows you how to insert it directly into your theme so you don’t have the extra js files to load.
All we’re going to do is add the following to the bottom of an existing Javascript file that your theme loads anyway (if you don’t have one, this tutorial is not for you, as creating one would essentially be the same thing as just loading the original in the first place):
(function($){
var gf_placeholder = function() {
$('.gform_wrapper .gf-add-placeholder')
.find('input, textarea').filter(function(i){
var $field = $(this);
if (this.nodeName == 'INPUT') {
var type = this.type;
return !(type == 'hidden' || type == 'file' || type == 'radio' || type == 'checkbox');
}
return true;
})
.each(function(){
var $field = $(this);
var id = this.id;
var $labels = $('label[for=' + id + ']').hide();
var label = $labels.last().text();
if (label.length > 0 && label[ label.length-1 ] == '*') {
label = label.substring(0, label.length-1) + ' *';
}
$field[0].setAttribute('placeholder', label);
});
var support = (!('placeholder' in document.createElement('input')));
if ( support && jquery_placeholder_url )
$.ajax({
cache: true,
dataType: 'script',
url: jquery_placeholder_url,
success: function() {
$('input[placeholder], textarea[placeholder]').placeholder({
blankSubmit: true
});
},
type: 'get'
});
$('.gform_wrapper .gf-add-placeholder').find('select').filter(function(i){
var $theSelect = $(this);
$theSelect.each(function(){
var elementID = this.id;
var inIdFormat = "#" + elementID;
var theLabel = $('label[for=' + elementID + ']').text();
console.log('The id for this field is '+ elementID + ' the label for this field is ' + theLabel);
$(inIdFormat).prepend("" );
$('label[for=' + elementID + ']').hide();
})
});
};
$(document).ready(function(){
gf_placeholder();
$(document).bind('gform_post_render', gf_placeholder);
});
})(jQuery);
Or get the minified version of that code here.
Having Trouble?
This was also a part of the plugin’s output, though I was able to remove it and placeholders still worked just fine. If you’re having trouble, perhaps try adding it just above <?php wp_footer(); ?>:
<script>var jquery_placeholder_url = '/wp-content/plugins/gravity-forms-placeholder-support-add-on/jquery.placeholder-1.0.1.js';</script>Ponderings…
Gravity Forms itself also makes a call to a jquery.placeholders.2.1.1.min.js file (as of Gravity Forms 1.8.17), which doesn’t seem to be utilized except perhaps for in the admin area…so they’re probably about one hop, two skips and a big hoop to jump through before dropping placeholder support natively.