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

    How to make a form mobile responsive?

    Asked by taylorbalfour 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?

    form width My Forms size find hello
  • Profile Image
    JotForm Support

    Answered by Kevin_G 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