How to Hide Field Labels on Your Form

You can use CSS if you need to hide your form’s field labels to match your site’s style or simply don’t like to display the field labels. This guide shows how to create the CSS code for hiding your form field labels. To apply the CSS code to your form, see How to Inject Custom CSS Codes.

Hiding All Field Labels

To hide all field labels on your form, apply the following CSS code:

.form-label {
    display: none;
}

Hiding Specific Field Labels

To hide certain field labels

1. In the Form Builder, select the element’s gear icon to open properties.
2. In the properties pane on the right, go to Advanced at the top.
3. Scroll down and select Field Details.
4. Take note of the field ID.

5. Get the first numeric part of the field ID right after the first underscore and append “#label_” to it. This will be the field label’s ID.

For example:

Field IDs	Field Label ID
#input_4	#label_4
#first_7, #last_7	#label_7
#input_10_addr_line1, #input_10_addr_line2…	#label_10
#input_12_0_0, #input_12_0_1, #input_12_1_0…	#label_12

6. Add the display: none; CSS declaration to the field label ID.

For example, using the #label_4 field label ID, the code will be as follows:

#label_4 {
    display: none;
}

You can also apply the declaration to multiple comma-separated field labels using a single rule:

#label_4, #label_7, #label_10, #label_12 {
    display: none;
}

7. Inject the CSS code into your form.