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

    Make my form mobile responsive

    Asked by passiebeer 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

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

    Screenshot
    JotForm email problem Mobile
  • Profile Image
    JotForm Support

    Answered by EltonCris 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!