Form Support

Form Designer: Remove spaces between fields

  • Profile Image
    eurydice8
    Asked on June 16, 2016 at 09: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?

  • Profile Image
    BDAVID
    Answered 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:

    Let us know if you need more help.

  • Profile Image
    Jim_R
    Answered 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:

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

  • Profile Image
    eurydice8
    Answered 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?

  • Profile Image
    eurydice8
    Answered 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

  • Profile Image
    BDAVID
    Answered on June 16, 2016 at 01: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:

    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:

    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.

  • Profile Image
    eurydice8
    Answered on June 17, 2016 at 04:00 AM

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

  • Profile Image
    eurydice8
    Answered on June 17, 2016 at 04:02 AM

    I need all the space highlighted to be removed 

  • Profile Image
    Chriistian
    Answered on June 17, 2016 at 04:59 AM

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

     

    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.

  • Profile Image
    eurydice8
    Answered on June 17, 2016 at 05: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

  • Profile Image
    Chriistian
    Answered on June 17, 2016 at 05: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;

    }

     

  • Profile Image
    eurydice8
    Answered on June 17, 2016 at 05: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.

  • Profile Image
    eurydice8
    Answered on June 17, 2016 at 05: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 padding: 0 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. 
     
  • Profile Image
    Chriistian
    Answered on June 17, 2016 at 09: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?

    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.

  • Profile Image
    eurydice8
    Answered on June 17, 2016 at 09:57 AM

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

  • Profile Image
    Chriistian
    Answered 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 :)