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

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.

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.

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

e sim podem enviar um envio teste

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:

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.

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

Olá Rico,

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

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

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:

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.

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>

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.