What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to hide form sub labels with CSS

    Asked by ezchoicefinancial on June 12, 2015 at 03:38 PM

     

    Hi there i am having a bunch of issues with my form that i need help with.

    The form in question is form id  51376919239971

    1- The first issue is .form-sub-label under the phone number. I don't want that to be there at all. it has a minimum height of 13px and margin-top 1 px. i tried manny different css commands and nothing worked. i won't list them all but here is the last one :

    .form-sub-label { font-size: 0.1em; margin-top: 0px!important; min-height: 1px!important; display:none; }

    it looks funny on the form because there is too much space between the phone number field and source field

     

    2- I want the "form input" width of  Phone number, Source, and Reason to be the same width as Name, Email, And Zipcode in both DESKTOP and Mobile. I looks funny on desktop and mobile in my opinion how the width doesn't match. Essentially i want the Phone number, Source, and Reason to match the width

    of Name, Email, And Zipcode in both desktop and mobile . see image below

     

     

    3-  The drop down arrow for "Source and Reason" Does not show on my mobile phone using safari and chrome. Maybe cause they are not wide enough ( i made them wider though and they still dont show) . so please i need the drop down arrow to show. see image below:

     

    4- Form html has too much space around it. in other words the space between the form html and reason as submit is too much, is there a way to decrease it . see image below

     

    4- Is there a way to make the zip-code code field only populate the numeric keys on mobile phones just like the telephone field does ?

     

     

    Page URL:
    demo.ezchoicefinancial.com

    hide sub label custom css
  • Profile Image
    JotForm Support

    Answered by Mike on June 12, 2015 at 05:26 PM

    There is a CSS error caused by missing closing curly brace on injected CSS.

    You can add it to fix the error.

    Then, hide the sub label with the next CSS:

    .form-sub-label {
    display: none;
    }

    Other questions have been moved into separate threads, so we will be able to address them properly.

  • Profile Image

    Answered by ezchoicefinancial on June 12, 2015 at 05:41 PM

    i cant seem to fix the curly brace no matter what i do 

  • Profile Image

    Answered by ezchoicefinancial on June 12, 2015 at 05:46 PM

    i added the extra curly brace in the end and now my form is super narrow. what should i do to make it look like before

  • Profile Image
    JotForm Support

    Answered by Mike on June 12, 2015 at 05:46 PM

    The issue seems to be fixed. However, added sub label CSS is currently within @media mobile CSS rule. So you might consider moving it, or adding an additional CSS rule for desktop version.

    Thank you.

  • Profile Image

    Answered by ezchoicefinancial on June 12, 2015 at 05:50 PM

    good catch but i have no idea how to do so . i thought i moved above the media scope thingy but that didnt change anything. Now even my font is gone. what a mess.

     

    i should have not asked for help. now my form is all messed up. the background is not transparent anymore  and there is too much padding in top and bottom 

     

    i think i fixed by using the old code. the design css kind of sucks. i still need to know about my other questions. where threads opened for those?

  • Profile Image

    Answered by raul on June 12, 2015 at 06:27 PM

    We're sorry to hear that your form is all messed up.
    You can always use your form's revision history to revert unwanted changes in your form.

    Regarding your threads, I found 3 recent besides this one. You can find the links below:

    http://www.jotform.com/answers/587658-Drop-Down-arrows-are-missing-on-mobile-form#1
    http://www.jotform.com/answers/587660-How-to-decrease-white-space-around-Text-html-field-using-CSS#1
    http://www.jotform.com/answers/587657-How-to-set-fields-to-the-same-strict-width#1

  • Profile Image

    Answered by ezchoicefinancial on June 15, 2015 at 02:03 PM

    item 4 was never addressed

    4- Is there a way to make the zip-code code field only populate the numeric keys on mobile phones just like the telephone field does ?

     

     

    Page URL:

  • Profile Image
    JotForm Support

    Answered by Mike on June 15, 2015 at 02:26 PM

    The 4th question has been moved into a separate thread:

    http://www.jotform.com/answers/589063

    We will update it as soon as possible.