Why isn't my form showing up on mobile devices?

  • amanda716
    Asked on August 13, 2014 at 2:53 PM
  • Elton Support Team Lead
    Replied on August 13, 2014 at 4:31 PM

    Hi,

    Add a Mobile Responsive Widget to your form, this might help resolve the problem.

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

    Let us know if this doesn't make any difference.

    Thanks!

  • amanda716
    Replied on August 13, 2014 at 9:58 PM

    Hi,

    Unfortunately, it didn't change anything.

  • Elton Support Team Lead
    Replied on August 14, 2014 at 12:17 AM

    Thanks for your reply.

    I can see what you mean after checking it on iPhone. 

    Why isnt my form showing up on mobile devices? Image 1 Screenshot 20

    The easiest way to resolve this is to re-embed your form using iframe embed code. Getting-the-Form-iFrame-Code. This commonly happens when the form scripts conflicts with your website scripts. Using iframe will prevent the form from conflicting anything on your page.

    Please continue to update us if the problem still persists after using iframe. Thanks!

  • amanda716
    Replied on August 14, 2014 at 9:53 AM

    When I copy the i-frame code the form disappears in both mobile and non-mobile systems. I didn't change anything to the code, but it won't display the form anywhere when I use the i-frame.

  • Jeanette JotForm Support
    Replied on August 14, 2014 at 1:02 PM

    I inspected the form in your site http://www.proresumesnow.com/order-professional  and iFrame code is not there. The form is still embedded using the script version (Embed version)

    The reason why you need iFrame code is that your page have jquery libraries that go in conflict with our form's code (javascript prototype). So please remove the entire line of code and replace it with the iFrame version.

  • amanda716
    Replied on August 14, 2014 at 3:06 PM

    I put the iframe code back in, but it doesn't work on mobile.

  • Jeanette JotForm Support
    Replied on August 14, 2014 at 4:23 PM

    I still see the javascript in your webpage.  Please remove that line of code and just leave what it is between <iframe> tags

    Why isnt my form showing up on mobile devices? Image 1 Screenshot 20

  • amanda716
    Replied on August 14, 2014 at 8:52 PM

    Thanks. Can you tell me literally which exact part to remove when my copy/paste part looks like this:

     

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/42164698389976" frameborder="0" style="width:100%; height:1533px; 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>

     

    I attempted to do it and the whole form disappeared.

  • Jeanette JotForm Support
    Replied on August 14, 2014 at 10:27 PM

    To avoid the conflict with jquery libraries, please remove the script portion, in yellow.

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/42164698389976" frameborder="0" style="width:100%; height:1533px; 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>

  • amanda716
    Replied on August 15, 2014 at 2:56 PM

    I made the changes, but it still will not show up on mobile.

  • Jeanette JotForm Support
    Replied on August 15, 2014 at 5:34 PM

    You must update the Doctype declaration of your page to this one:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Then remove the CSS code in the form

    Why isnt my form showing up on mobile devices? Image 1 Screenshot 20

    And add the mobile responsive widget.

    I made test with a clone of your form and it shows correctly on mobile

    It works both with the Custom CSS or the Mobile responsive widget.
  • amanda716
    Replied on August 15, 2014 at 7:54 PM

    Thanks. I don't know how to change the Doctype of my page.

  • Elton Support Team Lead
    Replied on August 15, 2014 at 8:28 PM

    @amanda716 

    Thank you for your reply and cooperation.

    First, I have re-added the CSS codes to your form. Removing it will make your form cut on the mobile screen.

    Your form seems to be displaying on small width browsers. It's fit and looking good.

    Why isnt my form showing up on mobile devices? Image 1 Screenshot 20

    The only problem here is on actual mobile device. We will check your source code and run a local tunnel test via browserstack. Hopefully we will be able to find the root cause of this problem. We'll let you know once we found solution.

    Stay in touch!

  • Elton Support Team Lead
    Replied on August 15, 2014 at 9:24 PM

    Aha! found it :)

    Your form is on a div element with a very obvious class called "mediumScreenDisabled".

    That means when the form is viewed on a medium screen like mobiles, the content including the form will not be displayed.

    So the trick here is to change the class name "mediumScreenDisabled" of the div element where your form is embedded. You can change it so anything you like example mediumScreenEnabled.

    To do that, just edit order-professional.html file to notepad or to any text editing tools you have.

    Then find "jotform" and look above it. You will see mediumScreenDisabled, change it to anything e.g. mediumScreenEnabled. Check the following screen:

    Why isnt my form showing up on mobile devices? Image 1 Screenshot 30

    Result:

    Why isnt my form showing up on mobile devices? Image 2 Screenshot 41

    If you require further assistance, let us know here.

    Best Regards!

  • Elton Support Team Lead
    Replied on August 15, 2014 at 10:20 PM

    @ amanda716 

    Or here's the easiest solution without modifying anything on your form source code. Just add the following on top of your form embed code.

    <style type="text/css">@media screen and (max-device-width: 568px) { .mediumScreenDisabled { display:block !important;} }</style>

    Cheers!

  • amanda716
    Replied on August 16, 2014 at 8:47 AM

    It's okay. I just don't think it's going to work with 1&1.

  • Stephan
    Replied on November 11, 2014 at 7:11 AM

    @amanda716 Since you are using a 1&1 MyWebsite, you can make the source code widget visible on mobile devices when changing the setting for your mobile page. You can configure the mobile mode to include objects which are not optimized for mobile (Disable the checkbox for "Only display optimized content on smartphones and tablets" in Settings -> MyWebsite Mobile.