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

    Unable to modify CSS for line spacing on form

    Asked by Masalamedia on December 31, 2012 at 07:50 PM

    I'd really like to reduce the giant gap in the form between a label and text. Can you supply tips on what object is creating the gap? I've tried creating 1px margins at the top and bottom of the elements I can identify but the huge space remains.

    Ive added a custom class to the text labels ("ack_heading") and have altered the "form-line" class with custom CSS to no avail.

     

    .ack_heading {font-size: 16px;font-weight: bold;color: #C30;font-family: Arial, Helvetica, sans-serif;margin-bottom:1px;margin-top:1px;}

    .form-line li{margin-top:1px;margin-bottom:1px;}

     

     

    Page URL:
    http://form.jotformpro.com/form/23628330499965?

    Screenshot
  • Profile Image

    Answered by Masalamedia on December 31, 2012 at 08:16 PM

    NOTE: I've changed my form slightly so now my long paragraph of text is in my text box, but now the entry field has tons of extra space around it. Again, could use a pointer about what CSS code to alter to bring those fields closer to the text it belongs to.

  • Profile Image
    JotForm Support

    Answered by Welvin on December 31, 2012 at 11:27 PM

    Hi,

    Please inject this custom CSS codes to your form:

    .form-line-active {

    background-color: transparent !important;

    }

    .form-line-error {

    background: transparent;

    }

    #id_31, #id_32, #id_33, #id_34, #id_35, #id_36 {

    margin-top: -32px;

    }

    Guide: How to Inject Custom CSS Codes

     

    Thank you!

  • Profile Image

    Answered by Masalamedia on January 02, 2013 at 03:43 PM

    Thanks Welvin! That css code did the trick and my form looks a lot better.

    I use JotForms to avoid getting too deep into the rabbit hole of CSS. Wish it were easier to control this without the need for such technical expertise.

    Thanks, again.