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 and lightbox on same page causes issuesAsked by poopselfie on February 23, 2014 at 02:36 AM
I have embedded an iframe form and a lightbox donation form within the same page and it seems that whenever i activate the lightbox, the viewport not only jumps to the top of the page, but upon further inspection I noticed that it also cuts off the bottom half of my iframe form leaving the only way to get the form back by refreshing the page. Any thoughts?
same page same and iframe form donation Activate refreshing
You can use the first version of the lightbox form, I guess this would fixed everything. This works fine on my test as well.
To do that, simply remove the "2" right after "feedback" found on the first line of the lightbox embed code. Refer to this code for your guide:
Hope this helps. Regards!
The issue is still there. I'm not sure what else to try. It seems that the lightbox when activated seems to push down the form and cuts off the submit button on the "Public" radio button. The first submit button stays fine, but the lightbox seems to leave some invisible box over a portion of the form. Very strange. COuld be something in my form or div sizing i suppose. Changing the lightbox to the first version did not change anything.
This is the link I am now having a problem with as well as the original link i posted. Same issue on both pages.
In looking through the source on the page, i see that the issue is the height is set to 407px, but I can't seem to find where that is set, I dont think it is in the css or in any of the form settings...
Update: The issue was solved by injecting the full source instead of the iframe. It seems that multiple embedded forms causes issues in an html page.
Glad to hear it.
You can also use the iframe embed code without its supporting script. I mean, exclude the script part when you embed the form, just the iframe code. You can use the following short iframe embed code.
<iframe allowtransparency="true" src="//form.jotform.us/form/40340777209151" frameborder="0" style="width:450px; height:600px; border-radius:10px; border:none" scrolling="no"></iframe>
By the way, have you already tried the lightbox version suggested on my first post about removing the "2" on the feedback source? This should work fine as seen here: https://shots.jotform.com/elton/test_337346.html. You have to clear cache when you make the changes above. You will also observed that clicking the lightbox form will not bring you to the top unlike the new version used on your page.
Ah, thank you so much. The removing of the script on one of the iframes solved all issues and I can now use multiple iframes on the same page. Beautiful. You're a life saver.
Thank you on behalf of my colleague.
Let us know please if you need further assistance.