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.

Hiding All Field Labels

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

.form-label {
display: none;
}

See How to Inject Custom CSS Codes to apply the CSS code to your form.

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 panel, go to Advanced at the top.
3. Open 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

6. Add a display: none; CSS declaration to the field label ID. For example, using the #label_4 field label ID, the code is 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.