How to Add Placeholder Text in Gravity Forms

*****************How to Add Placeholder Text in Gravity Forms******************

If you don’t know already, Gravity Forms by far is the most beginner friendly WordPress contact form plugin out there. We use it on our WordPress Gallery site, WordPress Coupons site, and pretty much all new clients as well. Recently while working on a client’s site we had to tweak the styling of the form to match the design which required us to put placeholder text in Gravity Forms. Unfortunately and surprisingly, this feature is not built-in to Gravity Forms (Yet). While they do have an option to add placeholder text in drop down fields and post field: category, there is no option to add placeholder on input fields and textarea fields. This became a huge issue for us. We searched through the Gravity forms support area where the only solution available was a hack which didn’t even work properly. While it allowed us to put placeholder text, it had major issues. If the user just hit submit without actually filling the field, the form will validate rather than returning errors. After a good search, we ended up finding the solution. In this article, we will show you how to add placeholder text in gravity forms using jQuery and Gravity Form filters.

So you are probably wondering why heck did we need placeholder text when labels are there? Well in the design we were working on, we couldn’t use labels for styling purposes.

************************************%%%%%%%%%%%%%%%%%%%%%*********************************************

Final Code

The final code is below. You can simply copy and paste this in your functions.php file and have it working. But if you want to read more about the function and how it works, then continue reading the article. Also continue reading to see how to add placeholder text on dropdown fields.

<!---- Final Code ----->

<?php
/* Add a custom field to the field editor (See editor screenshot) */
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 class="admin_label_setting field_setting" style="display: list-item; ">
<label for="field_placeholder">Placeholder Text

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

</label>

<input type="text" id="field_placeholder" class="fieldwidth-3" 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){
?>
<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'])){

/* 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
}
}
?>
});
</script>
<?php
}
?>



<!---- End Final Code ----->


Note: Please delete the first php simbul and last ending of php after past this code in fu nctions.php of your theme.

Referral link:- http://www.wpbeginner.com/wp-tutorials/how-to-add-placeholder-text-in-gravity-forms/