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

  • Profile Image
    EltonCris
    Answered on August 13, 2014 at 04: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!

  • Profile Image
    amanda716
    Answered on August 13, 2014 at 09:58 PM

    Hi,

    Unfortunately, it didn't change anything.

  • Profile Image
    EltonCris
    Answered on August 14, 2014 at 12:17 AM

    Thanks for your reply.

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

    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!

  • Profile Image
    amanda716
    Answered on August 14, 2014 at 09: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.

  • Profile Image
    Jeanette
    Answered on August 14, 2014 at 01: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.

  • Profile Image
    amanda716
    Answered on August 14, 2014 at 03:06 PM

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

  • Profile Image
    Jeanette
    Answered on August 14, 2014 at 04: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

  • Profile Image
    amanda716
    Answered on August 14, 2014 at 08:52 PM

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

     

    <iframe id="JotFormIFrame" onload="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.

  • Profile Image
    Jeanette
    Answered 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" onload="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>

  • Profile Image
    amanda716
    Answered on August 15, 2014 at 02:56 PM

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

  • Profile Image
    Jeanette
    Answered on August 15, 2014 at 05: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



    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.
  • Profile Image
    amanda716
    Answered on August 15, 2014 at 07:54 PM

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

  • Profile Image
    EltonCris
    Answered on August 15, 2014 at 08: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.

    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!

  • Profile Image
    EltonCris
    Answered on August 15, 2014 at 09: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:

    Result:

    If you require further assistance, let us know here.

    Best Regards!

  • Profile Image
    EltonCris
    Answered 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!

  • Profile Image
    amanda716
    Answered on August 16, 2014 at 08:47 AM

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

  • Profile Image
    Stephan 
    Answered on November 11, 2014 at 07: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.