How to make a form mobile responsive?

  • taylorbalfour
    Asked on April 1, 2016 at 5:27 PM

    Hello, I used to be able to change a setting so that my forms would be responsive to people's screen sizes and the setting appears to be missing. Could you please help me find it or let me know how to make all of my current/future forms responsive to screen size?

  • Kevin Support Team Lead
    Replied on April 1, 2016 at 6:17 PM

    Since you are asking for this feature I presume that you are using the new UI, if so, then I would like to let you know that this option has been removed from the new UI, this is because all our forms are responsive by default; however, you are able to use our old UI by loading this link: http://jotform.com/?old

    If that does not help, you may also try inject this CSS code, it will help to make your form mobile responsive as well: 

    /*-----------RESPONSIVE LAYOUT-----------*/

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0;

    }

     

    .form-line{

    width: 100%;    

    }

     

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

     

    .form-label-left, .form-label-right{

    width: auto !important;

    }

     

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

     

    .form-input {

    width: 100% !important;

    }

     

    .form-all{

    width: 75% !important;

    }

     

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

    }

    This guide will help you to inject the code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes