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

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

    For instance:

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

  • Profile Image
    BJoanna
    Answered on August 10, 2017 at 01: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. 

  • Profile Image
    BJoanna
    Answered on August 11, 2017 at 03:55 AM

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

    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.