JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
Embed form within my own popup lightbox not displaying formAsked by KSIndustrialGroup on October 18, 2013 at 11:38 AM
I have created my own lightbox popup to display inline HTML when you click it. I used the following plugin for the lightbox:
I am trying to embed a Jotform within the lightbox code but it doesn't display the form. 3 important things I noticed:
1. When I use the "embed code" option within lightbox, it DOESN'T show the form.
2. When I use the "source code" option within lightbox it DOES show the form.
3. When I use the "embed code" option OUTSIDE lightbox somewhere else in the code, it DOES show the form.
It only doesn't work when I try to use the embed option within the lightbox which is what I want... What would be the reason for this?
displaying form JotForm source www thanks
could you try by using the Iframe code version of your form:
Hope it helps
please let us know if you need further assistance
Thanks for the info... iframe works great except for one issue I'm dealing with now. Things seem fine in Safari and Chrome, however when I test it in IE9 and Firefox, the frame only partially appears in the window on the first click. Then if you click out of the lightbox popup and and click it again, the full form appears. Obviously I would like it to fully appear on the first click
Use the link below to see what I am talking about, just click the "KARL STORZ Industrial Financing Now Available" banner just below the image slider.
I tested your form in FireFox and found that the height is automatically changed from 476px to 40px:
So, in order to fix the issue, Please edit the height of the iFrame by adding !important after 476px as I've highlighted below:
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//support.jotform.com/form/32904995633161" frameborder="0" style="width:100%; height:476px !important; border:none;" scrolling="no"></iframe>
That will enforce the to the browser to apply the height 476px.
I hope that helps, however, don't hesitate to contact us if you need further assistance with this.