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

    iPhone 5 media queries not working

    Asked by dudiack on September 10, 2014 at 05:38 PM

    Hi, I'm attempting to get a form to look fine on iphone5 but there seems to be an issue with the iframe width. I've added the viewport meta tag and tested various media queries (min dpi and webkit ratio) but the form continues to retain its normal size. THe form resizing works fine on android nexus 4. What's odd is that a similar form on another page functions completely normally: 

    Working: getpeyd.com/miles.php
    Not working: getpeyd.com/quote.php

    Please help with this!

    Page URL:
    getpeyd.com/quote.php

    Screenshot
    iphone 5 mobile responsive
  • Profile Image
    JotForm Support

    Answered by david on September 10, 2014 at 06:01 PM

    Hi,

    Often times IOS does not like to play nice with javascript embeds of our forms.  If possible, replace your current embed code with the iFrame embed code:

    http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    This tends to fix formatting issues with IOS devices.

    If this does not fix how it looks on IOS, let us know and we will be happy to see what else we can do.

  • Profile Image

    Answered by dudiack on September 11, 2014 at 12:16 PM

    Hi david,

    Thanks for the reply. Changed it to the iframe method but still has the same issue. 

  • Profile Image
    JotForm Support

    Answered by david on September 11, 2014 at 01:36 PM

    I checked your site again and it appears to be properly formatted this time.  I checked it from a fully updated iPad though.  If you are still having problems getting it to show up correctly, you can also try adding our mobile responsive widget:

    http://widgets.jotform.com/app/mobile_responsive

    Or you can try forcing the mobile responsive CSS:

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

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

    @media (max-width: 480px) {

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 90% !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: 90% !important;

    }

    .form-all{

    width: 90% !important;

    margin-left:0 !important;

    }

    .form-sub-label-container {

    width: 90%;

    display: block !important;

    }

    }

    If it still does not adjust properly, let us know and we will see what else we can find.

  • Profile Image

    Answered by dudiack on September 11, 2014 at 02:21 PM

    The widget worked! Thanks a bunch, david. 

    On another note, however, there seems to be a fixed height being applied to the iframe via js. I understand due to the nature of iframes that this is somewhat necessary but it looks like there's a completely unnecessary amount being added. Huge amount of blank space on the bottom of the form. Any idea?

  • Profile Image
    JotForm Support

    Answered by david on September 11, 2014 at 03:55 PM

    Glad to hear it! you are very welcome.  You can adjust the height of the iFrame in the embed code.  There should be a height value in the embed code already, it just need to be adjusted:

    Adjust this value will adjust the height of the frame and allow you to get rid of the empty space at the bottom.

  • Profile Image

    Answered by dudiack on September 11, 2014 at 07:16 PM

    Hi, the height on the iframe I'm using is apparently using a script to set the height:

    case "setHeight":iframe.style.height = args[1] + "px"

    Noticing that it does seem to change based on screen resolution. Just seems that the height is somewhat off in comparison to form content.

     

     

  • Profile Image
    JotForm Support

    Answered by Welvin on September 11, 2014 at 08:58 PM

    The script part in the iFrame codes is a back-to-top handler for when your form is using a page break tool. You can remove that and adjust the iFrame height value to remove the empty spaces as suggested. 

    Thank you!

  • Profile Image

    Answered by dudiack on September 11, 2014 at 09:57 PM

    The issue with simply removing it is that it no longer scales appropriately with screen resolution - since the fields collapse due to width restrictions, the height is no longer the same as a tablet/monitor resolution. I've tried to amend this by adding overflow: visible to the iframe but this does nothing. Interestingly, on a resized window on desktop (the following doesn't work on android) if the bottom of the form is clicked, the iframe will "scroll" to make the textfields below the clicked label visible, though there is no evidence of a scroll bar. 

    Thanks again for the assistance!

  • Profile Image
    JotForm Support

    Answered by TitusN on September 12, 2014 at 01:18 AM

    Hello, 

    Setting the overflow to scroll might not help in this case. 

    The Iframe width changes courtesy of the Mobile responsive widget, but the height is constrained by the iframe height setting:  

    Because the widget resizes and stacks the form fields vertically, the fields at the bottom are cut off by the fixed iframe height of 1580px. 

    In any case, there is a lot that has been changed to offer corrective measures.

    If you don't mind, Lets try and roll things back a little: 

    1. Log in to your Jotform account and delete the extra mobile responsive widgets from the form - you only need one - 

    2. Get a fresh embed code and place it on your site (Iframe works best to reduce script conflicts )

    3. Let us know when you do, any extra height that is generated when the form is scaled on a mobile screen, we shall provide the requisite advice to remove it - possibly using a media port. 

     

  • Profile Image

    Answered by dudiack on September 12, 2014 at 12:03 PM

    Removed the extra widgets, not sure how they got there. 

    Fresh embed placed.

    Is my best bet, then, to add the height via css (rather than inline) and adjust it using media queries accordingly?

     

  • Profile Image
    JotForm Support

    Answered by david on September 12, 2014 at 01:34 PM

    In this case I would say yes, adjusting the media queries rather than having a fixed iFrame height would probably be best.  Everything except for the length of the iFrame does indeed appear to be formatted correctly on IOS now though.

    You could use the fixed iFrame height and allow for extra space.  But dynamic sizing is always better.

  • Profile Image

    Answered by dudiack on September 12, 2014 at 02:11 PM

    Will do. Thanks for the help, guys. Greatly appreciated! 

  • Profile Image
    JotForm Support

    Answered by david on September 12, 2014 at 03:14 PM

    You are very welcome! Let us know if you have any further trouble with your formatting and we will be happy to help.