Jotform iFrame not showing on mobile

I've got jotform embedded with iFrame on my Wordpress website, it works perfectly on desktop but displays a blank screen on mobile.

Does anybody know what might be causing this issue?

Edit: It shows when I put my phone in landscape mode, but disappears when put back the normal way

Hello Tyler,

Thank you for reaching out to JotForm Support. I would suggest you try and change the dimensions of the form first. Kindly refer to these guides also to learn more about iFrame embeds and how to customize them:

• Getting the Form iFrame Code
• Which Form Embed Code Should I Use
• iFrames: Adjusting Width for Responsive Sites

You may also preview your form first before publishing it to see how it would look like on your phone, tablet, or computer.

Give it a try and let us know how it goes.

Hey Bryan,

Changing the dimensions unfortunately does not help!

Hi Tyler,

Thanks for reaching out to Jotform Support. I've viewed your website on my Android phone and the form was displayed correctly. The same result is if I switch to landscape mode.

If the issue still persists, please try it on a different device. The display of the form is mostly resolved when clearing the browser cache and site data. If your test on a different device works fine, you may need to clear the cache of your mobile browser.

Keep us updated and let us know if you need any more help.

Hey Lesther, it does work now that I've enabled scrolling. I've been messing with it since I posted this question.

If I disable scrolling it does not show.

Do you know possibly what would be the cause of that?

Hi Tyler,

Thanks for getting back to us. Actually, it's because of the size of the HTML element section you have embedded Iframe in. Can you please with the scrolling option turned ON increase the height to 1040px.

Replace the 539px with 1040px in the below mentioned iframe code in your embedded website.

<iframe

   id="JotFormIFrame-211468205805150"

   title="General Inquiry Contact Form"

   onload="window.parent.scrollTo(0,0)"

   allowtransparency="true"

   allowfullscreen="true"

   allow="geolocation; microphone; camera"

      src="https://form.jotform.com/211468205805150"

   frameborder="0"

   style="

   min-width: 100%;

   height:1040px;

   border:none;"

   scrolling="yes"

  >

  </iframe>

Give it a try and let us know how ut goes.

Hey Fahad,

This is what the form looks like when I do your suggestion, as well as delete the script under the iFrame code. The form does show up like it should, but after submitting this long box shows up:

https://streamable.com/94xp5p

This is what it looks like with your suggestion and the </script> section still there in the code:

https://streamable.com/v5bw79

Hope that makes sense!

Thanks for getting back to us. Please allow us more time to review this. We'll get back to you as soon as possible.

If you have any other questions, just let us know.

Hey Lesther,

Have you had a chance to see if there might be a fix for this?

Thank you!

I'm sorry for the late response. Kindly insert the following code within the iFrame code.

onDISABLEDload="self.scrollTo(0,0)" 

Below is what it should look like.

<iframe onload="self.scrollTo(0,0)" id="JotFormIFrame-211468205805150" title="General Inquiry Contact Form" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/211468205805150" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe>

Give it a try and let us know how it goes.