Why is our embedded form not loading on mobile devices?

Hello JotForm Team,

I created a form to embed my website, 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

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.

Hallo Trevon, thanks for your advice! now it works on all devices but it don't show up completely everywhere (in the phone version it cuts the bottom) and does not fit the width between more or less 900 and 600 pixels. Is there still something I'm doing wrong?

on fullscreen it's ok!

thanks again!!

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" onDISABLEDload="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.

Hallo, I'm back with the same problem. I changed the hight in the iframe code but I still can't see the bottom part of the form so I don't have the send option.

https://beeco01.businesscatalyst.com/comanda.html

And there is also yet a problem with the width between more or less 900 and 600 pixels.

thanks for your help!

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

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.

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

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

but the issue is not solved!

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" onDISABLEDload="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.

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!

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

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

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

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!

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

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" onDISABLEDload="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