how to adjust length & height of fields & how to place more than one drop down into a horizontal sequence.

  • Profile Image
    jaymike
    Asked on August 06, 2012 at 07:59 PM

    I am redesigning a site for a client who has the attached form (URL below). There is a lot of info as you can see:

     

    1. how do I vertically tighten the space for the fields (name, company address, etc)?

    2. re drop-down selections: how do I adjust the horizontal length so I can place several drop down items sequentially in a horizontal row?

  • Profile Image
    abajan
    Answered on August 06, 2012 at 08:40 PM

    Thanks for asking. It doesn't appear that the form on the page in question is one of ours. Nevertheless, the following guides apply to JotForm forms:

    How can I change spacing between questions?

    Field Positioning

    To reduce all of a form's dropdowns to the same width, inject the following rule, adjusting the declaration's value (highlighted in red) to suit:

    select {
    width: 100px !important;
    }

    Targeting just a specific dropdown would require "prepending" the selector with the field's ID:

    #id_5 select {
    width: 100px !important;
    }

    You can determine a drop down's ID by right-clicking the field and then clicking Show Properties. If you see #input_5 (for example), substitute #id_5.

  • Profile Image
    jaymike
    Answered on August 07, 2012 at 11:12 AM

    Thanks - I am making progress - I noticed when changing space between questions, 1 seems to be the lowest setting - 0 actually makes the space much larger - is there a way to tighten the vertical space more? Also: re headings - I see small, medium & large, is there a way to have more specific control of point sizes? Thank you for your help.

  • Profile Image
    abajan
    Answered on August 07, 2012 at 12:35 PM

    Yes. CSS can be used to fine tune both the vertical spacing between the fields and the headings' sizes. Please inject the following rules, adjusting each declaration's value (highlighted in red) to suit:

    .form-line {
    margin: 0px;
    }

    .form-header {
    font-size: 16px !important;
    }

    (A negative margin value can be used if you wish the fields to be even closer.)

  • Profile Image
    jaymike
    Answered on August 07, 2012 at 01:04 PM

    Thank you - I pasted the CSS code you supplied & the vertical spacing tightened up nicely - I’m sure I will have more questions since I am brand new to this, but I am definitely seeing daylight ahead.