Form Designer: Remove spaces between fields

Welcome to JotForm!

Customize forms, save time & effort and collect online payments easily.

Already have an account?

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?
- form
- designer
- spacing
JotForm Support

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.
JotForm Support Manager

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.
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?
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
JotForm Support

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.
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
eurydice8
Answered on June 17, 2016 at 04:02 AM

I need all the space highlighted to be removed
JotForm Support

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.
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
JotForm Support

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;

}
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.
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.
JotForm Support

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.
eurydice8
Answered on June 17, 2016 at 09:57 AM

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

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 :)