How to Remove Field Labels in a Form

October 18, 2021

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 on a certain fields. This guide will help you how to remove field labels into the form.

A. To Remove Entire Form Labels:

1. If you’d like to remove the entire form labels all at once, simply inject the following CSS codes to your form.

.form-label-left, .form-label-right, .form-label-top { display:none; } 


B. To Remove Certain Form Labels, Follow These Steps:

1. Get the label ID and add this code after it {display:none;}

Example:

#label_1 {display:none;}  <—This code will hide single label

#label_1, #label_2 {display:none;} <—This will hide two labels (you can separate ID’s by using comma “,”)

Explanation:

#label_1: This is the ID of a certain element. ID selector is used to specify a style for a single, unique element. ID is always defined with a hash symbol “#”.

{display:none;}: display property defines how a certain HTML element should be displayed , putting none value will totally removed the certain element.

How to get the label ID?

The easiest way to get label ID is to use the browser’s Inspect Element feature (browser’s like Chrome, Firefox, Safari). Please follow the steps below:

a.Highlight the field label and Right Click . Click Inspect Element

b. Copy the label ID under id attribute. 

To use it in the CSS area, just add the number symbol # as the prefix of the ID. E.g: #label_1. So, the final custom CSS codes will be: #label_1 {display: none;}

If you’d like to remove all the form label at once, you can use the class selector. Example: .form-label-left. The final codes will be: .form-label-left {display: none;}

c. After creating your CSS codes, (e.g. #label_1, #label_2, #label_3 {display:none;} ) just inject it  to your form by following this guide: How to Inject Custom CSS Codes. Don’t forget to save your form changes by clicking save button from the form builder.

Here’s an example form result:

Example Form: http://www.jotformpro.com/form/23137853151955

Generally, the guide above can be also used for removing other elements not just label. The steps are identical, just do the same process to retrieve other element ID’s. If you have questions or if you are having difficulties with any of the steps above, feel free to post it below.

Questions? Please let us know 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: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

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

Comment:

Podo CommentBe the first to comment.