JotForm On Sharepoint Online Modern

  • Profile Image
    AtlanticCouncil
    Asked on March 26, 2020 at 06:40 PM

    Having trouble adding a form to a sharepoint using the embed iframe code. See attached screenshot.

    Screenshot
  • Profile Image
    Kevin_G
    Answered on March 26, 2020 at 07:56 PM

    Please kindly refer to this guide in order to get more details about adding your form to your Sharepoint page: https://www.jotform.com/help/152-Adding-a-form-to-SharePoint

    If you have questions, let us know. 

  • Profile Image
    AtlanticCouncil
    Answered on March 26, 2020 at 08:23 PM

    Hi yeah this isn't the same version of Sharepoint. Like I mentioned I went through that guide and it doesn't work. I don't have those options.

  • Profile Image
    AtlanticCouncil
    Answered on March 26, 2020 at 08:31 PM

    Hi yeah this isn't the same version of Sharepoint. Like I mentioned I went through that guide and it doesn't work. I don't have the option of web dialog, source code editor, etc. etc. I;m on sharepoint online. I click Add Web Part, "Embed", and the only thing that pops up when I hit embed in the screenshot below. Your colleague Richie_P seemed to figure it out here: https://www.jotform.com/answers/2115696-Embed-in-SharePoint-does-not-work-in-modern


    1585269019Screen Shot 2020-03-26 at 8.30



  • Profile Image
    Jimmy_D
    Answered on March 26, 2020 at 10:23 PM

    Our apologies for the inconvenience.

    Are you saying that @Richie's solution worked for you? 

    Richie's suggestion on thread: https://www.jotform.com/answers/2115696

     <iframe


          id="JotFormIFrame-93255692893169"

          title="Service Request Form"

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

          allowtransparency="true"

          allowfullscreen="true"

          allow="geolocation; microphone; camera"

          src="https://form.jotform.com/93255692893169
          frameborder="0"

          width="100%"

          height="1775px"

          style="

          min-width: 100%;

          height:1775px;

          border:none;"

          scrolling="no"

        >

        </iframe>
       

        <script type="text/javascript">

          var ifr = document.getElementById("JotFormIFrame-93255692893169");

          if(window.location.href && window.location.href.indexOf("?") > -1) {

            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;

            }

          }

          window.handleIFrameMessage = function(e) {

            if (typeof e.data === 'object') { return; }

            var args = e.data.split(":");

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

              case "loadScript":

                var src = args[1];

                if (args.length > 3) {

                    src = args[1] + ':' + args[2];

                }

                var script = document.createElement('script');

                script.src = src;

                script.type = 'text/javascript';

                document.body.appendChild(script);

                break;

              case "exitFullscreen":

                if      (window.document.exitFullscreen)        window.document.exitFullscreen();

                else if (window.document.mozCancelFullScreen)   window.document.mozCancelFullScreen();

                else if (window.document.mozCancelFullscreen)   window.document.mozCancelFullScreen();

                else if (window.document.webkitExitFullscreen)  window.document.webkitExitFullscreen();

                else if (window.document.msExitFullscreen)      window.document.msExitFullscreen();

                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);

          }

          </script>

    Please let us know we would be glad to assist. 

    Regards, 

  • Profile Image
    AtlanticCouncil
    Answered on March 26, 2020 at 10:57 PM

    I should have clarified. When I put that iframe that Richie created into Sharepoint, I didn't get the error I was getting before. But the iframe Richie created is not for MY form. I don't know what form it's for, perhaps it was for the user he was responding to on that thread. So I need to apply whatever he did, but for my form. And I don't see it explained anywhere what he did to make it work

  • Profile Image
    Jimmy_D
    Answered on March 27, 2020 at 12:58 AM

    Hi, 

    To adapt the code to your form, please replace the form ID in the code, by the ID of your form. 

    The code below should work for this form: https://www.jotform.com/60045401154946

    <iframe


          id="JotFormIFrame-60045401154946"

          title="Service Request Form"

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

          allowtransparency="true"

          allowfullscreen="true"

          allow="geolocation; microphone; camera"

          src="https://form.jotform.com/60045401154946
          frameborder="0"

          width="100%"

          height="1775px"

          style="

          min-width: 100%;

          height:1775px;

          border:none;"

          scrolling="no"

        >

        </iframe>
       

        <script type="text/javascript">

          var ifr = document.getElementById("JotFormIFrame-60045401154946");

          if(window.location.href && window.location.href.indexOf("?") > -1) {

            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;

            }

          }

          window.handleIFrameMessage = function(e) {

            if (typeof e.data === 'object') { return; }

            var args = e.data.split(":");

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

              case "loadScript":

                var src = args[1];

                if (args.length > 3) {

                    src = args[1] + ':' + args[2];

                }

                var script = document.createElement('script');

                script.src = src;

                script.type = 'text/javascript';

                document.body.appendChild(script);

                break;

              case "exitFullscreen":

                if      (window.document.exitFullscreen)        window.document.exitFullscreen();

                else if (window.document.mozCancelFullScreen)   window.document.mozCancelFullScreen();

                else if (window.document.mozCancelFullscreen)   window.document.mozCancelFullScreen();

                else if (window.document.webkitExitFullscreen)  window.document.webkitExitFullscreen();

                else if (window.document.msExitFullscreen)      window.document.msExitFullscreen();

                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);

          }

          </script>

    I hope it works well for you. 

    Regards,