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

    How do I reduce the space around the form

    Asked by coigis on May 29, 2015 at 07:18 PM

    How do I reduce the space around my form? There are bunch of css codes being injected, maybe after I played with the designer? Now I'm not sure which css codes should I modify.

    how CSS codes designer after
  • Profile Image

    Answered by raul on May 29, 2015 at 07:24 PM

    Is your form embedded in a website? If so, can you let us know the URL of the web page where we can check it out? This will allow us to provide the necessary code you need to modify.

    We'll wait for your response.

  • Profile Image

    Answered by coigis on June 01, 2015 at 12:11 PM

    It's http://maps3.cityofirvine.org/solarpanel/solarcalc.html

    Also, i would like to line up the fields in columns, especially if you scroll towards the bottom, in sections Tag A, B and C. I would like the fields in the second column to align.

    Another thing is, the look is different with Chrome, Firefox and IE.

    Thanks!

  • Profile Image

    Answered by Carina on June 01, 2015 at 12:35 PM
     
    .jotform-form {
        padding: 0px 0 !important;
    }

    Let us know if we can assist you further.   

  • Profile Image

    Answered by coigis on June 01, 2015 at 01:01 PM

    That reduces the space at the top and at the bottom, what about the sides?

    Also, how to align the columns?

  • Profile Image
    JotForm Support

    Answered by Charlie on June 01, 2015 at 02:36 PM

    You can try changing the padding values specifically like this:

    .jotform-form {

     padding-top: 0px !important;

     padding-bottom: 0px !important;

     padding-right: 0px !important;

     padding-left: 0px !important;

    }

     

    You can learn more about how to specify the padding here: CSS padding values.

    About the columns, you can manually adjust the first and second column's width so that they'll be align vertically.

    Here's an example:

    li.form-line.form-line-column.form-col-1 {

        width : 300px;

    }

    li.form-line.form-line-column.form-col-2 {

        width: 200px;

    }

    However, this will adjust everything, not only the ones in Tag A, B and C. You'll need to manually choose the fields using the form field IDs. 

    Do let us know if you need more help on this.

    Thank you.

  • Profile Image

    Answered by coigis on June 01, 2015 at 03:17 PM

    There still spaces on both sides of the form after setting the padding values on all sides.

    And for column alignment, I tried manually adjusting individual fields by specifying field id. However, the text box moves, but not the label that's attached to it.

  • Profile Image

    Answered by Carina on June 01, 2015 at 04:39 PM

    If you wish to move also the label you can replace the input for label:

    #input_4 - field ID

    #label_4 - correspondent label ID

    To remove the space on the sides please add this css code:

    .form-line {
        margin-left: 5px !important;
        margin-right: 5px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
     
    You can also change the form's width.
    If you need further support please let us know.
  • Profile Image

    Answered by coigis on June 01, 2015 at 05:10 PM

    The look is different across the browsers. IE and Firefox are somewhat closer with how they look. Is there a way to fix this?

    Chrome:

    Firefox:

    IE:

  • Profile Image

    Answered by raul on June 01, 2015 at 05:54 PM

    You can try enabling form columns using the form designer.

    This should give the same spacing on the 3 browsers. Then you can move the fields to a new line for the ones in which you only want to show in 2 columns (this guide can help you with that: https://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm)

  • Profile Image

    Answered by coigis on June 01, 2015 at 06:02 PM

    How come I don't see the number of columns option in the designer?

  • Profile Image

    Answered by raul on June 01, 2015 at 06:29 PM

    I'm not sure why you're not able to set the columns number. But please try to save your changes (leave the Enable form columns checked) close the designer and try to open it again.

    Let us know if you're still unable to set the columns number.

  • Profile Image

    Answered by coigis on June 01, 2015 at 07:26 PM

    Ok, i'm able to set the number of columns. However, there's this issue. Under Tag B, after selecting all the dropdowns, THWN status got indented to the right a bit than RHW and XHHW status. It's supposed to align with all the fields in the third column. Why's that? (in order to see different status, just try selecting different Wire used.)

     

     

  • Profile Image
    JotForm Support

    Answered by Charlie on June 01, 2015 at 10:59 PM

    Have you tried adjusting the padding of those fields?

    Here's an example code that you can use:

    #id_138, #id_161 {

        padding-left: 20px !important;

    }

    The code above adjusts the field "THWN Status".

    Let us know if that works.

  • Profile Image

    Answered by coigis on June 02, 2015 at 10:58 AM

    Unfortunately it didn't work after injecting the code above.

  • Profile Image
    JotForm Support

    Answered by Charlie on June 02, 2015 at 11:18 AM

    I've cloned your form from this website: http://maps3.cityofirvine.org/solarpanel/solarcalc.html. After cloning it, I can't seem to find the custom CSS code.

    I then added the custom CSS code I mentioned above.

    I then assume you are referring to Tag B and Tag C. In my case, this is how it is displayed. 

     

    It needs a little adjustment but it can be done using those CSS selectors. 

    Here's my cloned form: http://form.jotformpro.com/form/51524794175966.

    Let us know if we're missing something.

    Thank you.

     

  • Profile Image

    Answered by coigis on June 02, 2015 at 11:36 AM

    It works after adding the code in Designer. Earlier I added the code in Preferences--Inject Custom CSS. What's the difference between adding the code in Designer and in Preferences?

  • Profile Image
    JotForm Support

    Answered by Charlie on June 02, 2015 at 12:06 PM

    The "Form Styles" section under the "Preferences" is the earlier method/option to inject custom CSS code when the Form Designer was not yet implemented. But I believe it should still worked there, the form might have not saved when you injected the CSS code there or the code might have been injected to a wrong section. It would be best to add the Custom CSS code directly in the Form Designer tool.

    Thank you.

     

  • Profile Image

    Answered by coigis on June 02, 2015 at 12:10 PM

    Ok, thanks for all the help!