How to Hide Field Labels on Your Form

May 27, 2023

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.
Steps to get an element's field ID in Jotform Form Builder
  1. 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 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. 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;
  1. Inject the CSS code into your form.
Steps to inject custom CSS in Jotform Form Builder
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.


  • Rebecca Pitts - Profile picture
  • Samuel  - Profile picture
  • EJP Central - Profile picture
  • Cam Beaudoin - Profile picture