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

    Form Layout: How to reduce the space between the field of the form?

    Asked by jadams3243 on March 12, 2016 at 01:16 PM

    I am trying to reduce the amount of space between each of the form tools that I have placed on my form.  I have already changed the question spacing on the field styles and that does not seem to work.  What else controls this? I am also having a spacing problem the text field that I created.  The lines seem to be double spaced which is not what I want.  I would like them to be single spaced.  My form id is 60713901572149#.

     

    Jim Adams

    Page URL:
    https://www.jotform.com//?formID=60713901572149#

    Screenshot
    form spacing form tools text field problem tools
  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 12, 2016 at 01:37 PM

    Try injecting this CSS code:

    #id_13,

    #id_26,

    #id_35,

    #id_37{

        margin-top:-90px;

    }

    Do let us know if it helps.

     

  • Profile Image

    Answered by jadams3243 on March 12, 2016 at 08:46 PM
    Can u give instructions on how to do this please.
    Jim Adams
    President
    EMSIMAGING
    615-449-1583 x154
    www.emsimaging.com
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 12, 2016 at 09:17 PM

    Sure, while on the Form Builder you only need to open the form's Preferences and then click on Form Styles and paste the CSS code provided above on the Inject Custom CSS area as shown on the image below. 

    Here is my cloned form with the result: https://form.jotform.com/60717807483967

  • Profile Image

    Answered by jadams3243 on March 12, 2016 at 09:46 PM
    Hey Kevin,
    I was able to get to the CSS editor, but do I just paste that code anywhere? There is a bunch of code already in there and I don't know where to put this code.
    Also, I have another issue. I tried this form on an Ipad with Safari browser. The fields do not display properly at all. Does Jotform support Safari on Ipad?
    Jim Adams
    President
    EMSImaging
    615-449-1583 x204
    www.emsimaging.com
    "Information Management Solutions"

    ...
  • Profile Image

    Answered by jadams3243 on March 12, 2016 at 10:46 PM
    Also, please look down in your cloned form and you will see that the alignment of some fields are now bad.
    Jim Adams
    President
    EMSImaging
    615-449-1583 x204
    www.emsimaging.com
    "Information Management Solutions"

    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 13, 2016 at 12:04 AM

    To solve the issue with the alignment, replace the code provided above with this one: 

    li#id_36 {

        height: 50px;

    }

    #id_13,#id_26,

    #id_35{

    margin-top:-90px;

    }

    You should paste this code at the end of all the existing code in your form. 

    Regarding to the issue with your iPad, our forms are designed to display properly on computers as well as mobile devices, if you have problems then it could be a responsive problem, you may follow this guide to fix it: http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive

    If the issue with your iPad is still there after applying that guide, then open a new thread and provide us the details, we will be glad to help.