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

    My form fields are too wide on mobile devices

    Asked by pixeldesigns on August 22, 2013 at 06:30 PM

    http://www.pixeldesigns.ca/files/AA/reservations-price-estimates/


    Viewed on my Nexus S as well as an iPhone the form gets cut off on the side because the form is bigger than the window. I cannot get it to shrink down to the proper size.

     

    Please help!

    Thanks

     

     

    Page URL:
    http://www.pixeldesigns.ca/files/AA/reservations-price-estimates/

    Mobile wide size shrink www thanks
  • Profile Image

    Answered by khrisell on August 22, 2013 at 08:18 PM

    Hello,

     I would suggest to re-embed your form using iframe embed code. This should help fixed this issue.

    To get the iframe code, please follow these steps:

    1. Go to Setup & Embed

    2. Click Embed Form

    3. Select iFrame




    Copy the code and use it instead and check if you will still have a problem on viewing the form on mobile devices.
    Please don't hesitate to let us know if you need further help.
    Thank you.
  • Profile Image

    Answered by pixeldesigns on August 23, 2013 at 03:36 PM

    Hi, I tried using the iframe method but it made no difference.

     

    Help!

  • Profile Image

    Answered by khrisell on August 23, 2013 at 07:48 PM

    Hello,

    Please try to inject this custom mobile CSS code to your form:

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

    .form-textbox, .form-textarea {

    width: 250px;

    }

    }

    Follow this guide on how to inject this codes

    1. Click Setup & Embed

    2. Preference

    A new window will pop-up.

    3. Then click Form Styles

    4. And paste the code under Inject Code CSS box.

    ]

    And then close that window and you're done.

     

    Kindly check if that could fix the issue.

    If problem persists please do let us know so that we could further investigate.

    Thank you for using JotForm. :)

  • Profile Image

    Answered by pixeldesigns on August 23, 2013 at 07:59 PM

    Hello and thankyou,

     

    This has unfortunately made the problem even worse. :(

     

     

    More screenshots:

    https://www.dropbox.com/s/uyynidshzpk9p6t/2013-08-23%2017.55.44.png

    https://www.dropbox.com/s/q3luwfvwkukm7e9/2013-08-23%2017.55.52.png

    https://www.dropbox.com/s/y7uh7f3svai9vas/2013-08-23%2017.56.02.png

  • Profile Image

    Answered by khrisell on August 24, 2013 at 01:54 AM

    Hello,

    I can see the error on my iPhone but looks good on my Samsung S3 and Tablet.

    Kindly replace the previous code with this code. To be able to accomodate the accessibility also for iPhone, iPad and other mobile devices.

    @media only screen 

    and (min-device-width : 320px) 

    and (max-device-width : 480px) {

    .form-textbox, .form-textarea {

    width: 250px;

    }

    }

    @media only screen 

    and (min-device-width : 768px) 

    and (max-device-width : 1024px) {

    .form-textbox, .form-textarea {

    width: 250px;

    }

    }

    Please try to inject and let us know if problem persists.
    We are just changing the value of the width and you can play with it (minimize the value) as you go along and check what could work best for your form on your website/page.
    Thank you.
  • Profile Image

    Answered by pixeldesigns on August 26, 2013 at 12:24 PM

    Thanks I have tried this new bit of code and it still looks the same on my Nexus S. 

  • Profile Image
    JotForm Support

    Answered by Welvin on August 26, 2013 at 01:44 PM

    Hi,

    Good day! I would suggest moving down your form fields which are currently positioned into one line. Size and Type Unit, Email and Phone Number fields. The mobile responsiveness of our form varies to the default formatting or alignment of the fields.

    After that, please send us the updated look of the form, send us a screenshot.

    Thanks