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

    CSS code to reduce the vertical spacing between form feilds

    Asked by Keithy on March 28, 2016 at 01:33 AM
    However, I've added more sections to my form and am trying to match the code to tighten the vertical spacing between the other fields but am having serious trouble and can't figure it out! :-/ Can you help me? This is the last piece of the puzzle. So excited to almost be done!!
  • Profile Image
    JotForm Support

    Answered by Chriistian on March 28, 2016 at 02:56 AM

    The css code wil be very long as there are a lot of fields that we need to adjust. Allow me some time to investigate the issue further and I will get back to you with the css to reduce the vertical spacing between the form fields.

    Regards.

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 28, 2016 at 05:11 AM

    Here's the full code that you can apply to adjust the spacing between the fields. I would suggest deleting the old css and injecting this new css to your form.

    #id_70, #id_71, #id_72, #id_73 , #id_74, #id_75, #id_76, #id_77, #id_109 , #id_110 , #id_111 , #id_112, #id_113

    ,#id_114,#id_115,#id_116,#id_92,#id_93,#id_94,#id_95,#id_96,

    #id_97,#id_98,#id_99,#id_120,#id_121,#id_122,#id_123,#id_124,#id_125,#id_126,#id_127,#id_128,#id_129,#id_130,#id_131,#id_132,#id_133,#id_134,#id_135,#id_136,#id_137,#id_138,#id_139,#id_140,#id_141,#id_142,#id_143,#id_147,#id_148,#id_149,#id_150,#id_151,#id_152,#id_153,#id_154,#id_155,#id_156,#id_157,#id_158,#id_159,#id_160,#id_161,#id_162,#id_163,#id_164,#id_165,#id_166,#id_167,#id_168,#id_169,#id_170,#id_173,#id_174,#id_175,#id_176,#id_177,#id_178,#id_179,#id_180,#id_181,#id_182,#id_183,#id_184,#id_185,#id_186,#id_187,#id_188,#id_190,#id_191,#id_192,#id_193,#id_194,#id_195,#id_196,#id_197,#id_199,#id_200,#id_201,#id_202,#id_203,#id_204,#id_205,#id_206,#id_208,#id_209,#id_210,#id_211,#id_212,#id_213,#id_214,#id_215,#id_220,#id_221,#id_222,#id_223,#id_224,#id_225,#id_226,#id_227,#id_228,#id_229,#id_230,#id_231,#id_232,#id_233,#id_234,#id_235,#id_236,#id_237,#id_238,#id_239,#id_240,#id_241,#id_242,#id_243,#id_244,#id_245,#id_246,#id_247,#id_248,#id_249,#id_250,#id_251{

        margin: 0;

    }

    #id_71, #id_110,#id_93,#id_121,#id_129,#id_137,#id_148,#id_156,#id_164 ,#id_174,#id_182,#id_191,#id_200,#id_209,#id_221,#id_229,#id_237,#id_245{

        position: relative;

        top: -19px;

    }

    #id_72, #id_111,#id_94,#id_122,#id_130,#id_138,#id_149 ,#id_157,#id_165,#id_175,#id_183,#id_192,#id_201,#id_210,#id_222,#id_230,#id_238,#id_246{

        position: relative;

        top: -29px;

    }

     

    #id_73, #id_112,#id_95,#id_123,#id_131,#id_139 ,#id_150,#id_158,#id_166,#id_176,#id_184,#id_193,#id_202,#id_211,#id_223,#id_231,#id_239,#id_247{

        position: relative;

        top: -48px;

    }

    #id_74, #id_113 ,#id_96,#id_124,#id_132,#id_140,#id_151,#id_159,#id_167,#id_177,#id_185,#id_194,#id_203,#id_212,#id_224,#id_232,#id_240,#id_248{

        position: relative;

        top: -66px;

    }

    #id_75, #id_114 ,#id_97,#id_125,#id_133,#id_141,#id_152,#id_160,#id_168,#id_178,#id_186,#id_195,#id_204,#id_213,#id_225,#id_233,#id_241,#id_249{

        position: relative;

        top: -84px;

    }

    #id_76, #id_115 ,#id_98,#id_126 ,#id_134,#id_142,#id_153,#id_161,#id_169,#id_179,#id_187,#id_196,#id_205,#id_214,#id_226,#id_234,#id_242,#id_250{

        position: relative;

        top: -102px;

    }

    #id_77, #id_116,#id_99 ,#id_127,#id_135,#id_143,#id_154,#id_162,#id_170,#id_180,#id_188,#id_197,#id_206,#id_215,#id_227,#id_235,#id_243,#id_251{

        position: relative;

        top: -120px;

    }

    You can check out this cloned form to see it in action: https://form.jotform.com/60871267217963 

    Do let us know if you need further assistance.
    Regards.

  • Profile Image

    Answered by Keithy on March 28, 2016 at 09:45 AM
    A million thanks!! You all have been so helpful and prompt throughout! Im so appreciative!
    -Keith
    Sent from the lifestream
    ...
  • Profile Image
    JotForm Support

    Answered by Jan on March 28, 2016 at 10:57 AM

    On behalf of Christian, you are welcome. We are here to assist you so please let us know if you need any help. Thank you also for your compliments.

  • Profile Image

    Answered by Keithy on March 30, 2016 at 05:01 PM

    Did I mention how awesome your help has been? Thank you for writing the custom code because I would have never been able to figure that out.Truly impressed with how quick and thorough your responses are. 

    With that being said, just one more question...lol. The space between the inventory rows is perfect, but now there is a big space after the last inventory row and start of new section...is there a way to fix that? If not, no worries as I don't want to break the code, but thought I would ask...

    Thank you again!!

     

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 30, 2016 at 09:37 PM

    Thank you for your feedback. To better assist you with your latest concern, I have moved your question to a new thread. You can check out that thread by following this link: https://www.jotform.com/answers/806597.

    Regards.