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

    Light gray background is smaller than the textboxes - how can I fix this?

    Asked by Russ563 on March 06, 2015 at 10:36 PM

    I was recently playing around with 'Designer' & 'Themes', and at some point I got to where couldn't go back. So I changed it to the closest thing I could find to what I had/liked. Now there are at least 3 things that don't look right:

    1. The light gray is not all the way behind the input field.

    2. The dark gray & light gray don't lineup on t he right side.

    3. The input field for phone numbers is smaller than the 10 digits in a number.

    Thank you for any help.

    Page URL:
    http://form.jotform.us/form/41748752369164

    Screenshot
  • Profile Image

    Answered by Sean on March 07, 2015 at 08:55 AM

    I did a test with the CSS code below and it happens to work just fine.

    .form-input-wide{
    width: auto !important;
    }

    #cid_4, #cid_25, #cid_53, #cid_56,
    #cid_27, #cid_26, #cid_76, #cid_89,
    #cid_110{
    height: 35px !important;

    }

    Please follow this guide to inject the CSS code:
    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes/

    I have separated each issue so that they can be addressed separately. You can follow the updates made on each thread here:
    http://www.jotform.com/answers/528716 
    http://www.jotform.com/answers/528717 


    Thank you


  • Profile Image

    Answered by Russ563 on March 07, 2015 at 10:56 AM

    Thank You, fixed on all except 'Birth Date'.  (hidden till you choose a category)

  • Profile Image

    Answered by Sean on March 07, 2015 at 12:09 PM

    Sorry about missing that one. Ensure that you replace the code provided above with the one provided below.

    #cid_4, #cid_25, #cid_53, #cid_56,
    #cid_27, #cid_26, #cid_76, #cid_89,
    #cid_110, #cid_24{
    height: 35px !important;
    }

    Do let us know the outcome.

  • Profile Image

    Answered by Sean on March 07, 2015 at 12:15 PM

    I did some more checks and it appears that there were multiple fields hidden. Please use this code instead.

    #cid_4, #cid_25, #cid_53, #cid_56,

    #cid_27, #cid_26, #cid_76, #cid_89,
    #cid_110, #cid_24, #cid_106, #cid_107, #cid_108{
    height: 35px !important;
    }

  • Profile Image

    Answered by Russ563 on March 07, 2015 at 12:37 PM

    Thank you.

    There are still about 5 more fields that need to be fixed, although I figured out the pattern and can fix them myself.

    But just like my other question, I don't understand why it isn't automatic. Why do I need to change each field individually?  Is it by any chance caused by some of the other CSS code in my form? I understand some of it but not all.

     

    Edit:

    I fixed all but PayPal....

  • Profile Image

    Answered by Sean on March 07, 2015 at 02:12 PM

    Yes it is possible that other CSS codes can be at fault. I tired multiple scenarios of the class for those fields but they don't seem to respond to my propose CSS adjustments. Sadly, I ended up targeting each affected field to have them adjusted.

    What is the issue that you are having with the PayPal field?

  • Profile Image

    Answered by Russ563 on March 07, 2015 at 03:05 PM

    Same as original question.

  • Profile Image

    Answered by Shadae on March 07, 2015 at 04:08 PM

    Hi,

    Please add the following code for the PayPal field:

    #cid_113 {
    height: 35px !important;}

    As well as you can use , #cid_113 and add it to the current code you have injected.

    I hope this helps, please inform us if you need further assistance.

    Thank you.

  • Profile Image

    Answered by Russ563 on March 09, 2015 at 10:19 PM

    Yes, Thank you. All I needed was the 113. I couldn't find that number on my end.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 10, 2015 at 02:52 AM

    Hello Russ563,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by Russ563 on September 12, 2015 at 07:05 PM

    I can't seem to find these numbers on any of my forms?!?

    I have a new form:

    http://form.jotformpro.com/form/52546489055969

    That needs the 'Early Bird' field fixed.

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 13, 2015 at 01:08 PM

    Append this CSS codes. This should fixed everything as well as the new fields you will add.

    .form-input-wide {

        display: inline-block;

    }