https://gravitywiz.com/how-to-hide-gravity-form-field-labels-when-using-placeholders/


How to hide Gravity Form field labels when using placeholders

Last updated | Written by 39 Comments

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

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

Here is an example of a form using the default field labels:

gravity-form-with-field-labelsField Labels Only

Here is an example of a form using the default field labels and placeholders:

gravity-form-with-field-labels-and-placeholdersField Labels and Placeholders

And lastly, an example of a form using only placeholders:

gravity-form-with-placeholders-onlyPlaceholders only

The Code

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). Make sure to remove the opening and closing php tags

add_filter( 'gform_enable_field_label_visibility_settings', '__return_true' );

What this code does is adds a Field Label Visibility dropdown under the Appearance tab in your Gravity Form field (see screenshot below).