Help with responsive form layout

  • kauseway
    Asked on December 6, 2014 at 9:11 AM

    Help with responsive form layout Image 1 Screenshot 20

    Above is the look I am trying to achieve.

    I have been messing with the form to get it to look good on PC and mobile.  I have tried the responsive widget, the make responsive checkbox on the form preferences as well as make responsive/ two column layout in the form CSS editor.

    I feel like it is close but here is my issue:

     

    The /unit #/ form is responsive.  I need it to be up with the address form.  It does not need to take up alot of width as it just holds a apartment #.  So I want make sure it stays with the address field. and they both are responsive together.

    [  address                       ]        [  unit #   ]

    [  city                             ]        [  state ]

    [  phone                         ]      

     

    Same for the City and State fields.

     

    I would like to the phone number field to maintain the same width as the [ address ] field so it isnt stretched across the entire form, see above. 

     

    Under the credit card field:

    1)  The credit card label is shifted down and sitting on the security code box. I need to get it back up.

    -

      Credit Card

    Needs to be:    - Credit Card

     

    Finally. Same issue with the expiration fields. They are going across the entire width. Would like them to be smaller.  Ideally the  security code, and expiration fields should be on the same line as well.

     

    Thanks for you helpt!

  • Ben
    Replied on December 7, 2014 at 6:20 AM

    Hi,

    I have created a clone of your jotform with the code that I believe you were after.

    You can see it here: http://form.jotformpro.com/form/43402163622949 and if you want you can clone it to your account following these steps:How to Clone an Existing Form from a URL.

    This is the CSS code added to the jotform:

    #id_7, #id_9 {
        display: inline-block;
        float: left;
        max-width: 65%;
        padding-right: 20px;
    }
    #id_8, #id_10 {
        clear: none;
        display: inline-block;
        float: left;
        max-width: 30%;
        padding-left: 0;
        padding-top: 28px;
    }
    #id_10.form-col-2 {
        margin-top: 0;
        padding-top: 24px;
    }
    #sublabel_cc_number {
        display: inline-block;
        margin-bottom: 10px;
        max-width: 80%;
    }
    .form-address-table tr:last-child span.form-sub-label-container {
        max-width: 45%;
    }
    .form-address-table tr:last-child span.form-sub-label-container:first-child {
        max-width: 50%;
    }
    .form-address-table tr:last-child span.form-sub-label-container:first-child select {
        max-width: 95%;
    }
    .form-address-table tr:last-child span.form-sub-label-container:first-child {
        font-size: 1em;
    }
    .form-address-table tr:last-child span.form-sub-label-container:first-child label {
        font-size: 11px;
    }

    Now in regards to security code and expiration fields. I would suggest not to get them in the same row since they are in different table rows. That means that the security code would follow the Credit Card number on any change and since the expiration date is in different row, the CSS rules would need to be made that would follow the security code around as well, regardless of the table layout.

    Do let us know if that is what you were after and if you need any further assistance.

    Best Regards,
    Ben