How do I reduce the space between fields without affecting the margin at the top of the form?

  • Profile Image
    Phyllis Castillo 
    Asked on June 29, 2015 at 03:47 PM

    We have a form with a background that requires a large area at the top.  We would like to reduce the space between fields without affecting the area at the top.  When I change the form height, it moves the fields into the header.

     

    http://form.jotform.us/form/51717188797169 

     

  • Profile Image
    Ben
    Answered on June 29, 2015 at 04:38 PM

    I do believe that you will like the way it looks with the following CSS, but first, do take a look at it on a clone of your jotform here: http://form.jotformpro.com/form/51795946614973

    If that is what you were after, just add the following code to your Custom CSS code field:

    .form-section.page-section {
        top: 80px;
    }
    .form-section.page-section:first-child {
        top: 0;
    }
    .form-line {
        padding-bottom: 10px;
        padding-top: 10px;
    }

    This is the guide that will show you exactly where to place this code: Inject Custom CSS Codes

    Just remember to add the code after / under all of the other code.

    If you wish, you can also simply clone the jotform above to your own account by following the steps here: How to Clone an Existing Form from a URL

    Do let us know if that is what you were after :)

  • Profile Image
    phyllis.castillo
    Answered on June 29, 2015 at 10:13 PM
    Thank you! I cloned your form.

    Phyllis Castillo
    281-602-1291 x99 (office)
    281-744-3093 (cell)
    phyllis.castillo@konektiv.com



    ...