Answered

Embed POP UP issue on mobile

3 years ago
May 5, 2021
3 replies
905 views

Ed Team
Explorer
1 reply

Hi there,

I have a major issue with my embed pop up on mobile.

I have integrated this default popup embed code on my website (wordpress divi theme)

<a class="typeform-share button" href="https://form.typeform.com/to/gxgNkHf1?typeform-medium=embed-snippet" data-mode="popup" style="display:inline-block;text-decoration:none;background-color:#0445AF;color:white;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:20px;line-height:50px;text-align:center;margin:0;height:50px;padding:0px 33px;border-radius:25px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;" data-size="100" target="_blank">Launch me </a> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>

But the result is bad on mobile. Indeed I can’t click on the cross (upper right corner) to escape the typeform

Do you have a solution to fix this issue please ?

Maybe this is possible to reduce the height or add background opacity ?

Thanks for your help.

Best answer by Ylli

Hello and thanks for reaching out :)

If you are unable to click the X button on the upper right of the form on mobile to go back to the page where the popup button is located, once the form is opened/loaded on the screen, it is because your navbar/header renders at a higher layer than the typeform content itself.

The z-index for the typeform embed is 10001. This means any other element needs to render at a lower layer, 10000 and under for it not to overlap with typeform controls. The issue is not with the typeform itself, but rather with the website header loading on top of the typeform and blocking the X button to close the form and go back to the previous page.

If you reduce the z-index for the site header/navbar to 10000 or less, that should resolve the issue.

Have a great day.

View original

Ylli
Typeform
3 replies
Answer
3 years ago
May 6, 2021

Hello and thanks for reaching out :)

If you are unable to click the X button on the upper right of the form on mobile to go back to the page where the popup button is located, once the form is opened/loaded on the screen, it is because your navbar/header renders at a higher layer than the typeform content itself.

The z-index for the typeform embed is 10001. This means any other element needs to render at a lower layer, 10000 and under for it not to overlap with typeform controls. The issue is not with the typeform itself, but rather with the website header loading on top of the typeform and blocking the X button to close the form and go back to the previous page.

If you reduce the z-index for the site header/navbar to 10000 or less, that should resolve the issue.

Have a great day.