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 do I reduce the vertical space between some of my text boxes?

    Asked by MasonRoberts on September 08, 2016 at 08:47 PM

    I would like to reduce the vertical space between some of my text boxes, not the entire form. I have one section that has large gaps between the Text Box heading and then the Text Box question underneath. I have found where the reduce the vertical space for form overall, but I only want to reduce the space for some select boxes. Can you help? Thank. 

    Screenshot
    text boxes reduce spaces CSS codes vertical spaces
  • Profile Image
    JotForm Support

    Answered by Kiran on September 08, 2016 at 11:37 PM

    Could you let us know the fields that you want to reduce the vertical space so that we can provide you with the CSS code to apply on your JotForm?

    We will wait for your response. Thank you! 

  • Profile Image

    Answered by MasonRoberts on September 14, 2016 at 07:34 PM

    Thank you for getting back to me. I am looking to reduce the space between each heading and the boxes underneath. For example, Credit Card Repayment is sitting to high from the two boxes underneath of Limit and Amount per month. I would like to bring them together a bit more. The same for the heading Mortgage Repayment, Investment Mortgage Repayment, and Car Loan. I appreciate any help you may be able to offer. Thanks, Samantha. 

  • Profile Image
    JotForm Support

    Answered by Mike_G on September 14, 2016 at 10:10 PM

    I have checked your form and the image below shows what I see:

    To my understanding, you would like to reduce the spaces I pointed using red arrows, correct?

    To do that, you can add the CSS codes below to your form.

    li#id_223, li#id_226, li#id_229, li#id_232, li#id_235, li#id_236, li#id_222 {

        height: 45px !important;

    }

    The instructions on how you can add CSS codes to forms is found in this guide: How-to-Inject-Custom-CSS-Codes

    I hope this helps. If you need any further assistance, please feel free to contact us anytime. Thank you.

  • Profile Image

    Answered by MasonRoberts on September 18, 2016 at 09:19 PM

    Yes. This is perfect. Thank you very much. I have completed your instructions and it has worked perfectly.

    One other thing, when the form is completed, and an email version sent to us, these 7 headings under Monthly Fixed Expenses to not show/print out on our end. So when it is time for our office to review the data and work with it, there are no headings, just numbers that the the clients has entered to answer the question. I have attached a screen shot that shows how the headings in this section alone just stop. Can you help with this?
  • Profile Image
    JotForm Support

    Answered by Chriistian on September 18, 2016 at 10:51 PM

    I am glad to know that my colleague's code worked for your requirement. Your latest issue seems to be related to the email notification, which is a different feature from the one on this thread. As such I have decided to move your question to a new thread. We shall answer your concern on that thread, which you can view through this link: https://www.jotform.com/answers/935421.
    Regards.