How to Remove Field Labels in a Form

Last Update: December 28, 2013

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!


4 Comments...


   
John (July 18, 2013 at 07:49 AM)

Hello, anyone who can help on how to remove com_content from a text area. I need it to appear as a watermark

View Answer


   
LegalJeff (April 17, 2014 at 08:00 PM)

I removed the year field but the sub-label still remains, how do I remove that.
http://form.jotform.us/form/40922964390156

View Answer


   
Christopher (February 04, 2016 at 10:50 AM)

All doing this did was for me was to remove the entire input box where you enter the information. Not the field label.


   
cherishoriley (May 14, 2016 at 03:46 PM)

how do I find my form on my account I want to change my time option it does not have a drop down menu as listed hours it has options? States option 1 2 3
would like it to have hours

View Answer


Send Comment