My form works online but not when I embed it in my website

  • Profile Image
    Gustavo 
    Asked on January 15, 2015 at 05:19 AM

    My form works properly in the online version, but when I try to test the embedded one it just displays but the functionality is broken: no validation, no submit,...

    I cannot post my URL here because the form is after a client login. 

    I've already tried all the ways to embed it in my code:

    - the one line script that creates an iFrame dynamically. Something like this: 

    <script type="text/javascript" src="//form.jotformeu.com/jsform/XXXXXXXXXX"></script>

    - the iFrame with the script below to control the height:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/XXXXXXXXXX" frameborder="0" style="width:100%; height:20443px; border:none;" scrolling="no"></iframe><script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    - the iFrame without the script below:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/XXXXXXXXXX" frameborder="0" style="width:100%; height:20443px; border:none;" scrolling="no"></iframe>

    - The iFrame with sandbox attributes:

    <iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/XXXXXXXXXX" frameborder="0" style="width:100%; height:20443px; border:none;" scrolling="no"></iframe>

     

    Any hints or workaround on this issue please?

    Note: I've replaced my form id with XXXXXXXXXX here in this post, but I got it right in my code.

     

    Thanks in advance.

  • Profile Image
    Kiran
    Answered on January 15, 2015 at 10:47 AM

    Hello Gustavo,

    As per the script provided by you, I see that you are using normal javascript embed method. I suspect that the other scripts on your website may be conflicting with the form embed code. In such case, you may try embedding the JotForm using iframe method.

    Please refer to the following guide that can help you in getting the iframe code to embed on your webpage.

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

    Please get back to us if the issue still persists. We will be happy to help.

    Thanks!