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

    Can't embed jotform into a WordPress webpage

    Asked by CHENW on October 04, 2016 at 07:45 PM

    Hi, 

    I'm trying to embed a symposium proposal form on our school 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!

    Page URL:
    http://wnmu.edu/symposium/

    Screenshot
    Wordpress page embed form
  • Profile Image
    JotForm Support

    Answered by liyam on October 05, 2016 at 12:26 AM

    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.

  • Profile Image

    Answered by CHENW on October 05, 2016 at 01:15 AM

    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"

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

  • Profile Image
    JotForm Support

    Answered by Nik_C on October 05, 2016 at 04:36 AM

    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!

     

  • Profile Image

    Answered by CHENW on October 05, 2016 at 09:23 AM

    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.

  • Profile Image
    JotForm Support

    Answered by Welvin on October 05, 2016 at 11:13 AM

    Please try using the following codes:

    <iframe id="JotFormIFrame-62458060372151" onload="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.

  • Profile Image

    Answered by Wen-chi Chen  on October 05, 2016 at 11:47 AM

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

    Thanks again!

  • Profile Image
    JotForm Support

    Answered by Nik_C on October 05, 2016 at 12:56 PM

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

    Cheers!