How can I make my form mobile friendly?

  • Profile Image
    bodiallegiance
    Asked on October 05, 2016 at 05:26 PM

    At the moment I have the mobile widget on my form, however when I view the form on IOS device, it doesnt fit the screen and it cuts off half of my information. Any suggestions?

  • Profile Image
    Kevin_G
    Answered on October 05, 2016 at 10:29 PM

    I have checked your form and I can see what you're referring to, here is also a screenshot about what I can see on my end: 

    The problem only seems to happen in IOS since I have tested in an Android device and seems like the form loads properly, here is a screenshot: 

    I would suggest you to apply this CSS code to your form: 

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

    }

    It will also help the form to load properly in mobile devices, here is a guide that will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    Please after doing this, re-embed your form using the iFrame code, here is the guide: Getting-the-form-iFrame-code

    Do let us know how it goes.