What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Reduce vertical space between label and field

    Asked by oysterponds on June 18, 2013 at 07:36 PM

    I want to reduce the space beetween the form label and the corresponding form field on all of my JotForms. I have tried injecting custom css as per your instructions to ohers with the same issue, but with no success. Can you help me out here? Many thanks.

    This code injected did not work:

    .form-label-top {
        margin-bottom: 0;
    }
    Page URL:
    http://www.oysterpondshistoricalsociety.org/sheep-to-shawl---august-13<br/>-16.html

    Screenshot
    label form label style size
  • Profile Image
    JotForm Support

    Answered by jonathan on June 18, 2013 at 09:52 PM

    Hi,

    If you only desire that particular Email input field, please try this CSS code instead.

    #cid_10 {margin-top: -12px;}

    It should then look like this

     

    Please inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by oysterponds on June 19, 2013 at 09:28 AM

    How do I get the code #cid_10 {margin-top: -12px;}  into the form? I've injected it, nothing happens. I also want to have the all of the labels closer to all of their corresponding fields - not just that one field. If it works, I want to do it to all of the forms on the site. Thank you in advance.

  • Profile Image

    Answered by jefreylandicho on June 19, 2013 at 09:48 AM

    You can use Google Chrome browser then right click > Inspect Element the field. This will provide you with the same interface as jonathan have posted above. Click here for video presentation.

    Please try adding the code below

    .form-label-left { margin:0px !important }

    then remove this line in your form styles CSS

    #cid_10 {margin-top: -12px;}

    If you need further assistance, please contact us again.

  • Profile Image

    Answered by pinoytech on June 19, 2013 at 09:54 AM

    Hi,

    I've cloned also your form and made some workaround in it. Can you please take a look at this cloned form if this is what you want to achieve? http://www.jotformpro.com/form/31694260481960

    Thank you!

  • Profile Image

    Answered by oysterponds on June 19, 2013 at 09:58 AM

    Yes, yes, yes! How can I get this into my other forms?

    Thanks so much.

  • Profile Image
    JotForm Support

    Answered by abajan on June 19, 2013 at 10:05 AM

    Hi

    Please see this guide. Injecting the following rule should work for every field in all of your forms:

    .form-label-top,
    .form-label-left,
    .form-label-right {
    margin-bottom: 0;
    }

    There may be instances where the !important keyword is necessary for some of the declarations.

    Should you need further assistance with this, we'd be happy to help.

  • Profile Image

    Answered by pinoytech on June 19, 2013 at 10:08 AM

    Hi,

    In order to achieve that, please follow this simple steps:

    1. Change all fields Label Alignment from Auto to Top.

    2. Inject this custom css into your form.

    .form-label-top {

    margin: 0px !important;

    }

    3. Remove this custom css from your form.

    #cid_10 {margin-top: -12px;}

    If you need further assistance, do let us know.

    Thank you!