How Do I Make My Form Responsive for Mobile?

  • Profile Image
    PayasUgym
    Asked on October 21, 2015 at 06:41 AM

    Right now my for design  looks completely different on the mobile

  • Profile Image
    mert
    Answered on October 21, 2015 at 07:51 AM

    Hi,

    There are several ways to make your forms responsive on mobile platforms. For the quick solution to beat this problem, you can give mobile responsive ability to your form by simply following the tutorial from the link below:

    http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive

     

    If it won't work, you can try to inject some custom CSS to your form for making it mobile responsive. This method is the more advanced one to solve this issue.

     

    To do that,

    Add the following custom CSS code to your form by using the method above.

    /*-----------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;

    }

     

    I hope this methods will help you. If you need more information about this issue, please let us know.

     

    Thanks.