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

    Help with responsive form layout

    Asked by kauseway on December 06, 2014 at 09:11 AM

    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!

    Page URL:
    http://form.jotformpro.com/form/43389395128971

    layout checkbox address field label
  • Profile Image

    Answered by Ben on December 07, 2014 at 06: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