How to Use Gravity Forms Placeholders & Hide Field Labels

THIS POST MAY CONTAIN AFFILIATE LINKS. PLEASE READ OUR DISCLAIMER FOR MORE INFO.

Placeholders was introduced with the release of Gravity Forms version 1.9. However, you still had to input one line of code in order to enable the ability to hide the form labels completely.

As of this update, NO CODE IS REQUIRED to enable the ability to hide the form fields. This feature is now available out of the box. BUT if you need the code because you’re running an old version, scroll to the end of this post.

With this feature you can use less space with forms, and make the design look cooler!

What Are Placeholders and Labels

GForms Placehoder

As depicted below, the red circles indicate Placeholders and the green squares are field labels. So placeholders are the text inside the actual filed that disappears when you click in the field to start typing.

How to Add a Placeholder

Adding placeholders is simple, when editing the field go to the “Appearance” tab and the first option is “Placeholders”.

Just populate the field with the text you want to display.

placeholder field in gravity forms

How to Only Use Placeholders?

This WAS the tricky part. In version 1.9.1 they decided to hide the options that allow you to hide the field labels and sub labels.

These are the fields you need to change to hide the form field labels.

Image take from Gravity Forms Beta 2.5

When you select “Hidden”, the field label is removed from the the form. You can also hide the Sub-Labels as well, for the fields that support sub-labels.

Below, in the red box, is how the fields will look when using placeholders and hidden fields, compared to the default field display.

Enabling with Code – OLD VERSIONS ONLY

ONLY use this option if you are running an old version of Gravity Forms. But you should really update!

Below is the one line of code you need to add to your functions.php theme file to allow you to hide field labels.

Just copy and past it into your functions.php file on it’s own line. As shown in image below.

That’s it! Add that one string of code and you’ll have the ability to control field labels and take full advantage of Gravity Forms Placeholders!

Have questions, need help…use the comments bellow.

  • This was fabulous! Just what I needed as other placeholder plugins broke other important features in GF1.9.
    BUT one thing this code seems to deactivate also is the ‘required’ option. Without the label GF ignores the ‘required’ option and allows users to move on.
    Do you know why or have a fix?

    • Hey, glad that this was helpful!

      I believe the issue isn’t that it ignores the “required” feature, rather because the field has a “placeholder” the field is technically populated. Thanks for bringing this up, I hadn’t tested it.

      • Yes. Now Gravity Forms is broken, even after removing the line of code. . Moving description labels, using custom classes, etc. will only display correctly in Preview mode. None of these changes appear on the site itself. I’ve trashed and recreated forms, trashed and re-installed GF. It appears permanently broken now.

  • Hi Chris, this worked perfectly thank you so much.

    For those that are a little cautious when in comes to adding code to functions.php and are using WordPress – you can download a plugin called “code snippets” here is the link: https://wordpress.org/plugins/code-snippets/

    This plugin will allow you to safely add code snippets to your functions.php file without having to use the functions.php editor.

    Also, Chris, I hope you don’t mind, I would also like to share http://www.trydivi.com. It’s a free resource I have set up for anyone that wants to try the greatest page builder/visual editor and theme on the market. It works fantastically with Gravity Forms and also has a plugin to help you style gravity forms in-line with the Divi theme.

    Hope this helps everyone!

  • I have your above advice bookmarked for all the sites I develop. Thank you kindly. I can’t count how many times I’ve used this tip. Thank you kindly!

  • This is a great option but after adding the code the site broke, I had to remove it from cPanel to activate the website again. Can you tell me why is this happening? I did add security to the website but as I tried to do it in the cPanel it happened again.

    Thanks,
    Max

    • Max,
      You added this code to your functions.php file and it broke the site?.

      add_filter( 'gform_enable_field_label_visibility_settings', '__return_true' );

      – Chris

  • Hi,

    I added the code and everything worked fine, but I would like to remove it and make the field labels visible again as they aren’t right now. I did delete the code from my Functions.PHP, but they are still unvisible. How could i get back to how it was?

    Thanks in advance!

      • Does this still work? I’m using GF 2.0.7 and after I added the code to functions.php, I still don’t see the option to hide the labels.

      • Hey Fred.

        Thanks for commenting!

        I just used it last week so I’m pretty sure it does.

        If you want me to take a look, you can send a screen shot of your functions page and a screenshot of your gforms options.

        Thanks
        Chris

  • Hi. Was able to remove the field labels using the code snippet. Worked great but I have a gap between my fields which I’m guessing is the space where the field label would be shown if it wasn’t hidden. Is there a way to remove this gap so the fields stack on top of each other with little space between (say 5px)? I’m not great with CSS.

  • Get the latest news, tips, and how-tos all delivered to you!

    Your information is used only for email communications by GravityRanger. We do send the occasional product promotion email.

    Name*
    This field is for validation purposes and should be left unchanged.


    >