What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
iframe embedded form is covered by other page elements when viewed on mobile/responsiveAsked by macaulayscott on September 11, 2015 at 12:46 PM
I have switched to an iframe embedded form to enable viewing on mobile phones. Now when the browser window size is reduced, or the form is viewed on mobile phones, other responsive elements on the page cover the form up. Please help! Thanks, James.
I assume you meant this problem
Can you please try re-embedding the form to your website using this iframe code instead
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/30933049146958" frameborder="0" style="width:100%; height:1196px; border:none;" scrolling="no"></iframe>
I removed the script part of the default iframe embed code. Let us try to test how it goes when on the website page.
Make sure you clear first also any previous embed code of the form, before adding the iframe code I provided.
Please let us know if this did not make any difference.
Thanks Jonathan. You are right about the problem. I have made the suggested change and unfortunately it did not fix the issue.
I apologize for the mistake. Unfortunately, I did not realize that the forum message editor had modified the embed code I provided previously.
As you can see on the message the src URL had become incorrect because it was stripped with the full path -- it was lacking http.
Can you please try it instead using the iframe embed code using your Form Builder.
Re-embed the iframe code using the one from the Form Builder.
Please retry this first.
I understand the frustration as it it seems to be just repeating, but getting the fresh embed code do have effect.
Let us know if still did not resolve the issue.
Hi, I have re-embedded and the issue is not resolved.
It seems like there's a problem where the embed code is wrapped.
You'll noticed that the embed code is wrapped on a class element "responsive-embed" which has a height of "0". Another is that it is also wrapped in a <p> which is a paragraph tag. I would recommend removing it there and place it on a <div> element instead.
I also noticed the <script> code under the "responsive-embed", I believe it should be under or just on the same level of the iFrame code. But you could try removing it.
See if any of those suggestions would work. I hope that helps.
Thanks for your assistance. I have removed the responsive-embed element and the <p> tags with no effect. Regarding the <script> under the iframe I'm not sure how it gets there. it's not on the html page I am editing. I hope the screen shot below helps.
I'm checking the website link and the element class "responsive-embed" is still being added when I resized the screen window. It looks like you are using a script or you have a CSS file to make your website mobile responsive, is that correct?
I see that the class "responsive-embed" is found in the style.responsive.css, in the screenshot below you'll see the line and the CSS design for the responsive-embed. The height is set to "0" or none. Try setting it to 1000px, same with the iFrame embed code. See if adjusting that part of your CSS will make the form more responsive.
Let us know if that works.
Excellent that's great. Thank you for your help. The form now works with the responsive layout. I changed height as suggested. It seemed the "responsive-embed" "height" needed any figure other than 0. I also had to change the code beneath "responsive-embed iframe" so the position was set to "relative" not "absolute" Thanks again.
You're welcome. Glad to hear that you resolved the problem in your end.
Should you need any assistance again, please do not hesitate to open a new thread here in the forum.