Forms are not showing correctly on website?

  • Profile Image
    cinedhoy
    Asked on November 18, 2015 at 01:52 PM

    Hola gracia, no se que esta pasando pero no me esta saliendo ningún formulario correctamente todos mis formularios están en blanco. Ne he modificado nada están igual como antes de aparecer estos problemas.

     

    En cada apartado hay un formulario diferente, la URL es:www.comprarlikes.com.es

  • Profile Image
    Charlie
    Answered on November 18, 2015 at 02:16 PM

    I'm checking the website and it seems the problem is related on the number of forms you are embedding on a particular page. There seem to a lot of script conflict happening at the backend.

     

    You also have a lot of Lightbox embed codes listed on one page.

    I visited your website and tried opening the lightbox embed codes, it had some hard time loading the forms and most of it loaded properly.

     

    The problem is that you have embedded the forms using the default <script> code, when adding multiple forms in one page, they load or call the same resources causing a script conflict. You might need to re-embed using the iFrame embed code, here's a guide: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code. However, make sure to remove the <script> code included on the iFrame.

    Here's an example:

        <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

          src="https://form.jotformeu.com/50326397833359"

          frameborder="0"

          style="width:100%;

          height:514px;

          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;

            }

            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>

     

    Remove the code highlighted in bold above, or the ones wrapped in <script> tag. Only embed the code wrapped in <iframe>. So the finally code to re-embed in your website is something like this:

     <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

          src="https://form.jotformeu.com/50326397833359"

          frameborder="0"

          style="width:100%;

          height:514px;

          border:none;"

          scrolling="no">

        </iframe>

     

    Now do the same with all of the forms you are embedding in your website, with that approach, your form's won't be causing code conflicts with one another when embedded on the same page.

    However, with regards to the Lightbox embed code, I'm not sure if it is related to it. But please do make sure that the website itself does not have any script conflicts, you'll notice that in your browser console you'll see a lot of error codes.

     

     

     

    I hope that gives you an idea on how to fix the blank forms.