Gravity Forms – hide label

Introduction

Overview

Sometimes you need your Gravity Forms to take up less space and look better. In this article I'll show you how to exactly that, even if you're not very tech savvy with WordPress.

In the past, hiding the labels on a Gravity Form was simple. But for some reason, as of version 1.9.1 they decided to make it unfriendly for non-tech users and disabled the option to hide the field labels and sub labels.

But we've found several ways to get around this. Before you start, make sure to update your GravityForms plugin to the latest version.

Function

This is what the Form editor looks like when you're working in GravityForms:

Notice that there's no option to hide your labels or sub-labels.

To make that option appear you'll have to add a function to your theme's functions.php file. The easiest way to do that is to install a plugin called My Custom Functions. I recommend using this plugin because it's safe and your functions won't be overwritten or removed when you perform a routine update on your theme.

1. Go to WordPress => Plugins => Add New => Search. Find, install and activate the “My Custom Functions” plugin.
2. In your WordPress Dashboard go to Settings => PHP Inserter.
3. Copy and paste the code below into the Main => Functions (PHP code) field:
   

   add_filter( 'gform_enable_field_label_visibility_settings', '__return_true' );

   

4. Toggle the on/off switch to ON.
5. Click Save.

How to hide the field label in the GravityForms form editor

Let's create a new Gravity Form and test our new ability.

When you open the GravityForms form editor you should now see a new drop-down called “Field Label Visibility”. In order to hide the field label, just change this value to to Hidden.

Awesome, we have made it!

What if my labels still appear?

The above method doesn't always work, depending on your particular combination of plugins, themes, and WordPress version. If you're still seeing field labels in your Gravity Forms, you'll have to add some specific code to your theme's CSS file.

1. From your WP Dashboard go to Appearance => Customize.
2. Click on Additional CSS.
3. Add this code:
   

   .gform_wrapper .hidden_label .gfield_label,
   .gform_wrapper label.hidden_sub_label,
   .gform_wrapper label.screen-reader-text {
       clip: rect(1px, 1px, 1px, 1px);
       position: absolute!important;
       height: 1px;
       width: 1px;
       overflow: hidden;
   }
   
   .gform_wrapper li.hidden_label input {
       margin-top: 12px;
   }
   
   .gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container input[type=text],
   .gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container select {
       margin-bottom: 12px;
   }
   
   .gform_wrapper .left_label li.hidden_label input,
   .gform_wrapper .right_label li.hidden_label input {
       margin-left: 3.7%;
   }
   
   .gform_wrapper .hidden_label input.large,
   .gform_wrapper .hidden_label select.large,
   .gform_wrapper .top_label input.large,
   .gform_wrapper .top_label select.large {
       width: 100%;
   }

    

4. Click Publish.

Using the Hide Gravity Form Label WordPress plugin

If you prefer not to mess with custom code then another option is to use the Hide Gravity Form Label WordPress plugin, which is a free plugin that will activate the hide label functionality on your GravityForms forms.

1 – Simply search for this plugin in WordPress => Plugins => Add New => Search => “Hide Gravity Form Label” (without quotes)

2 – Download and install it.

3 – You don't need to do any configuration for this plugin. It's all good to go and will automatically update your GravityForms form editor with the new options.

Using the plugin vs the custom code

In general, you want to avoid installing additional plugins to your site whenever possible. If you can solve an issue with a little custom code like we did in the first step of this tutorial, it's infinitely better (and safer) than using a plugin.

The reason for this is because plugins tend to bog down your site performance, create a larger attack surface for hackers (especially if the plugin doesn't get updated regularly), and creates potential for conflicts. The plugin we discussed in the section above, for instance, hasn't been updated in 9 months. That could very well mean that it simply doesn't NEED an update. But it also could mean that it needs one but the plugin developer just hasn't done it.

In any case, if you run into any trouble with the topic of this article, just leave your comment below and our team will be happy to help!