jotform not displaying in popup

Hi @ohorses,

It seems that JotForm will not work with Hustle when the script is embedded directly.
I did do some further tests from my end and I was able to embed it by using a shortcode as mentioned in their docs page here:
https://www.jotform.com/help/174-Embed-JotForm-in-Wordpress-using-the-Embed-Form-Plugin

Cheers,
Predrag

Thanks for trying to help. I got the shortcode installed, but it still does not open for me.

[jotform id=”200416039556149″]

I did also get the frame code to work except it was way too narrow inside the popup.
I tried changing the min width from 100% to 700px but that did not help either.

<iframe id=”JotFormIFrame-NaN” title=”undefined” onload=”window.parent.scrollTo(0,0)” allowtransparency=”true” allowfullscreen=”true” allow=”geolocation; microphone; camera” src=”https://www.jotform.com/NaN&#8221; frameborder=”0″ style=” min-width: 100%; height:undefinedpx; border:none;” scrolling=”no” > </iframe> <script type=”text/javascript”> var ifr = document.getElementById(“JotFormIFrame-NaN”); 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>

So… Jotform suggest using the “Iframe” code without the <script> part of the code above.
The form opens but is way too narrow, any ideas?

Hellow?

Hello @ohorses

I hope you are doing well!

I’ve tested the iframe code you’ve shared above on a simple page, and it has the same width as shown in a pop-up on your site. So the issue is not related to the Hustle plugin. The iframe code needs to be adjusted.

Please try adding width="100%" height="300px into the <iframe> tags, so a final code will look like this for example:
<iframe allowfullscreen="true" src="https://form.jotform.com/200416039556149" frameborder="0" width="100%" height="300px"> </iframe>

Hope this helps!

Kind regards,
Nastia

WOWW! Thanks, finally after a week of trying…
So in the end all we had to do was change the height. we were trying to change the width..
who knew?:)
Close ticket..again THANKS!