Why are the field labels not displaying on my form?

  • drabiner
    Asked on August 21, 2017 at 4:38 PM

    I put together a form and it looks fine, but then I preview it and some of the question headings are missing.  I can't figure out how to get them to show on the customer facing form.

  • Support_Management Jotform Support
    Replied on August 21, 2017 at 5:49 PM

    Looks like this was an imported form (based on the name/title of it) and the original form might have been setup to hide the field labels. To make them appear, inject the following CSS codes to your form:

    .form-label {

        display: block !important;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes 

  • drabiner
    Replied on August 21, 2017 at 6:15 PM

    I am having an issue with formatting.  I am not using CSS code.  I have a simple form, I applied a background and some of the questions do not show on the form when I publish.  The questions do appear when I am building the form.  I tried widening the form, and that just makes it worse.

  • Kevin Support Team Lead
    Replied on August 21, 2017 at 7:38 PM

    Apologies for the inconveniences this may have caused to you. 

    I have been reviewing your form and noticed the field labels are hidden by default, even though there is not any setting or current injected code to the form. This may be due to the theme that has been applied to your form, this can also be seen if you inspect the current CSS code for the labels on your form: 

    Why are the field labels not displaying on my form? Image 1 Screenshot 20

    I would recommend you to follow my colleague's advice, please inject the code he provided in order to display the labels again on your form as the code will override the theme's code. 

    Please let us know if you have any question. 

  • drabiner
    Replied on August 21, 2017 at 9:56 PM

    Hi,

    I don't know how to access the CSS code.  When I open CSS In the builder it does not show what you include in your response.  I am a novice and do not know how to access this.

    thanks,

  • John_Benson
    Replied on August 21, 2017 at 11:27 PM

    I have created a screen animation guide on how to add the Custom CSS Code to the form. 

    1. Open the form.
    2. Click the Form Designer button.
    3. Go to the CSS tab.
    4. Paste the Custom CSS Code. Here's the code that you need to copy:

    .form-label {

        display: block !important;

    }

    5. Click the Save button when you're done.

    Here's the screen animation guide:

    Why are the field labels not displaying on my form? Image 1 Screenshot 20

    I hope that helps. If you need further assistance, please let us know. 

  • drabiner
    Replied on August 22, 2017 at 7:58 AM

    Thank you!!!