iPhone: How to make a form to fit into mobile size

  • Profile Image
    Asked on June 18, 2013 at 10:41 PM


    I have a form that fills the screen and looks great with an iphone when viewing the link http://form.jotformpro.com/form/30433652374956 but when viewing the web page with the script embedded () as seen on this page www.lasercorp/service/index/html, it looks tiny and does not size properly.

    Your help is much appreciated,



  • Profile Image
    Answered on June 19, 2013 at 12:02 AM

    For iphones browsers, we recommend you to embed the iFrame version of the form and adjust the height to 90% or 80% , if the form doesn't display correctly

    Please let us know if the issue persist

  • Profile Image
    Answered on June 19, 2013 at 11:03 AM

    Thanks for teh info. I set the page to use ifram and copied teh code in my html page. I tried  setting the height to 80& 90% but the form is still not sizing to tehscreen the way the link does. you can see the iframe at www.lasercorp.com/service

    I also change the width to 320 px as it held the width better as that is teh size of the form.

    Any other ideas?


  • Profile Image
    Answered on June 19, 2013 at 11:33 AM

    Can you please try adding this code in your HTML header before the </head> tag.


    iframe, iframe#JotFormIFrame { height:550px !important; }


    Then add this code in your form styles

    @media only screen and (max-device-width: 480px) { iframe,.form-all { height:500px !important; } }

    Once you have added the cod, please let us know.

  • Profile Image
    Answered on June 19, 2013 at 11:54 AM

    As an alternative to the iFrame method, you could do the following:

    1. Peplace all of your web page's code with the full source of the form but copy the code from http://form.jotformpro.com/form/30433652374956 instead of the form builder

    2. Change the title in the head from "Form" to "LaserCorp Toner and Service Request"

    That's it.

    This is exactly what I did here. Notice the URL which shows that it's an embedded form. My tests at BrowserStack indicate that it displays correctly in iPhone. However, the drawback with this method is that every time a change is made in the form builder, you would have to repeat the above steps. With the iFrame method provided by my colleague, there's no such issue.

  • Profile Image
    Answered on June 19, 2013 at 03:11 PM

    Thanks for the two solutions. I am trying the iframe solution and have added the section before the header but do not know where to add the @ media ...... part.


    Here is the Jotform iframe code that I pasted into the htlm page. Where do I put the @media ... code.




    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,200)" allowtransparency="true" 


    src="//www.jotformpro.com/form/30433652374956" frameborder="0" style="width:100%; height:90%; 


    border:none;" scrolling="no"></iframe>


    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var 


    iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case 


    "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + 


    "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} 


    else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

  • Profile Image
    Answered on June 19, 2013 at 04:12 PM

    Jefrey was referring to the CSS injecting directly through the form builder.

    Please try it and let us know if you need any further assistance.

  • Profile Image
    Answered on June 19, 2013 at 04:43 PM


    Thanks for the clarification. I have added the injected css but it did not help :-(.


    Any other ideas?



  • Profile Image
    Answered on June 19, 2013 at 05:43 PM


    I have tested several CSS codes to inject that will adopt to any pixel on mobile devices and I changed the Form width to 920 to be able to look nice on a desktop browser.

    Kindly check if this is what you wanted the form to look like, if not I can adjust further more.

    Here's the link to that clone http://form.jotformpro.com/form/31696711755967?

    Here's the code I injected for it to be able to adopt to the pixels of mobile devices especially on iPhone. Try it even on portrait mode.

    @media screen and (orientation: landscape) { html, body { width: 100%; } .content h1.landscape { display: block } .content h1.portrait { display: none } } @media screen and (orientation: portrait) { html, body { width: 100%; } .content .landscape { display: none } .content .portrait { display: block } }

    Kindly let us know if problem persist, so that we could further run some tests.

    Always clear your browser cache and cookies prior to changing your form to be able to see the changes made.

    Thank you for using JotForm.

  • Profile Image
    Answered on June 22, 2013 at 06:13 PM

    I tried injecting your new css code but unfortunatley it still does not work. Please remember the issue is not when the form is viewed at the jotformpro.com website but when the script is placed inside an html page.

    It has always worked well when viewed at the jotform website. The form script is now embedded in www.lasercorp.com/service.index.html. Feel free to change the code in my form and try to view it on an mobile using my web page. I have made a backup of my form.



  • Profile Image
    Answered on June 22, 2013 at 06:16 PM

    FYI the form is called LCService in my account

  • Profile Image
    Answered on June 22, 2013 at 08:40 PM


    What you just need is a meta content that would zoom the form when viewed on mobile. You can use the following:

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

    Simply insert that code between the head tag of your page <head> </head>. Or you can copy the full script here and replace your service/index.html full source code. This should help. Here's a demo: https://shots.jotform.com/elton/test_mobile.html

    Sample Result:

    Hope this helps. Thank you!

  • Profile Image
    Answered on June 24, 2013 at 03:33 PM

    Thanks Elton! Your solution worked perfectly and was the only code required. I took out all the other code for those who are following this thread.

    here is a tough one for you :-).


    On android, when the form goes to page 2 it does not go to the top of the form , so user starts entering data at the middle and then get a message that more details are required when they press the next button, becasue they do not see the top of the page.

    On iphone it works fine.



  • Profile Image
    Answered on June 24, 2013 at 04:43 PM

    Hi Eric,

    Have you tried re-embedding the form using its iframe code? If not yet, please try and check if it makes the difference.
    From what I can see in your website here http://www.lasercorp.com/service/  , it is embedded using the script code. Tell us if I am checking the wrong website instead.

    It will help us also investigate furhter if you can share to us the specific device and android version you were able to encounter this issue.