Overview

Hiding labels and sub-labels is a good way to make your form look short and compact. When you hide labels and sub-labels then you can use placeholders in form fields to convey what data should be filled. In such cases, the placeholders should look good and you can do that by using the Gravity Forms Styler plugin.

There are three methods to hide labels and sub-labels in Gravity Forms.

1. Hide all of them in one click using the free Gravity Booster plugin.
2. Hide them by changing the setting in each field.
3. Hide them using Custom CSS

In this article, I will explain all three methods in detail.

Hide Labels and Sub Labels using Styles & Layouts for Gravity Forms.

Gravity Booster is a free WordPress plugin using which you can design and customize the look of your forms without using any CSS. One of its features is the ability to hide labels and sub-labels in one click.

Step by Step tutorial using Gravity Booster

• First, go to the website’s dashboard and then click on Add New under the Plugins menu.
• Search for the ‘Gravity Booster’ plugin and then install and activate it.
• Now from your website’s backend go to Forms -> Booster.
• You now need to select the form for which you want to hide labels and sub-labels.
• After selecting form you will see plenty of design controls. Open the Field Labels section and then click on the ‘Hide Labels’ setting.
• Now go to the ‘Sub Labels’ section and then click on the ‘Hide Sub Label’ setting.

The good thing about using the Gravity Booster plugin is that you get a live preview of the changes. This way you will know even before making the changes live whether your form is looking good or not without labels and sub-labels.

If you liked the new design of your form then click on the ‘Save’ button. This makes the design changes live on your website.

Hide Labels and Sub-labels using Gravity Forms settings

This method can be a pain to follow if you have a large form because you need to go through each field manually and hide the labels and sub-labels. Also, you don’t get an immediate live preview so, just in case you don’t like the look of your form you will have to revert all changes manually.

Note: This feature is only available if you are using Gravity Forms v2.4 or later

Here is the Step by Step Tutorial

• From your WordPress dashboard go to Forms and then edit the form.
• Now expand the settings section for the field by clicking on it and then go to the Appearance tab.
• Here you will see the Field Label Visibility and Sub-Label Placement option depending upon which field you are editing.
• Select the Hidden option under the above settings.

If you face any issue with any of the above methods then let me know in the comments section and I will get back to you with a solution.

Hide Labels & Sub Labels using Custom CSS

You can also hide labels & sub-labels using custom CSS code. Using this method you can hide field sublabels for specific field types as well. Use the following code and paste it into your child theme’s stylesheet or any custom CSS plugin you are using on your website.

Code Explanation

Replace FORMID with the actual form ID.

In the above code, we have multiple selectors for sublabels separated by commas. If you look closely at each selector then you can figure out the element it is targeting.

body #gform_wrapper_FORMID .gform_body .gform_fields .gfield .address_line_1 label

The above selector targets the Address Line 1 sub label which displays the address field. You can remove any selector for which you don’t want to hide a sublabel.