Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Placeholder Text in Gravity Forms

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
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.

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).


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Mehrdad says:

    This code BROKE my site!

    PHP tags should not be included in the code that you add to functions.php

    Please fix the code! I can’t even access the back end of the site. :(

  2. Tammi L. Coles says:

    Thanks, folks, on the drop down field issue. It’s often the simplest things with GF that can stump me for hours!

  3. tqhung85 says:

    Thanks for sharing this great solution. However, I got the error that say “jQuery is not defined”.

    I found this solution that maybe helpful for other people:
    Replace:
    add_action(‘gform_enqueue_scripts’,”my_gform_enqueue_scripts”, 10, 2);
    function my_gform_enqueue_scripts($form, $is_ajax=false){

    With:
    add_action(‘gform_register_init_scripts’,”my_gform_enqueue_scripts”, 10, 3);
    function my_gform_enqueue_scripts($form, $field_values, $is_ajax=false){

  4. bamajr says:

    This script does a good job, and I haven’t noticed any issues, except that there are occasions with a Gravity Form element needs two “Placeholder Texts” defined, such as when you use the Email Field and the “Enable Email Confirmation” option and when you use the Name Field. I know there is an easy way around the Name Field issue, by using a single text field for both the first, and last name. However, I’m unaware of how to use Email Confirmation and still have placeholder text in both fields.

    I would also like to use Placeholder Text in place of the Gravity Forms Labels, removing the Form Field Labels altogether. If my placeholder text already says “First Name…” I don’t need a label, also saying “First Name” same goes for “Enter Email” & “Confirm Email”

  5. Matt Van Dyck says:

    Really love this bit of code but whenever I implement it into my functions.php file it causes my wordpress actions to not work… (whenever I logout, try to post, etc) when I try any action it gives me a blank page

  6. Abdel says:

    Very useful.. But what about when you have advanced fields like an address which has multiple fields like (street address, address line 2, city, etc…), how would the placeholder work for that ??

  7. Denis Lam says:

    The code seems broken and does not work anymore with the latest version of gravity forms. Anyone have same issue or knows of a fix?

  8. midwestartist1 says:

    This works as long as the form Does not Error Out. The Placeholders do not reload. If a required field is empty and they hit submit… the form displays the errors but all the placeholders are left blank.

  9. Kurt says:

    This solution didn’t work for me. I disabled all plugins except GF and set the theme to 2011. The placeholder field appears in the GF form edit screen and save the text. However, it didn’t appear in the form. I ended up using the add-on plugin.

  10. flavio says:

    when i try this i get an error:

    Parse error: syntax error, unexpected ‘<' in

  11. Tristan Zimmerman says:

    I love you. Thank you for saving me hours of my life.

  12. Emanuel Costa says:

    Thanks for sharing. Did gravityforms guys did any update or ETA on this? Best Regards.

    • Matt Valvano says:

      Gravity Forms has this feature in its latest BETA version. You can download it now if you have a subscription!

  13. Bruce Prock says:

    This is really good stuff and I appreciate you developing it. Works like a charm. Thanks again.

  14. Ron says:

    Do you know if it’s possible to use html in the field label? I’d like to add a help icon next to the label that can be used to display a popup video for assistance. Wanted to check before buying. Thanks.

  15. Jon Brown says:

    Thanks! This still seems to work on GF 1.7.2 (only lightly tested)

    Personally I’ve loved GF for years, but this (lack of native placeholder support even if it requires a JS fallback) and the lack of new form elements (like value sliders) is making GF look old and neglected. There are just too many features promised years ago that just never seem to get added. If it weren’t for the ubiquitous add-ons for Stripe, MailChimp, GF to CPT, etc… I’d leave it in the dust.

    Someone asked about making the placeholder text disappear on focus (rather than start of entry). Easiest way for most browsers is w/ a little CSS:

    input:focus::-webkit-input-placeholder { color: transparent; } /* WebKit < 19 */
    input:focus:-moz-placeholder { color: transparent; } /* Firefox 19 */
    input:focus:-ms-input-placeholder { color: transparent; } /* Internet Explorer 10 */

  16. Jeremy says:

    A solution to both the script loading before jQuery and the place holders disappearing would be to not use jquery.

    Replace:

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

    With:

    document.getElementById('input_<?php echo $form['id']?>_<?php echo $field['id']?>').setAttribute('placeholder','<?php echo $field['placeholder']?>');
    

    I will add however that neither the jQuery version or the revised version worked for me in IE. I ended up using this

    http://wordpress.org/plugins/gravity-forms-placeholders/

  17. Mark Hunt says:

    Anyone notice the placeholder disappears upon form validation? As soon as the fields highlight red their placeholders clear out of view…

  18. Steve D says:

    Great work on this guys,but just having one issue. The last bit, the jquery fallback, is being added before wp_head(), so jquery hasn’t yet loaded.

    How do I make this code load AFTER Jquery is active?

    Thanks again,

  19. CindyG says:

    This is great, thank you! However I cannot for the life of me figure out how to change the color of the font inside the field. I have tried every css path I could think of, with important! and even tried .css() and inline styles in the functions code itself. I got other styles to take, but “color” refuses to. Any suggestions? Unfortunately I can’t post a link here for privacy reasons, but if you email me I could send it to you.

    Many thanks.

    • Editorial Staff says:

      You can send us the link using our contact form.

      • CindyG says:

        I had to remove the code altogether for now – for some reason it created a problem where pages in wp-admin would go completely blank, for example after editing a post and clicking “update”, it would produce an empty white page. I checked into my database and other code, nothing else had caused that until I tried adding this in. I replaced the original functions file and everything went back to normal. Has anyone ever had that problem?

        • Chris says:

          I have this problem as well. When you publish/update posts it returns a blank page.

  20. Chris Quinn says:

    Gravity Forms truly is one of the best plugins. I was using the Auto HTML5 Placeholders plugin for Gravity Forms, but it was trying to add HTML5 placeholders for Checkboxes! So instead of hack up that plugin I did a search and found this post. This is a lot more efficient then the plugin I have been using. Needless to say you guys always have some of the best information when it comes to WordPress. I appreciate all the time you take to write tutorials like this!

    Thanks again!

  21. Duncan says:

    For some reason, my jQuery code is always inserted into the head twice. Why would that be?

    • Duncan says:

      In fact. I have some very strange things happening. I seem to have 2 copies of the jQuery script and 1 seems to place itself right in the middle of some other jQuery I’ve written in the head and the other is just after my nav. Logic says there should either be one in the head or just above the form itself. Very frustrating.

    • Chris Quinn says:

      When you say your code is inserted in the head twice…are you talking about of this script that you are using from WPBeginner? Or are you talking about some other jQuery code that you have implemented?

      If you are talking about the script from WPBeginner, then you do realize that you are not supposed to copy all 3 blocks of code.

      There are 3 blocks of code on this page – 1 of them is called “Final Code” – if you copy Final Code then you are done and do not copy anything else. If you look at the paragraph below that block of code it clearly states that you can read on and basically paste the following code 1 by 1 while learning about its functionality…

      In other words, if while following this tutorial you copy and pasted 3 blocks of code…then you would have everything twice.

      You should have either copied the “Final Code” block or the two other code blocks…not all 3…

  22. Bora says:

    Thank you for this and all the great material you put here.
    In my personal experience, Gravity Forms has been the worst plugin I’ve ever used. Didn’t work, wasted my money.

    • Editorial Staff says:

      Oh wow, you are the first person who told us that. We have been using Gravity forms for a few years, and it is by far the most superior contact form plugin for WordPress.

  23. Erik S says:

    This was exactly what I needed! I simply stuck it in a new PHP file and included it from functions.php and it worked perfectly.

    Thanks so much for the huge time saver!

  24. ADITYA says:

    Hey I tried this method it work perfectly fine if I am rendering only one form on a page. In my case I am rendering 2 different forms a particular page using this method (http://www.gravityhelp.com/documentation/page/Embedding_A_Form). The issue I am facing is ‘gform_enqueue_scripts’ gives me only one form object so I cannot add placeholder to my second form. Help me if you can

  25. Paul says:

    I think there’s a mistake in your code on line 45 of the full code:
    the correct hook name is ‘gravity_form_enqueue_scripts’

    • Editorial Staff says:

      At the time when we used this code, it worked 100%. If the hook names have been changed since, then we can’t vouch for that.

  26. David Kartuzinski says:

    Hi, I just found two plugins. I did try them BOTH but just one of them:

    1. http://wordpress.org/extend/plugins/gravity-forms-placeholders/
    https://github.com/neojp/gravity-forms-placeholders/blob/master/readme.txt

    This was the one I went with because it allowed selectively putting placeholders with the css class “gplaceholder” in individual form elements or on the whole form. So not automatically on every gravity form in the site.

    2. http://wordpress.org/extend/plugins/gravity-forms-auto-placeholders/

    I did not try this one because it said “auto”….

    Hope this helps someone.

    -DK

  27. David Kartuzinski says:

    I got the code copied, and with removing just the “{” from after the <?php – it works for me. I had to display: none; the labels in the forms though. However, using the code on the site, make all the Pages and Posts update/save hangup in a white screen. The data IS saved and the updates made, but it's troublesome. Anyway, to find out why this is occurring? This is an awesome solution for me, without of course the hanging up.

    Thanks.

    -DK

    • David Kartuzinski says:

      ps. I just purchased Gravity Forms, so it works. But remember I had to remove the “}” after the “<?php" and I had to close the <?php from my functions.php file.

  28. Scotty Vernon says:

    Hmm. This doesn’t seem to be working with the latest version of Gravity Forms :-(
    As soon as i hit submit without entering any content into the fields, validation kicks in and the labels reappear and the placeholders disappear.

    • Editorial Staff says:

      Haven’t tried this in a while. Not sure what could’ve gone wrong.

      • Scotty Vernon says:

        I know this is cheeky of me, but any chance you could take a look to see if something’s changed?

        I’m at such a loose end trying to get this to work :(

      • Jeff Golenski says:

        I don’t think it’s working either. I tried it earlier in the year and it was perfect, now there’s no effect.

    • Jamie Brewer says:

      The place holder text isn’t disappearing when I click inside the fields.

      WordPress – Version 3.4.2

      Gravity Forms – Version 1.6.7

  29. Tread says:

    Is there any way to target the “Other” field used with radio buttons or checkboxes? This solution works like a charm for everything except those fields.

  30. Thomas Barber says:

    cant put something that allows javascript injection from admin UI, allows anybody to run a malicious function and should not be included in theme. BAD

    Will write something that is useable in a commercial application and post.

  31. Marlon_Bedoya says:

    RT @FreelanceWP: How to Add Placeholder Text in Gravity Forms http://t.co/qNqPjkWj

  32. chood531 says:

    Hi,

    I’ve updated this script to work with IE. Thoughts?

    jQuery(function(){ $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__”).attr(‘placeholder’,””); jQuery(“#input__”).attr(‘value’,””); });

  33. Krogsgard says:

    @wp_smith That method doesn’t work with IE 8 and under I believe. Just fyi. cc: @syedbalkhi

    • wp_smith says:

      @krogsgard I’m ok with that as I don’t support < IE 8. But I do need it to work in FF and Chrome. Do u have an alternative? Or just saying??

      • Krogsgard says:

        @wp_smith A great guy named @billrobbins has an alternative that’s not published I don’t think, but works great

        • wp_smith says:

          @krogsgard Are you talking about adding a new GF custom field to the Adv Fields? Or something differnet?

        • Krogsgard says:

          @wp_smith it’s jquery that operates on a CSS class on fields you need it

        • billrobbins says:

          @Krogsgard @wp_smith I picked that up in the GF forum a while back.

        • Krogsgard says:

          @billrobbins @wp_smith Cool. I’ll find it and get it to you then, Travis.

        • wp_smith says:

          @krogsgard ok, but my code is creating a new field within GF to be used on the front end. See the pastebin: http://t.co/c7N82mmc

        • wp_smith says:

          @krogsgard @syedbalkhi’s code adds a field within the GF custom field. Mine adds a new GF field to be added to a form.

        • wp_smith says:

          @krogsgard And I don’t follow all of @syedbalkhi’s post. I adjusted almost everything.

        • Krogsgard says:

          @wp_smith all you need is the class applied to your field for this to work I believe. Sounds like what you need.

        • wp_smith says:

          @krogsgard I don’t think it’s that easy?? Want to shoot myself from stupidity if so.

        • Krogsgard says:

          @wp_smith Sent you a dm w/ a solution we’re using. Different from the others.

        • billrobbins says:

          @Krogsgard @wp_smith I just got home. Here’s a link to the code I use: http://t.co/KhIPEGaD

        • billrobbins says:

          @wp_smith I’ve been out at Christmas events at my kids school today, but I’ll look in a bit. You might try gravityhelp.com too.

        • wp_smith says:

          @billrobbins no problem. think I’ve got it now.

    • syedbalkhi says:

      @krogsgard @wp_smith yup thats correct. It doesn’t work in IE… Also noticed some errors on mobile browsers about populating the fields…

  34. nukecpower says:

    The place holder gone in ajax mode=true . Try with ajax=true, and submit with error message.

  35. ashbryant says:

    I have multiple form on the same page, which is causing me to get the “Cannot modify header information – headers already sent by…” error message. Do you know how I can edit the code to fix this?

    • wpbeginner says:

      @ashbryant Didn’t try it yet with multiple forms, but don’t think there is anything in the code that should be causing that.

  36. cporter says:

    I copied the code into the custom_functions.php file and I am not seeing any additional fields added into Gravity Forms?

  37. chumtarou says:

    Thanks very much for this – it works great in Chrome and Safari, but appears not to work for IE7, IE8 and Firefox 3.x. Any chance of getting those to work too?

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.