WordPressWP Tutorials

How to Add Placeholder Text in Gravity Forms

166

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.

Gravity Forms Example with Placeholder Text

All we had to do was add a function using the Gravity Forms filters and use jQuery to output the text.

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.

  <?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  }  ?>

So first thing we had to do was add a placeholder value under Gravity Forms fields in the admin panel. To do that, you need to open your theme’s functions.php file and paste the following 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  }

This little bit of function will add a placeholder text field in your Gravity Forms backend. Example screenshot is below:

Placeholder Field in Gravity Forms

Now that we have added the field in the admin panel, you can go ahead and fill them out with the text you want. The next step is to actually display the text on the actual form. To do this, we will utilize jQuery. What you need to do is paste the following code in your theme’s functions.php file right after the previous code:

  /* 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  }

This will output the placeholder text on input fields and textarea fields and keep it validating. Now that we have covered this, we still needed to add placeholder text on our dropdown fields which this little snippet does not do for us. Thankfully Gravity Forms has that built-in by default.

Add Placeholder Text in Gravity Forms Drop Down field

All what you really need to do is create a label with a blank value. Yes, that sounded confusing to us when we first heard it as well. But it really isn’t. So add a drop down field in Gravity Forms. Click on the checkbox that says Enable Values. Then add a Label with a blank value. Refer to the screenshot below:

Drop Down Placeholder Text in Gravity Forms

That’s all you have to do to add placeholder text in Gravity Forms. You are probably wondering if this is the beginner friendly WordPress contact form plugin, then why haven’t it added something this simple already? Well, we wondered the exact same thing. So our founder @syedbalkhi got in touch with one of the partners at Gravity Forms, Carl Hancock. Below is the conversation they had:

So as you can see that this is something that they are aware of, and it will be added in the future releases. To see all the awesome things Gravity forms can do, simply check out our post about Gravity Forms.

Credit to the awesome function and jQuery snippet goes to Jorge Pedret (@jorgepedret).

You might also like More from author