-
Tyler_JetteAsked on August 4, 2022 at 10:36 AM
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
Page URL: https://destineventrentals.com/contact/ -
Bryan_MReplied on August 4, 2022 at 11:56 AM
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.
-
Tyler_JetteReplied on August 4, 2022 at 12:38 PM
Hey Bryan,
Changing the dimensions unfortunately does not help!
-
Lesther JotForm SupportReplied on August 4, 2022 at 1:59 PM
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.
-
Tyler_JetteReplied on August 4, 2022 at 2:04 PM
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?
-
Fahad JotForm SupportReplied on August 4, 2022 at 3:29 PM
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.
-
Tyler_JetteReplied on August 4, 2022 at 7:45 PM
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:
This is what it looks like with your suggestion and the </script> section still there in the code:
Hope that makes sense!
-
Lesther JotForm SupportReplied on August 4, 2022 at 8:57 PM
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.
-
Tyler_JetteReplied on August 5, 2022 at 8:33 PM
Hey Lesther,
Have you had a chance to see if there might be a fix for this?
Thank you! -
Lesther JotForm SupportReplied on August 6, 2022 at 5:17 AM
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.