How to make a form mobile responsive?

  • Profile Image
    taylorbalfour
    Asked on April 01, 2016 at 05: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?

  • Profile Image
    Kevin_G
    Answered on April 01, 2016 at 06: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