Form not displaying when embedded on my webpage

  • Profile Image
    shmoller
    Asked on April 18, 2016 at 09: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 

  • Profile Image
    Kiran
    Answered 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.

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

    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. 

     

  • Profile Image
    shmoller
    Answered on April 18, 2016 at 11:43 AM
    Where would I make those changes to?
    ...
  • Profile Image
    Kiran
    Answered on April 18, 2016 at 01: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"

          onload="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.