How to Hide Field Labels on a Form

May 20, 2022

Some users prefer not to display field labels to match the form styling on their site or they simply don’t like to display field labels of certain fields. This guide will help you how to hide field labels on a form.

How to Hide All Field Labels

Injecting the following CSS code into your form will hide all the field labels:

.form-label {
    display: none;

For more information, see “How to Inject Custom CSS Codes”.

How to Hide Specific Field Labels

To hide certain field labels, follow these steps:

  1. Click the gear icon to open the form element’s properties panel.
  2. Go to the Advanced tab.
  3. Scroll down and expand the Field Details section.
  4. Take note of the Field ID.
  1. Get the first numeric part of the Field ID right after first the underscore and append “#label_” to it. This will be the field label’s ID. For example:
Field IDsField Label ID
#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
  1. Build the CSS. Using the field label ID #label_4 as an example, 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. For example:

#label_4, #label_7, #label_10, #label_12 {
    display: none;
  1. Once you have the CSS, inject it into your form.

If you have questions or if you are having difficulties with any of the steps above, feel free to post them below.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum:

Contact Jotform Support:

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


  • EJP Central
  • Cam Beaudoin