Forms won't embed

For a couple of our jotforms, they won't embed on our website.  One example is this form:

The source code looks like this:

<script type="text/javascript" src="https://form.jotform.com/jsform/53015862648964"></script>

But when I embed and save the changes, it doesn't show up and next time I pull up the edit screen, the source code says this:

<p><invalidtag type="text/javascript" src="https://form.jotform.com/jsform/53015862648964"></invalidtag></p>

 

This is a new form, but what's weird is that one of our old forms (which was working before) reverting back to this "invalidtag" source and is also not working, but a couple of our other jotforms are working just fine. At first, I thought it was an http vs. https thing, but that didn't hold true in all cases.

 

Any help is appreciated!

It seems like your backend code of your website is filtering Javascripts or script codes that is why when you used an embed code with tags <script> on it, it is being replaced with invalid tags.

You might need to re-embed all of your JotForm forms on your website using the iFrame embed code. Here's a guide that you can follow: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

However, please note that when you copy the iFrame embed code, it has a script on it that is responsive for the auto resizing of the iframe element. You might need to remove the script so that it won't conflict in your website.

Here is an example iFrame embed code in my end, this is how it looks like when you copy a fresh code:

 

    <iframe

      id="JotFormIFrame"

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

      allowtransparency="true"

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

      frameborder="0"

      style="width:100%;

      height:539px;

      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>

 

You will need to remove the codes wrapped or enclosed in <script> tags, they are the ones highlighted in bold above. The final code that you will need to embed to your website will looked like this:

    <iframe

      id="JotFormIFrame"

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

      allowtransparency="true"

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

      frameborder="0"

      style="width:100%;

      height:539px;

      border:none;"

      scrolling="no">

    </iframe>

 

Please take note of the height value of your iframe, you need to adjust it based from the current height of your form so that it won't be cut off when you embed it on your website.

 

Another possible solution is asked your developer or check which of your website's setting or script is causing this problem. I hope this helps.