How to Use Gravity Forms Placeholders & Hide Field Labels

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.

0 0 votes
Article Rating
Subscribe
Notify of
guest

35 Comments
Inline Feedbacks
View all comments
Joe
Joe
4 years ago

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.

Ries
Ries
4 years ago

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!

Fred Dawli
Fred Dawli
Reply to  Chris Eggleston
4 years ago

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.

Max
Max
5 years ago

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

Joe Simmonds
5 years ago

Thank you for this, Chris! Really appreciate the help 🙂

Laura
Laura
5 years ago

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!

reiko
5 years ago

Worked great – thank you!

Darren Wagstaff
5 years ago

Great post and so simple to use. It works a treat.

Rob Gibbins
5 years ago

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!

Lee
Lee
6 years ago

Huge thank you!!!!

berita online
6 years ago

thanks for sharing !

Jeeni
6 years ago

Works perfectly – thanks for sharing!

Jonathan
6 years ago

Wow, super helpful. Thanks for posting! I really would like to know why they don’t enable this by default…

Derp
Derp
Reply to  Chris Eggleston
5 years ago

screen readers should be able to read placeholders… or shouldn’t be blind

Kupodivu
6 years ago

Thanks, really helped.

Gina
6 years ago

Perfect, thanks!

Brian Linger
6 years ago

Great post, thanks! Do you know if there’s a way to hide the sub-label fields?

Bjorn
Bjorn
Reply to  Brian Linger
6 years ago

You find the option to hide sub-label fields under the Appearance tab => Sub-Label Placement => Hidden

Patrick
Reply to  Bjorn
4 years ago

I don’t have the option to hide in that dropdown you are talking about. Does it only appear when you add the line of code in this tutorial? Thanks in advance!

Chris Clark
Chris Clark
6 years ago

Just tried this. Works in the GF editor and preview, but not on the site itself.

Chris Clark
Chris Clark
Reply to  Chris Eggleston
6 years ago

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.

pphant
pphant
7 years ago

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?

Mike
Mike
Reply to  Chris Eggleston
6 years ago

Is this still an issue? I’m not seeing this as a problem.

hans
7 years ago

Thanks,

But with Dynamik and Beaverbuilder I copied it, but strangly enough it does not work.

Agen Poker Terpercaya
7 years ago

Hi there ,

Thank Your your information about Forms Placeholders & Hide Field Labels . This is a really help me