Form not displaying when embedded on my webpage

  • shmoller
    Asked on April 18, 2016 at 9:36 AM

    I am embeding my code and for some reason its not showing up on my site there is a big empty white space showing the form is there its just not letting me see it 

  • Kiran Support Team Lead
    Replied on April 18, 2016 at 11:16 AM

    It seems that you have some CSS code  applied to the iframe tag on your web page (line 225 in Index page) which is not allowing the form to display on the web page.

    Form not displaying when embedded on my webpage Image 1 Screenshot 30

    I am able to see that the form is displayed normally on the web page by disabling this code from the browser console.

    Form not displaying when embedded on my webpage Image 2 Screenshot 41

    please try removing this code and check if the form is displaying on the web page. Please get back to us if the issue still persists. We will be happy to assist you further. 

     

  • shmoller
    Replied on April 18, 2016 at 11:43 AM
    Where would I make those changes to?
    ...
  • Kiran Support Team Lead
    Replied on April 18, 2016 at 1:49 PM

    As I check your website further, I see that you are using WordPress to build your web page. It looks like that the code is added by the theme.

    Could you try embedding the form using the following iframe embed code :

        <iframe

          id="JotFormIFrame"

          onDISABLEDload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/60650715874157"

          frameborder="0"

          style="width:100%;

          height:539px;

          border:none;

     visibility: visible !important; 

     opacity: 1 !important;"

          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;

            }

            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);

          }

          if(window.location.href && window.location.href.indexOf("?") > -1) {

            var ifr = document.getElementById("JotFormIFrame");

            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;

            }

          }

          </script>

    Alternatively, you may also fix by injecting the following CSS code to your Theme CSS file.

    iframe#60650715874157 {

    visibility: visible !important; 

    opacity: 1 !important;

    }

    You may need some WordPress advanced knowledge to edit the sytlesheet of the theme or contact the Theme support to  inject the above CSS code.

    Hope this information helps! Please get back to us if the issue still persists. We will be happy to assist you further.