How to Use Gravity Forms Placeholders & Hide Field Labels

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

With Gravity Forms, WordPress form builder plugin, version 1.9, they added the ability to use placeholders. Giving you the option to display field labels or just use the placeholder.

I love this feature because I can use less space with my forms, and make the design cooler!

What are Placeholders and Labels

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.GForms Placehoder

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 do I only using 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 your default options:

Why they did this, I have no idea! It doesn’t really make sense to me, but thankfully you can override the default with one line of code you add to your themes functions.php page.

These are your options after adding the code:

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 is the updated from with field labels removed from all fields.

gravity forms no field labels

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

https://gist.github.com/chrisegg/c9100f29791d83fb4878.js

Just copy and past it into your functions.php file on it’s own line.

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!

Question? Need help? Use the comments below!

Advertisements

35 thoughts on “How to Use Gravity Forms Placeholders & Hide Field Labels”

  1. 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?

    Reply
  2. 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!

    Reply
  3. 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!

    Reply
  4. 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

    Reply
  5. 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!

    Reply
  6. 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.

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.