Embed form within my own popup lightbox not displaying form

  • Profile Image
    KSIndustrialGroup
    Asked 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:

    http://www.aerowebstudio.net/codecanyon/jquery.lightbox/examples.php?theme=default#help20

    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?

    Thanks, David

  • Profile Image
    guilledutra
    Answered on October 18, 2013 at 12:41 PM

    Hi,

    could you try by using the Iframe code version of your form:

    http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Hope it helps

    please let us know if you need further assistance

    Thanks

  • Profile Image
    KSIndustrialGroup
    Answered on October 21, 2013 at 11:40 AM

    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.

    http://50.87.187.163/dkendall/test-industrial/index.html

    Any ideas?

    Thanks, David

  • Profile Image
    EliezerN
    Answered on October 21, 2013 at 12:40 PM

    @David

    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.

    Thanks