Form embedded on website not showing in tablet or smartphone?

Helle, my form doe snot show up on the tablet and smartphone. What am I doing wrong? Look at www.vantoentotzoo.nl

Hi,

I'm checking your website link http://www.vantoentotzoo.nl/ and I see that the form loads at the bottom.

Here's a screenshot where I viewed it on a Android device.

I don't have an Apple device, but viewed it on an iPhone 6 plus iOS 8 emulator

 

You can make your form mobile responsive by two ways:

Method 1: You can enable the options in the form builder by following this guide: http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive 

Method 2: You can use the mobile responsive widget.

 

If you are still having problems, please do let us know and we'll investigate it further.

We'll wait for your response.

Hello Charlie,

Thank you for your help with the not showing up of the form on the iPad and iPhone.
I have got it to work with iFrame so now the form shows up on the iPad en iPhone.

But now another curious thing happens.
When I want to fill in the form on an iPhone 5s and I choose a field, the the website skips to the top
and I can’t see what I am typing.
On an android phone (Samsung) everything appears top be in order but not on the iPhone.
Do you have any idea what the problem can be.

Thank you again for you support!

I checked the embedded form http://www.jotformeu.com/form/52531544437353  on your website   http://www.vantoentotzoo.nl/ but I found that the form iwas embedded using still its script code.

There were error messages in the browser consoles that indicates script conflict.

I suggest you re-embed the form using its iframe embed code 

To get the iframe embed code, follow the steps on this image

#1 Click Embed Forms

#2 Click Embed

#3 Select Iframe in the Embed options list

#4 Copy the iframe embed code

 

Make sure to remove/clean first the existing script embedded code of the form in your website before you add the new iframe embed code.

Please try this process first. Let us know if this did not resolve the issue.

Thanks.

 

 

 

 

Hello Jonathan,

 

Thank you for your help.

I am a graphic designer and not a ict specialist so my knowledge of code is very limited.

I used Adobe Muse to build the website.

I did as you suggested and re-embeded the form using the iframe embed code

and placed it in Muse. For me the easiest way to be sure all the existing files would be gone was to replace the whole site.

The result is that the form on a desktop computer works perfectly but the "skipping" on the iphone is still there.

D you have any suggestion how to deal with this in a way I can undestand with my lack of code knowledge?

Thank you again for your help.

 

Remko van RIjthoven

Hi,

Could you please try the following.

Complete iFrame code using SSL protocol:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformeu.com/form/52531544437353" frameborder="0" style="width:100%; height:944px; 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;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}if(window.location.href && window.location.href.indexOf("?") > -1) {var ifr = document.getElementById("JotFormIFrame");var get = window.location.href.substr(window.location.href.indexOf("?") + 1);if(ifr && get.length > 0) {var src = ifr.src;src = src.indexOf("?") > -1 ? src + "&" + get : src  + "?" + get;ifr.src = src;}}</script>

 

If that does not work, try using this one:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformeu.com/form/52531544437353" frameborder="0" style="width:100%; height:944px; border:none;" scrolling="no"></iframe>

 

When re-embedding, you can follow this guide: http://www.jotform.com/help/99-Adding-Form-to-Adobe-Muse. 

There also quite a lot of problems at the backend of your website, you'll see in your browser console that there are errors in the website itself. It would be best to ask a developer to check it out.

 

We'll wait for your response.

Hi Charlie,

 

I tried both your options but on the iPhone the problem persists.

Again on an Android phone there is no problem. Can it be the problem occurs only on an iPhone?

As I told you I am a graphic designer, with no education in programming. That's the reason I am using Adobe Muse in the first place;-)

I have no developer who can look at the backend of the website. I totaly have to rely on what Muse does. So for me it's no option to let someone look at the backend of the wbsite :-S

I hope you can help me some more although I realise this is going to be a hard nut to crack.

Thanks again for your support.

 

Remko van Rijthoven

Hello,

We completely understand and we are here to assist you to provide the easiest solution possible. :)

I was able to reproduce the mentioned problem on iPhone. There's a weird occurrence on the page when you scroll down on the form section, the page just suddenly jumped back to the top. While I am not quite certainly sure what's causing this but I have a suspicion that it is related to the conflicting scripts between the existing site scripts and the script included on iframe. May I suggest to re-embed the form on your page using only the following iframe embed code. Just delete the existing form embed codes on your site and paste this.

<iframe allowtransparency="true" src="https://form.jotformeu.com/form/52531544437353" frameborder="0" style="width: 100%; height: 1081px; border: none;" scrolling="no"></iframe>

Please update us with the result. Thanks!

Hello Elton,

 

Thank you for your understanding.

I did as you suggested and deleted teh existing iframe from the website and then pasted teh code you have send me but the teh site still jumps up to the top when I try to fill in a field :-S

Do you have any other suggestion? I am clueless...

 

Remko van Rijthoven

Hello vantoentotzoo,

I am also not sure what is causing this issue. I would suggest you to please use the following embed code and see if that solves your problem:

 

<iframe allowtransparency="true" src="https://form.jotformeu.com/form/52531544437353?nojump" frameborder="0" style="width: 100%; height: 1081px; border: none;" scrolling="no"></iframe>

 

Do get back to us if the issue persists.

Thank you!

Hello Ashwin,

 

I used the code you suggested but still no change.

Could it be a problem wich only occurs on the iPhone?

I hope you have another suggestion.

 

Thanks again,

Remko van Rijthoven

I have tested your form in an iPhone emulator. Let me assign this to someone to test the form in a real iPhone environment.

Hello Jeanette,

 

That would be nice, thank you for your help.

 

Remko van Rijthoven

I was able to see the problem as well when I test the form embedded on the website http://www.vantoentotzoo.nl/

It was a struggle filling in the form because the page keeps on moving/changing which most probably due to several script conflict.

From what I have observed, the problems seems to have to do more with script issue on the page itself and not on the embedded form.

 

Checking the browser console reveals several script error that originates from contents that were on the page and not the form.

Perhaps you can remove first the embedded form (clear all embedded code of the form), and then check again the console if these script errors are still happening on the page itself. This way we will be able to know more if the form have anything to do with the issue.

Please let us know once you have removed the form on the website and we will check further.

 

 

 

Hello Jonathan,

 

That's a good suggestion.

Can I remove the embedded form only on the mobile version of the website.

The reaseon I alsk this is because the form is live this instant and is being used.

If this is not an option is there a set time you can respond very quickley so the form wil not be down to long?

I live in Holland so our timezones a different and I don't expect you to work at night ;-)

 

Remko van Rijthoven

Hi Remko,

If I understand correctly, the URL of the website version (desktop and mobile) were different?

If this is the case, then yes, you can remove it only on the mobile website. It actually is more better since end-users can still browse the website by using the Desktop website instead.

Let us know the direct URL of the mobile website so that we can immediately check it.

Thanks.

Hello Jonathan,

 

I am planning to remove the form on this Monday at 20:00 h. (GMT/UTC + 01:00 hour Amsterdam timezone).

The URL of the website is www.vantoentotzoo.nl/phone/index.html

I hope you are set and ready ;-)

 

Thanks again,

Remko van Rijthoven

H Remko,

Thank you for updating us and letting us know of your schedule.

We will be checking this then. 

Just respond again to this thread once you remove mobile website and we will be notified about it. We will be able to immediately check and test the issue then.

 

Regards,

Hello Jonathan,

 

I have removed the form on the mobile version of the website

www.vantoentotzoo.nl/phone/index.html

I hope you can come up with the answer to the problem.

 

Thanks,

Remko van Rijthoven

Thank you for the update. 

Please do advise us to when will you embed the form back to the mobile version of your website so we can perform our test. Or if you can give us a timeframe that we could come in and check it to see what else can be done to solve the issue, that would be great.

Thank you.

Hi,

Thank you for your reply. Please let us know, when you embed the code to your website.

We are waiting for your response.

I hope, it will work.

If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

Hello Mike,

 

I have embedded the form once more but the problem is still there.

I hope you have any idea of what is going wrong or of what I am doing wrong.

 

Thanks again,

Remo van Rijthoven

Thank you for letting us know that you have embedded the form back to your website. And yes, the issue still persist.  I was able to reproduce the issue using an iPhone emulator. However, I'm sure that the issue is not within the form since it's working perfectly with an android phone as I have tested also. 

 

I would suggest you try to check this error with Muse: http://www.vantoentotzoo.nl/scripts/museutils.js?183364071 

Line 76:

JSON.parse(b.data));var c=null;data&&data.player_id&&(c=a("#"+data.player_id));(!c||!c.length)&&a("iframe").each(function(){if(this.contentWindow==b.source)return c=a(this),!1});return c},f=function(a){var c=JSON.parse(a.data);if(c){if("ready"==c.event){var f=g(a);f.data("isReady",!0);var d=f.data("readyQueue");if(d&&d.length)for(var j=0;j<d.length;j++)d[j]();f.data("readyQueue",null)}for(j=0;j<b.length;)f=b[j],f.source==a.source&&f.method==c.method?(f.callbackFn(c.value),b.splice(j,1)):j++}};window.addEventListener?

It seems that the error is within that line. You can check that with Muse support or check for different mobile options in Muse.

Hello Mike,

 

Thank you for the feedback.

I will contact Muse support if they can help me with this problem.

Thanks for all the support the team of JotForm has given me.

 

Remko van Rijthoven

Apologies if we're unable to resolve the problem fully here. I tried to check this link again http://www.vantoentotzoo.nl/phone/index.html, and I see there are a lot of errors or conflicts in the scripts loaded, as already mentioned by my colleagues.

Please do check if any of the scripts, plugins or add-on you added are updated and does not cause any errors.

Thank you.