Can I have more than one field on a line? How?

  • Baselinesurveyors
    Asked on August 10, 2017 at 12:10 PM

    For instance:

    For Address I would like City, State and Zip on one line

  • BJoanna
    Replied on August 10, 2017 at 1:12 PM

    Inside of this guide, you can find how to position fields inside of the form:

    Form Field Positioning

    However, this will not work for City, State and Zip fields of the address field. To position them on one line you will have to use custom CSS. 

    How to Inject Custom CSS Codes

    You can provide us an ID of your form and we will help you to position them on one line. 

  • BJoanna
    Replied on August 11, 2017 at 3:55 AM

    I created a demo form: https://form.jotformpro.com/72221546849966 

    Can I have more than one field on a line?  How? Image 1 Screenshot 20

    To position City, State and Zip fields in the same line I added this CSS code to the form:

    #input_3_city.form-textbox.form-address-city {

        width : 92px !important;

    }

    #input_3_state.form-textbox.form-address-state {

        width : 92px !important;

        position : absolute;

        margin-left : -200px !important;

        margin-top : -13px !important;

    }

    #sublabel_3_state.form-sub-label {

        position : absolute;

        margin-top : 15px !important;

        margin-left : -200px !important;

    }

    #input_3_postal.form-textbox.form-address-postal {

        width : 92px;

        position : absolute;

        margin-left : 217px !important;

        margin-top : -53px !important;

    }

    #sublabel_3_postal.form-sub-label {

        position : absolute;

        margin-left : 217px !important;

        margin-top : -24px !important;

    }

    How to Inject Custom CSS Codes

    Hope this will help.