Make my form mobile responsive

  • Profile Image
    passiebeer
    Asked on January 12, 2014 at 12:15 PM

    Hello,

    I develop for someone who had a previous developer before me. This developer used a Newsletter form from jotform, which works nice. Only problem is, that the site must be optimized for mobile, and some fields are too long to fit (mainly because there is a fixed "width:650px" inserted in the css code.

    Is it possible to edit the previous jotform somehow, so I can edit this css code and replace the form with my new one?

     

    Current Form:

    http://test.thomasnayler.com/content/15-newsletter

    (Try to narrow the browser, and at browser window widths smaller 729, the header is cropped and smaller than 479 the enter field of Email is cropped.

    Thank you very much!

    pascal van Geest

    passiebeer@hotmail.com

  • Profile Image
    EltonCris
    Answered on January 12, 2014 at 05:31 PM

    Hi,

    Form is already optimized for mobile, but you have to view it on an actual mobile device not on the desktop.

    However, you can inject the following CSS codes to your form if you'd like your form to become responsive when browser is resized to 480 and lower.

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

    @media (max-width: 480px) {

    .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;

    }

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

    .form-input {

    width: 100%;

    }

    .form-all{

    width: 75%;

    }

    .form-sub-label-container {

    width: 100%;

    }

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Let us know if you have further questions about this matter.

    Regards!