What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Forms won't embed

    Asked by worldwidewaldens on December 17, 2015 at 11:42 AM

    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!

    Page URL:
    http://www.walden.org/Education/Professional_Development_Opportunities<br/>/AW2_Registration

    won't new form JotForm style size source
  • Profile Image
    JotForm Support

    Answered by Charlie on December 17, 2015 at 12:22 PM

    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"

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

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