Can I open a new tab for the thank you page using iframe

  • Kayla_Hughes
    Asked on March 16, 2021 at 10:59 PM

    I have found multiple sources using different types of code to enter into an embedded form in order to open a new tab (rather than redirecting the original page), but I cannot find a solution for iframe. Here is the iframe code I am using; can you advise me on what code I can insert to make the thank you page a new tab?

     <iframe   id="JotFormIFrame-210596598866072"   title="Campaign Capture for Acuity Scheduling"   onload="window.parent.scrollTo(0,0)"   allowtransparency="true"   allowfullscreen="true"   allow="geolocation; microphone; camera"   src="https://form.jotform.com/210596598866072"   frameborder="0"   style="   min-width: 100%;   height:539px;   border:none;"   scrolling="no"   sandbox="allow-top-navigation allow-scripts allow-popups allow-forms"  >  </iframe>  <script type="text/javascript">   var ifr = document.getElementById("JotFormIFrame-210596598866072");   if (ifr) {    var src = ifr.src;    var iframeParams = [];    if (window.location.href && window.location.href.indexOf("?") > -1) {     iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&'));    }    if (src && src.indexOf("?") > -1) {     iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&"));     src = src.substr(0, src.indexOf("?"))    }    iframeParams.push("isIframeEmbed=1");    ifr.src = src + "?" + iframeParams.join('&');   }   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>


    Thank you!

  • Bojan Support Team Lead
    Replied on March 17, 2021 at 5:41 AM

    Greetings.

    I tried to add JavaScript to the code you have provided, but in this case, there is Blocked a frame with origin from accessing error. The only way to update this, as far as I know, is to download the source code of the form, and then use that directly into your website.

    Let us know if you have any additional questions.

  • Kayla_Hughes
    Replied on March 17, 2021 at 10:34 AM

    I tried using the source code, and when I do that the button disappears, and it messes up the jotform beneath it. I used a new mockup of the same page: http://www.hughescapital.com/home-mockup-schedulingbutton-1/ Here is where the button is missing:

    1615991526 605212e6e6979  Screenshot 10

    Here is what the jotform beneath it looks like now:

    1615991631 6052134f1a934  Screenshot 21

  • Bojan Support Team Lead
    Replied on March 17, 2021 at 12:14 PM

    This problem is probably due to the styling on your page.

    We might be able to assist you, however, we are unable to access the page you have shared with us:

    screenshot 4315 Screenshot 10

    If possible, please share the page where the form is so we can assist you.

  • Kayla_Hughes
    Replied on March 17, 2021 at 12:21 PM

    I apologize; I had accidentally unpublished the page. It is back up now! www.hughescapital.com/home-mockup-schedulingbutton-1/

  • Bojan Support Team Lead
    Replied on March 17, 2021 at 1:48 PM

    Greetings.

    Please try to add the following CSS to your web page:

    #200125176200033 {
    background: white;
    }
    #200125176200033 .form-all {
    margin: 0;
    width: 100%;
    max-width: 100%;
    }
    li.form-line {
    width: 20%;
    }
    #id_2 {
    margin-left: 35px;
    margin-top: -15px;
    }

    Please let us know how this solution works for you.

  • Kayla_Hughes
    Replied on March 17, 2021 at 2:14 PM

    Thank you for the response!

    I added this CSS to the page, and it has not made a difference. I was not sure where or how I should include this, but I used style tags:

    1616004679 60524647eb096  Screenshot 10

  • Welvin Support Team Lead
    Replied on March 17, 2021 at 8:51 PM

    You have to inject the custom CSS codes in the form itself: https://www.jotform.com/help/117-how-to-inject-custom-css-codes. After that, copy the source codes again or I would highly suggest using the iframe method.

    Thanks