Form Designer: Remove spaces between fields

  • eurydice8
    Asked on June 16, 2016 at 9:25 AM

    Hello!
    I am creating a form and would love to remove all that space between the vertical fields. Is that possible to achieve please?

  • David JotForm Support Manager
    Replied on June 16, 2016 at 11:11 AM

    Yes, you can reduce the vertical space with the Form Designer tool, example:

    Click on Designer>>LineLayout and reduce the Vertical Padding:

    Form Designer: Remove spaces between fields Image 1 Screenshot 20

    Let us know if you need more help.

  • Support_Management Jotform Support
    Replied on June 16, 2016 at 11:13 AM

    Hi,

    Thanks for contacting us! Yes it is possible by using our Designer Feature. Please refer to the short clip below using a cloned copy of one of your forms:

    Form Designer: Remove spaces between fields Image 1 Screenshot 20

    Hope that helps! If you need to learn more about our Form Designer, these videos will help a lot.

  • eurydice8
    Replied on June 16, 2016 at 11:46 AM

    Reduce padding to 0px but still have plenty of space between the lines.

    How do I customize more please?

  • eurydice8
    Replied on June 16, 2016 at 11:53 AM

    I have manually changed the css to reduce the form line space like this

     

    .form-line {

        margin-bottom : 0;

        margin-top : 0;

    }

     

    In dreamweaver it works fine, but when it goes live it goes back to big spacing

  • David JotForm Support Manager
    Replied on June 16, 2016 at 1:22 PM

    Is this the form you are referring to? http://www.jotformeu.com/form/61674160716355 

    I see it has space between the item and total:

    Form Designer: Remove spaces between fields Image 1 Screenshot 30

    You can reduce it by injecting the following CSS code:

    .form-product-item hover-product-item{

        margin-bottom: 0px !important;

    }

     

    .form-payment-total{

        margin-top: 0px !important;

    }

    Result:

    Form Designer: Remove spaces between fields Image 2 Screenshot 41

    If you want to reduce more, please specify with a screenshot image the space between fields you want to reduce: https://www.jotform.com/answers/414264-How-to-include-screenshot-image-in-the-support-forum 

    Let us know if you need more help, we will be glad to assist you.

  • eurydice8
    Replied on June 17, 2016 at 4:00 AM

    Yes this is the form, I have applied changes but is not taking any of them

  • eurydice8
    Replied on June 17, 2016 at 4:02 AM

    I need all the space highlighted to be removed Form Designer: Remove spaces between fields Image 1 Screenshot 20

  • Chriistian Jotform Support
    Replied on June 17, 2016 at 4:59 AM

    I checked your form http://www.jotformeu.com/form/61674160716355 and it seems the changes has reflected on the form.

    Form Designer: Remove spaces between fields Image 1 Screenshot 20

     

    Can you check it again on your end and see if the changes are now implemented?

     

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

  • eurydice8
    Replied on June 17, 2016 at 5:00 AM

    I still don't see them. This is the page where the form is loaded

    http://www.effewebdesigner.com/olaeuropa/new/morocco-tour-desert.php

  • Chriistian Jotform Support
    Replied on June 17, 2016 at 5:20 AM

    I was able to see what you are referring to. Can you try to add/inject this custom CSS code and see if it will help?

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-line {

         padding: 0px 36px !important;

    }}

    #label_25{

    margin-bottom:0px !important;

    }

    span.form-product-item.hover-product-item {

        margin-bottom: 0px !important;

    }

     

    Form Designer: Remove spaces between fields Image 1 Screenshot 20

  • eurydice8
    Replied on June 17, 2016 at 5:26 AM

    I have, but only the size of the text has reduce, the space still remains. I need the form to be "compact" because as it is it takes too much space on the right hand side.

  • eurydice8
    Replied on June 17, 2016 at 5:44 AM

    When I remove this padding from dreamweaver it shows much more compact, but if I paste the same code into the css it does not apply the space changes.

    padding: 12px 2px; to padding0 2px;

    .form-line, .form-line.form-line-column {
        box-sizing: border-box;
        padding: 0 2px;
        width: 100%;
    }
     
    Still does not show it as compact as I would like it to be. 
     
  • Chriistian Jotform Support
    Replied on June 17, 2016 at 9:26 AM

    Hi,

    I checked your website and the only vertical spaces that can be reduced are the ones shown highlighted below. Are these what you are referring to?

    Form Designer: Remove spaces between fields Image 1 Screenshot 20

    To reduce those spaces, can you please inject this custom CSS?

    .form-all {

    padding-top: 0px;

    }

     

    span.form-sub-label-container:last-child {

    height: 26px;

    }

     

    span.form-payment-total {

    margin-top: -10px !important;

    }

     

    Do let us know how it goes.

  • eurydice8
    Replied on June 17, 2016 at 9:57 AM

    Much better, it works perfectly now!
    Thank you very much for your support!

  • Chriistian Jotform Support
    Replied on June 17, 2016 at 10:36 AM

    You are welcome. Glad to hear it worked. Feel free to contact again if you need further help.

     

    Cheers :)