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

  • Profile Image
    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!

  • Profile Image
    Bojan_J
    Answered on March 17, 2021 at 05: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.

  • Profile Image
    Kayla_Hughes
    Answered 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_

    Here is what the jotform beneath it looks like now:

    1615991631_6052134f1a934_

  • Profile Image
    Bojan_J
    Answered 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.png

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

  • Profile Image
    Kayla_Hughes
    Answered 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/

  • Profile Image
    Bojan_J
    Answered on March 17, 2021 at 01: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.

  • Profile Image
    Kayla_Hughes
    Answered on March 17, 2021 at 02: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_

  • Profile Image
    Welvin
    Answered on March 17, 2021 at 08: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