Skip to main content

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.

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.

Hello Ylli,

 

Thank you for the feedback!

Indeed, it works well now. I changed the z-index with a lower value on the CSS.

 

Have a great day too.

Glad that worked, @Ed Team !! Thanks @Ylli for the help. :grinning:

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs