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

    Form is cut off on mobile devices and doesn't resize

    Asked by XtraVelocity on August 04, 2013 at 07:38 PM

    My form at http://www.xtravelocity.com/order/ looks fine on desktop devices but when on mobile, the form doesn't resize and overflows in width. it also is cut off vertically. How can I fix this?

    I use an iPhone 5 if it helps.

    Page URL:
    http://www.xtravelocity.com/order/

    Screenshot
    Mobile www
  • Profile Image
    JotForm Support

    Answered by Welvin on August 05, 2013 at 12:35 AM

    Hi,

    Please try to change your form width from 850px to 550px. Follow this guide: https://www.jotform.com/help/35-The-Importance-of-Form-Widths. Then re-embed your form using our script type embed method as shown on the screenshot below:

    Let us know for the result.

    Thanks

  • Profile Image

    Answered by XtraVelocity on August 25, 2013 at 07:53 AM

    Still overlaps the same as the picture above. I don't want to make the form width any smaller otherwise it'll start looking strange on the desktop view :/

  • Profile Image
    JotForm Support

    Answered by jonathan on August 25, 2013 at 08:26 AM

    Hi,

    Can you please also try this workaround.

    Inject this CSS code on the form

    @media only screen and (max-device-width: 550px){

    .form-textbox, .form-textarea{

    width:300px !important;

    min-width:300px !important;

    max-width:300px !important;

    }

    }

    Feel free to change 300px width to your preference.

    For the transparency on IE, simply insert the following property under .form-textbox, .form-textarea class on the existing CSS injected to your form.

    filter:alpha(opacity=50);

     

    See if this makes any difference. Inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by XtraVelocity on August 27, 2013 at 10:18 AM

    This fixed the text box issue by using this code:

     

    @media only screen and (max-device-width: 550px){

    .form-textbox, .form-textarea{

    width:200px !important;

    min-width:200px !important;

    max-width:200px !important;

    }

    }

     

    But the text and captcha still overlap. Is there anyway to fix this?


  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 27, 2013 at 01:34 PM

    Hello XtraVelocity,

    ReCaptcha field is hardcoded and hence cannot be changed. If you change your ReCaptcha field to normal captcha field and then inject this CSS code in your form to customize the size:

    @media only screen and (max-device-width: 550px){.form-textbox, .form-textarea{width:200px !important;min-width:200px !important;max-width:200px !important;}

    .form-captcha, .form-captcha-image,  .form-captcha input{

    width: 200px !important;

    min-width:200px !important;

    max-width:200px !important;

    }

    .form-html{

    width:200px !important;min-width:200px !important;max-width:200px !important;

    }

    }

    Hope this helps.

    Thank you!