Embed Script for jotform do not work on my webpage.

  • Profile Image
    Sara Foss
    Asked on March 09, 2019 at 05:25 PM

    Trying to embed JotForm contact form. Using IFRAME doesn't work - preview shows a long, skinny rectangular box. Using Souce Code - preview cuts off the bottom (as others have mentioned) and freezes up the screen. Please advise on if this will be fixed or how else I can put a contact form on a custom page!



    This is a re-post of a comment on Getting the Form iFrame Code

  • Profile Image
    jherwin
    Answered on March 09, 2019 at 05:59 PM

    It's possible that there is a conflict with our embed script and your webpage script. Could you please give us the URL of your webpage so we can check it?

    Also, try embedding the form with the iframe script part only:
    1552172317part.png

    Give it a try and let us know how it goes.

  • Profile Image
    sarafossphotography
    Answered on March 10, 2019 at 01:58 AM

    The URL I'm trying to add the form to is:

    https://www.sarafossphotography.com/wedding-investment

    I tried doing what you recommended and deleting the rest and still just got a long skinny rectangular box.

    Here is the I-frame code from Jot Form:

     <iframe id="JotFormIFrame-90670905957165" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/sarafossphotography/lets-chat-" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-90670905957165"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { if (typeof e.data === 'object') { return; } var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { 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; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>


  • Profile Image
    jherwin
    Answered on March 10, 2019 at 06:53 AM

    I checked your webpage and I did not see any embed code embedded in your webpage

    Could you please try to embed the form using the code below:

    <iframe id="JotFormIFrame-90670905957165" onload="window.parent.scrollTo(0,0)" allowtransparency="true"
    allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/sarafossphotography/lets-chat-" frameborder="0" style="width: 1px;
    min-width: 100%; height:539px; border:none;" scrolling="no" >
    </iframe>

    Please give it a try and let us know how it goes. 

    Also, please give us the exact URL where you will embed or put that code on your webpage.

  • Profile Image
    AndrewHag
    Answered on March 11, 2019 at 10:31 AM

    Please try the iFrame code below:

    <iframe id="JotFormIFrame-90670905957165" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/sarafossphotography/lets-chat-" frameborder="0" style="width: 600px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe>

  • Profile Image
    sarafossphotography
    Answered on March 11, 2019 at 10:42 AM

    Well that's a bit better - it shows the form (or part of the form). But there is no "submit" button showing and once you fill in the upper fields and go to the lower fields there's no way to "scroll" back up to the top of the form. Please check it out - same URL as above.


  • Profile Image
    AndrewHag
    Answered on March 11, 2019 at 12:09 PM

    Kindly use this iFrame code instead of above, this should work fine.

    <iframe id="JotFormIFrame-90670905957165" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/90670905957165" frameborder="0" style="width: 600px; min-width: 100%; height:539px; border:none;" scrolling="yes"> </iframe>

    1552320394chrome_4Ha8XYFehY.png

    Feel free to change the width and height values which are marked in the green color in the code above.

  • Profile Image
    sarafossphotography
    Answered on March 12, 2019 at 08:44 AM

    That worked! :-) Thank you so much for your help!