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

    How do I prevent my form from cutting the text off on mobile devices?

    Asked by 4rreeaall on October 31, 2013 at 07:50 PM

    Text is cut off in on mobile device.

    On desktops, the form displays fine. But when I visit www.BestHomeOption.com/Prequalify.html on an iPhone 4, some of the text gets cut off on the right hand side, and even a couple parts of the form barely get cut off. I tried injecting custom CSS with these two options but they made even more text get cut off:

    First code:

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

     

    .form-textbox, .form-textarea{

     

    width:300px !important;

     

    min-width:300px !important;

     

    max-width:300px !important;

     

    }

     

    }

     

    Second code:

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

     

    .form-textbox, .form-textarea{

     

    width:200px !important;

     

    min-width:200px !important;

     

    max-width:200px !important;

     

    }

     

    }

     

     

    How can I have it display on desktops just fine without being too cramped, and still have them display everything on mobile devices?

    Page URL:
    www.BestHomeOption.com/Prequalify.html

    Mobile textarea textbox www
  • Profile Image
    JotForm Support

    Answered by Welvin on October 31, 2013 at 10:42 PM

    Hi,

    I've fixed it by adding the Custom Mobile CSS Query to your form:

    @media only screen 

    and (min-device-width : 320px) 

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

    .form-label-top {

    width: 250px !important;

    font-size: 12px !important;

    }

    .form-header {

    width: 250px !important;

    font-size: 14px !important;

    }

    }

     

    Please kindly check and let us know for any remaining issues.

    Thanks

  • Profile Image

    Answered by 4rreeaall on October 31, 2013 at 11:31 PM

    Thanks so much! This looks WAY better now. There are still 3 form boxes that are slightly cut off, which are the Other Monthly Payments, Address, and Additional Comments boxes. I can live with that because they are barely cut off, but I think a problem that results is when I go to type in on those boxes it appars the phone automatically zooms in and the text on the entire page becomes blurry. I realized I could just pinch out and by zooming out, the text would correct back to a clear legible state. However, I doubt all visitors will realize this. Is there a way to correct that?

  • Profile Image

    Answered by 4rreeaall on October 31, 2013 at 11:35 PM

    Actually, I also just realized, as a result of the auto zoom in when typing in a box, once I am done typing a response the text does not always get blurred. When it does, I have the problem stated above. When it does not get blurry, it still does not auto zoom out and a result, all of the text appears to be cut off on the left hand side, which is corrected if I pinch to zoom out.

  • Profile Image
    JotForm Support

    Answered by Welvin on November 01, 2013 at 12:11 AM

    Hi,

    I've fixed it. Added a few custom CSS codes. Please kindly check. 

    Can you also add the following Metag Data to your HTML page:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    Add this in the section where your page meta data has been placed:

    Thanks

  • Profile Image

    Answered by 4rreeaall on November 01, 2013 at 02:03 PM

    Thank you so much Welvin. Looks great. 

    I'm not sure I am able to add the meta data you are specifying. I am using Weebly as my website builder and I have 6 options to enter data on the page. They are: Page Name, Page Title, Page Description, Meta Keywords, Footer Code, and Header Code. Those are the ways I was able to enter the meta data you see in the picture. Do you know a way I could enter it in Weebly?

  • Profile Image
    JotForm Support

    Answered by KadeJM on November 01, 2013 at 04:11 PM

    On behalf of my colleague you are very welcome. For Weebly you may want to try putting it in with the Html Section in between the " <head> </head> " tags since Meta Data is normally found at the top around there if you view most website's source code because it's already considered partial Html Code that sits inside it. Either that or see if it makes a difference placing it above your form if you've used an Embedded Form Method with just the script. 

    Alternatively after looking through some stuff for Weebly I found a few related docs. One part refers to the Html Widget and the other refers to Editing a theme's Html and CSS so since it looks like you would have to probably embeed this via a Widget either try placing it above the Form Script by itself or else you may ultimately have to try adding it into the Theme's Html Control which controls everything for the look of your Weebly Page and in that it will also have your form so this may cover that.

    These 2 Documents I found may help:

    (1) http://themedocs.weebly.com/index.html

    (2) http://kb.weebly.com/custom-html.html

     

    If you're still struggling with this then let us know and we'll try to help you more with this as best we can.

  • Profile Image

    Answered by 4rreeaall on November 01, 2013 at 05:22 PM

    Thank you so much you guys are awesome. 

    Like you said, I used Weebly's drag and drop "embed code" option so i could place custom html inside of it. This is where I placed the iframe code for your form. So I just placed another one of those "embed code" boxes just above the form like you said and placed that meta info. Everything looks good to me!

    I made one observation, which doesn't matter to me, when I was using Safari on an iPhone 4 to check the page with the form. I noticed that if I am filling out the form and I don't fill out a required field and then click the "Next" option on the phone and continue filling out the form by clicking the "Next" option, it will not allow me to type into a text box. Yet, if I click the "Done" button on the phone and then click on the same text box that I couldn't type in, I am then able to type text into those boxes even though the same required field is not yet filled out.

    Like I said, this doesn't bother me, just an observation I made in case it helps you with anything.

    Thanks again for the amazing help!