How to hide Gravity Form field labels when using placeholders

February 2, 2018: Added new section to address folks who have disabled Gravity Forms CSS.

We do a lot of custom Gravity Forms work and custom WordPress theme development. Over the years, the need to hide the Gravity Form field labels has come up a few times. In most scenarios, this pertains to simple forms such as a Newsletter signup form.

Did you know there is a simple solution for this with Gravity Forms that will allow you hide field labels or sub field labels as needed?

Form Accessibility

Before we dive in, I do want to note that for accessibility reasons, removing field labels is not recommended as it will make the form more difficult for users with visual impairments to use. The best practice approach is to use field labels to describe the type of information and the placeholders to provide users with an example of what that information should look like. With that said, let’s move on forward!

With this method, Gravity Forms will hide the labels but they are still “visible” to screen readers. Enjoy your guilty-free label-less forms.

GF Placeholders and Field Labels

In Gravity Forms 1.9, support for placeholders was added into core. This feature allows you to add placeholder text into a field input. This text will appear inside the input box so that users can see what type of information should be entered into that field.

In contrast, Gravity Form field labels are the labels that appear outside of the input box, either above it or below it.

Examples

Let’s see some examples. Here’s a form with default field labels.

Now, we’ll use the same form and add placeholders:

Lastly, let’s hide the field labels and leave only the placeholders:

The Code

As of Gravity Forms 2.4, this snippet is no longer required to activate this feature. If you are running Gravity Forms 2.4 or greater, the Field Label Visibility setting will automatically be available.

So now that we are all caught up on the terminology, if you want to add support to hide field labels on a field by field basis, simply add the following line of code to your themes (functions.php).

Comments

This doesn’t seem to work for the advanced fields like address, name, email, etc. Is there a way to leverage your code to enable hiding of advanced fields sub field labels outside of recreating those fields using standard fields?

Hi David, You can say that. In gravity forms when I hide the label, asterisk still shows above the field. Is there a way to hide the sign, even if the field is required like in this form https://ibb.co/nEKxr8 Which I made with the different plugin but I want to use gravity forms for the conditional logic functionality.