Form embedded using lightbox option is not redirecting to the correct page.

  • marketing_marketing390
    Perguntado em 2 de fevereiro de 2024 às 14:55

    Olá tudo bem?

    Estou tendo um problema com um de nossos formulários (https://form.jotform.com/240313647906658) ao ser embedado como lightbox está bloqueando o redirecionamento da página e mostrando o erro ilustrado abaixo. Gostaria de saber se há alguma forma de solucionar esse problema.

    Form embedded using lightbox option is not redirecting to the correct page Screenshot 20

    Jotform Thread 11462191 Screenshot
  • Joshua_T Jotform Support
    Respondido em 2 de fevereiro de 2024 às 17:23

    Hi marketing_marketing390,

    Thanks for reaching out to Jotform Support. Unfortunately, our Portuguese Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Portuguese, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

    Now, let me help you with your question. I am sorry you are having trouble with this. Can you provide us with the link to where your form is embedded? Also, can we have your permission to send a test submission to the embedded form to see if the problem is replicable from our end?

    Once we hear back from you, we can move forward with a solution.

  • marketing_marketing390
    Respondido em 5 de fevereiro de 2024 às 06:09

    A página que está aplicado atualmente é essa https://conteudo.vcx.solutions/business-intelligence

    e sim podem enviar um envio teste

  • Richie Jotform Support
    Respondido em 5 de fevereiro de 2024 às 08:39

    Hi marketing_marketing390,

    Thanks for sharing your website. I tested the lighbox embed you added to your whatsapp icon and it is working at my end. Check out this screenshots of my test result:

    Form embedded using lightbox option is not redirecting to the correct page Screenshot 40

    Form embedded using lightbox option is not redirecting to the correct page Screenshot 51

    The redirection error you receive is from your browser blocking the redirect. You can allow redirection in the browser or you can try using the iFrame code to allow pop-ups. To get the Iframe code:

    1. In Form Builder, in the orange navigation bar at the top of the screen, click on Publish.
    2. Click on Embed on the left side of the screen.
    3. Then, click Iframe and copy the code.

    Form embedded using lightbox option is not redirecting to the correct page Screenshot 62

    Give it a try and let us know if this works for you.

  • marketing_marketing390
    Respondido em 5 de fevereiro de 2024 às 09:39

    Olá Rico,

    Então quando eu uso o iframe o redirecionamento funciona certinho, no entanto, o formato que queria é o formato de Lightbox

    Form embedded using lightbox option is not redirecting to the correct page Screenshot 20

    Quando coloco nesse formato sigo tendo o problema do redirecionamento que navegador bloqueia

    o código utilizado é esse abaixo:

    <script src ="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script> <script type="text/javascript"> var JFL_240313647906658 = new JotformFeedback({ formId: '240313647906658', base: 'https://form.jotform.com/', windowTitle: 'Whatsapp', backgroundColor: '#128c7e', fontColor: '#ffffff', type: '0', height: 500, width: 450, openOnLoad: false }); </script> <script type="text/javascript"> var ifr = document.getElementById("lightbox-240313647906658"); 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("lightbox-" + args[(args.length - 1)]); } else { iframe = document.getElementById("lightbox"); } if (!iframe) { return; } switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) { iframe.style.minHeight = 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": if( !window.isPermitted(e.origin, ['jotform.com', 'jotform.pro']) ) { break; } 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}), "*"); } }; window.isPermitted = function(originUrl, whitelisted_domains) { var url = document.createElement('a'); url.href = originUrl; var hostname = url.hostname; var result = false; if( typeof hostname !== 'undefined' ) { whitelisted_domains.forEach(function(element) { if( hostname.slice((-1 * element.length - 1)) === '.'.concat(element) || hostname === element ) { result = true; } }); return result; } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script> <a class="btn lightbox-240313647906658" style="background-image: url(https://vcx.solutions/wp-content/uploads/2023/07/whatsapp-1.png); border-radius: 34px;width: 60px; font-size: 0; height: 60px;position: fixed;right: 10px;z-index: 999;display: block;bottom: 10px;background-size: 73%;background-repeat: no-repeat;background-color: #1bd741;background-position: center; target="_blank"> </a>

    Abaixo coloco um vídeo do que está ocorrendo:
    https://www.youtube.com/watch?v=cw9jrlLL850




  • Joshua_T Jotform Support
    Respondido em 5 de fevereiro de 2024 às 10:06

    Hi marketing_marketing390,

    Thanks for getting back to us. When I visited the link to your form and tested it to see if I could replicate the problem, it appeared to be working as expected. Check out this screencast below:

    Form embedded using lightbox option is not redirecting to the correct page Screenshot 20

    Can you make sure that you allow pop-ups on your browser? We have a guide here that will show you how to do it: How to block or allow pop-ups.

    Give it a try and let us know how it goes.

  • marketing_marketing390
    Respondido em 5 de fevereiro de 2024 às 10:43

    Consegui atualizar o código usando o iframe solicitado e parece que agora está funcionando sim.

    O novo código virou esse

    <!doctypehtml><style>.backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none;z-index:1000}.lightbox{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;max-width:450px;width:90%;height:80%;display:none;overflow-y:hidden;z-index:1001}.header{background-color:#128c7e;color:#fff;padding:10px;text-align:center;font-size:20px}.close{position:absolute;top:10px;right:10px;font-size:20px;color:#fff;cursor:pointer}#open{transition:all .2s ease-in-out}#open:hover{width:70px;height:70px}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px,0) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}100%{transform:translate(1px,-2px) rotate(-1deg)}}</style><img id=open src=https://vcx.solutions/wp-content/uploads/2023/07/whatsapp-1.png style=border-radius:34px;width:60px;font-size:0;height:60px;position:fixed;right:10px;z-index:1000;display:block;bottom:10px;background-size:73%;background-repeat:no-repeat;background-color:#1bd741;background-position:center><div class=backdrop id=backdrop></div><div class=lightbox id=lightbox><div class=header>Whatsapp</div><span class=close id=close>×</span><iframe allow="geolocation; microphone; camera"allowfullscreen allowtransparency=true frameborder=0 id=JotFormIFrame-240313647906658 onDISABLEDload=window.parent.scrollTo(0,0) scrolling=yes src=https://form.jotform.com/240313647906658 style=min-width:100%;max-width:100%;height:80vh;border:none title=Whatsapp></iframe></div><script>var open=document.getElementById("open"),close=document.getElementById("close"),lightbox=document.getElementById("lightbox"),backdrop=document.getElementById("backdrop");open.addEventListener("click",function(){lightbox.style.display="block",backdrop.style.display="block"}),close.addEventListener("click",function(){lightbox.style.display="none",backdrop.style.display="none"}),setTimeout(function(){open.style.animation="shake 0.5s",open.style.animationIterationCount="2"},7e3)</script>

  • Joshua_T Jotform Support
    Respondido em 5 de fevereiro de 2024 às 10:59

    Hi marketing_marketing390,

    Thanks for getting back to us. I am glad to hear that embedding the form using the iFrame Code works. The iframe embed method is designed to work on any web page. Since the form is displayed inside an iframe, it’s less likely to cause conflict with anything on your website.

    Let us know if you have any other questions.