The Easiest Online Form Builder: JotForm Support Forum

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.

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.

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

How do I customize more please?

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

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.

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

I need all the space highlighted to be removed 

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.

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

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;

}

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.

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;

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.

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

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

Cheers :)