Why is our embedded form not loading on mobile devices?

  • Profile Image
    Danielsan
    Asked on February 22, 2018 at 09:06 AM

    Hello JotForm Team,

    I created a form, copied the code and embedded it on my Adobe Muse responsive site.

    I can see the form through all breakpoints in Muse but online it shows up only on the desktop version, and when I change the browser page size it disappears definitely!

    can you please help me? (sorry for my beginner english!)

    Thanks,

    Daniel

  • Profile Image
    TREVON
    Answered on February 22, 2018 at 10:20 AM

    I have checked your form and URL you shared and noted that you have embedded your form using Javascript method.

    The most likely reason may be there is Javascript conflicts between you website and your form leading to disappearance of the form.

    Kindly try using form Iframe method to embed your form to your website.

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

    https://www.jotform.com/help/67-Which-Form-Embed-Code-Should-I-Use

    Kindly do let s know if the above resolved the issue.

  • Profile Image
    TREVON
    Answered on February 22, 2018 at 12:23 PM

    Thank you for your response. This may be related to the height of the iframe. Kindly try increasing the height of the iframe as shown in highlighted area in red.

    <iframe id="JotFormIFrame-80445834063355" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" src="https://form.jotformeu.com/80445834063355" frameborder="0" style="width: 1px; min-width: 100%; border: none; height: 1990px;" scrolling="no"> </iframe>

    Alternatively you can use the above iframe code.


  • Profile Image
    jonathan
    Answered on March 02, 2018 at 05:54 PM

    I checked on your website and I was able to see the issue as well.

    1520031118zzz 2018-03-03 06.50.00.png


    What I suggest your try first is to get the latest iframe embed code of your form and re-embed again the form on your website.

    This is to make sure the height of the iframe matches the height of the current form version.

    Let us know if issue persist even after doing this already.



  • Profile Image
    Danielsan
    Answered on March 03, 2018 at 05:21 AM

    hallo Jonathan, I tried but it's even worst! it just puts the footer down but the issue is still the same! I copied the iframe code and pasted it in the "edit html" window of the existing iframe.

    maybe I do the wrong process but it's getting a bit frustrating!

    can you show me a better solution?

    thank you

  • Profile Image
    Danielsan
    Answered on March 03, 2018 at 06:46 AM

    meanwhile I noticed that when I try to fill the form, the SEND and PRINT button appears..

    but the issue is not solved!

  • Profile Image
    Mike_G
    Answered on March 03, 2018 at 11:40 AM

    The issue is happening when the payment field in your form completely loads. Then the height of the form on your website will only be refreshed as you fill it.

    Can you try to embed your form using the Iframe code, but without its <script> part, please?

    Just this part:

    <iframe id="JotFormIFrame-80445834063355" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" src="https://form.jotformeu.com/80445834063355" frameborder="0" style="width: 1px; min-width: 100%; height:2000px; border:none;" scrolling="no"> </iframe>

    Without this part:

    <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-80445834063355");...</script>

    I hope this helps. If, in any case, the issue is not resolved, please do not hesitate to get back to us and we will be glad to help you further.

  • Profile Image
    Danielsan
    Answered on March 26, 2018 at 12:07 PM

    Hallo Jotform Team, I did what Mike_G suggested me and it worked, at least for a part of the site. I still have 2 issues in the mobile versions. I can't see the last email, send and print buttons at the bottom. And when I turn the phone horizontal the buttons appear but the selection of products I did before disappear!

    Can you please help me with this issues?

    the web address is: beecowraps.ch

    thank you!

  • Profile Image
    david
    Answered on March 26, 2018 at 01:13 PM

    Try increasing the height of the frame until the full form shows:

    <iframe id="JotFormIFrame-80445834063355" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" src="https://form.jotformeu.com/80445834063355" frameborder="0" style="width: 1px; min-width: 100%; height:2000px; border:none;" scrolling="no"> </iframe>

    The products should not be clearing unless your page has different pages load for mobile layouts.  If that is the case, there is not much we can do form our end to prevent it.

  • Profile Image
    Danielsan
    Answered on March 26, 2018 at 03:13 PM

    I already increased the height of the frame by suggestion of Trevon, but the issue is not solved.1522091612printscreen.png

    I tried also to turn the phone with only the one form page open, but the products are still clearing. but this is the minor issue. I need to fix the frame height!

    thanks!

  • Profile Image
    TREVON
    Answered on March 26, 2018 at 03:48 PM

    Apologies for any inconveniences caused. Kindly allow me more time to have a look at the issue. I will update you on this thread.

  • Profile Image
    TREVON
    Answered on March 30, 2018 at 10:57 AM

    I have been checking your form and working on a solution for the form embed issue on mobile devices and the best solution I would suggest is if you would enable your embedded form to scroll.

    If this is a suggestion you are willing to try kindly use the embed code below.

    <iframe id="JotFormIFrame-80445834063355" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" src="https://form.jotformeu.com/80445834063355" style="width: 1px; min-width: 100%; height:2000px; border:none;" scrolling="yes" frameborder="0"> </iframe>

    Kindly do let us know if this resolves your issue.

    Our apologies for any inconveniences caused