Gravity Forms Placeholder Text that Works with IE

Surprisingly Gravity Forms hasn’t implemented the placeholder feature for Gravity Forms input elements. The placeholder allows you to show placeholder text inside the field instead of using field labels to create more concise looking forms like this:

On June 22, 2011, Jorge Pedret, a freelance web developer, came up with a solution to the Gravity Forms placeholder problem with a clever function and script that could be added to your theme’s functions.php file. Unfortunately, the solution he posted didn’t work with non-html 5 compliant browsers, such as IE 7 and IE 8.

On September 15, 2011, WP Beginner reposted Jorge’s solution, yet it still didn’t work on IE. Luckily, an astute reader of WP Beginner, chood531, solved the problem and posted some code on pastebin, however, the code was only partial, so unless you’re paying special attention, you might not put one and one together, as I did not because it’s late on a Friday night, and it’s been a loooong week. So, I thought I’d do others the favor of post the code in it’s entirety here.

What you need to do is copy the code below and paste into your WordPress theme’s functions.php file and upload.

<?php
// Gravity Forms placeholder text

/* Add a custom field to the field editor */
add_action("gform_field_standard_settings", "my_standard_settings", 10, 2);

function my_standard_settings($position, $form_id){

// Create settings on position 25 (right after Field Label)

if($position == 25){
?>

<li style="display: list-item; ">
<label for="field_placeholder">Placeholder Text

<!-- Tooltip to help users understand what this field does -->
<a href="javascript:void(0);" tooltip="&lt;h6&gt;Placeholder&lt;/h6&gt;Enter the placeholder/default text for this field.">(?)</a>

</label>

<input type="text" id="field_placeholder" size="35" onkeyup="SetFieldProperty('placeholder', this.value);">

</li>
<?php
}
}

/* Now we execute some javascript technicalitites for the field to load correctly */

add_action("gform_editor_js", "my_gform_editor_js");

function my_gform_editor_js(){
?>
<script>
//binding to the load field settings event to initialize the checkbox
jQuery(document).bind("gform_load_field_settings", function(event, field, form){
jQuery("#field_placeholder").val(field["placeholder"]);
});
</script>

<?php
}

/* We use jQuery to read the placeholder value and inject it to its field */

add_action('gform_enqueue_scripts',"my_gform_enqueue_scripts", 10, 2);

function my_gform_enqueue_scripts($form, $is_ajax=false){
global $is_IE;

?>
<script>

jQuery(function(){
<?php

/* Go through each one of the form fields */

foreach($form['fields'] as $i=>$field){

/* Check if the field has an assigned placeholder */

if(isset($field['placeholder']) && !empty($field['placeholder']) && !$is_IE){

/* If a placeholder text exists, inject it as a new property to the field using jQuery */

?>

jQuery("#input_<?php echo $form['id']?>_<?php echo $field['id']?>").attr('placeholder',"<?php echo $field['placeholder']?>");

<?php
}

elseif($is_IE) { ?>

jQuery("#input_<?php echo $form['id']?>_<?php echo $field['id']?>").attr({value: '<?php echo $field['placeholder']?>', onfocus: 'this.select();'});

<?php
}
}
?>
});
</script>
<?php
}
?>

Empty your browser cache and when you go to edit a Gravity Form field, you’ll now see the following new field:

Be sure to read the excellent instructions by WP Beginner on how to Add Placeholder Text in Gravity Forms Drop Down field - just scroll down a bit in the post  to the very ed (ignore the code stuff and use the code below instead that works in IE).