Can't embed jotform into a WordPress webpage

Hi, 

I'm trying to embed a form to web page. Below is the problem I encountered. Please advise. 

jotform to be used

https://form.jotform.com/form/62458060372151

webpage that needs the proposal form to be embedded in

wnmu.edu/symposium

code pasted as HTML code in a WordPress paragraph 

[embed]https://form.jotform.com/form/62458060372151[/embed]

Error message I received backstage:

https://form.jotform.com/form/62458060372151 failed to embed.

What I see from the webpage:

https://form.jotform.com/form/62458060372151 appeared after Submit Proposal section

I'm not the webmaster of our school. It could be that we don't have the right plugin installed. If this maybe the case, please provide instructions so I can send them to our webmaster. 

 

Thank you!

Hello,

I would recommend to embed using the iframe code instead. To get your form's iFrame source code, you can follow this guide: https://www.jotform.com/help/148-Getting-the-form-iFrame-code

Next, go to text mode in your Wordpress editor or click that < > icon in that editor from your screenshot and paste the iframe code.

If you have questions, please let us know.

Thanks.

Thanks. It worked. But it caused a new problem for me. After I copied the iFrame code, the rest of my webpage won't show. See http://wnmu.edu/symposium/

By the way, I noticed that WordPress automatically changed the source code from this: 

   <iframe

 

      id="JotFormIFrame-62458060372151"

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

      allowtransparency="true"

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

      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 = false;

        if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { 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 = false;

        if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { 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>

To this

<iframe id="JotFormIFrame-62458060372151" style="width: 100%; height: 539px; border: none;" src="https://form.jotform.com/62458060372151" width="300" height="150" frameborder="0" scrolling="no"> </iframe></p><script type="text/javascript">// <![CDATA[

 window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = false; if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { 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 = false; if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { 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>

I see that form is not showing fully on your page. That happened because the height of iFrame is smaller than the height of the form itself. So if I increased your iForm's height the form is showing normal as well as the rest of the website:

So when you copy your iFrame code make sure to increase the height of the iFrame, if you don't want your form to be that long on a website, you can enable scrolling on it:

Please try embedding again and let us know how it works.

Thank you!

 

I understand.  What's missing is the rest of my webpage. After the form section, I still have program schedule, program archive, and contact me sections. For some reason, WordPress just stopped there, thinking the webpage is done. I thought it was because WordPress tempered the iFrame codes. Ideas?

I have added the scrolling bar as you suggested. Thanks for pointing that out. I appreciate it.

Please try using the following codes:

<iframe id="JotFormIFrame-62458060372151" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62458060372151" frameborder="0" style="width:100%; height:1000px; border:none;" scrolling="yes"> </iframe>

Still the iframe, but without the script tags in it. If the issue persists, try installing one of our own WordPress plugins:

https://wordpress.org/plugins/jotform-oembed/ 

https://wordpress.org/plugins/embed-form/ 

The oEmbed, you just need to place the form URL in the post/page editor, our oEmbed will automatically show the form.

The Embed form plugin, you have to place a shortcode in the post/page editor. For the current form, this is the shortcode:

[jotform id="62458060372151"]

 

I hope this helps.

Perfect. It worked like a charm. Thank you so much! 

Thanks again!

On behalf of my colleague, you're welcome, I'm glad it is working for you now.

Cheers!