Contact form not showing correctly on mobile

Hey @SimoriahP - would it be possible to share a link for the page where you’ve embedded your typeform? That way we can have a look and hopefully help you :) Thanks

Sure, here’s the page! It’s currently embedded as standard at 110% width, fixed height 550px, and set to show full screen on mobile. For some reason, the only way I can get it to show properly on desktop is to expand it to 110%. If I do 100%, the image doesn’t show in the right place. 

Following up—any help here?

Hi @SimoriahP When I click the link, it redirects me to the homepage. Do you mind sharing the URL where you have the form embedded? 

Hi @Liz, sorry, I removed the page since no one responded. I put it back up so you can check it again here.

Thank you!

Thanks, @SimoriahP ! This is a fun website/form. 

Do you want the form to be totally across the page or as it is now? 
 

If you want it to fit the page, do you mind trying both 100vh (for the height) and 100vw (for the width) to see if that solves the issue? The fixed height/width in pixels could be causing the issue. 

@James 

Hi @Liz , on desktop, the form looks correct. It’s on mobile that it doesn’t work (specifically after you click the “Start” button). But either way, I don’t have options for 100vm. For width, my only options are % or px, and for height, it’s only fixed or auto. Please advise. And I do have the “full width on mobile” box checked. I’ve tried every variation of these and nothing seems to work.

Hi @SimoriahP When you embed the form, you can change the code manually here: 

If that doesn’t work, @jvh or @mathio might have some additional insights for you!

Hi @Liz, That is the code I already have. What would I need to change it to?

Hi @SimoriahP You would want to manually edit that code to be 100vh (where it says height) and 100vw (where it says width) to look like this: 

style=”width:100vh;height:100vh”

@Liz This still does not work. I changed it and it’s live on the page. The biggest issue is on mobile when you click the Start button. I’m already paying for this service that I can’t use properly—please let me know how I can rectify this. Thank you.

@SimoriahP - i would recommend that you open a help ticket with Typeform Support. They can get into your form and dive in a little deeper. 

cheers

des

Hi @SimoriahP Definitely give the tech support folks an email! They’ll be able to take a closer look at the code for you, unless @mathio has any other suggestions. 

Hey @SimoriahP - from what I can tell there’s a lot of elements on the page with different `z-index` defined and I think this is the reason for the form now showing properly on mobile.

It’s a bit difficult for me to give a full solution since I’m not familiar with your whole site but when going through the page and resetting `z-index` to 0 for elements like `#main-header`, `.et_pb_column` and `.et_builder_inner_content`, the form was working as expected.

Maybe you can play around with it and see if that works and doesn’t cause any other issue across your site?

Thanks

Joyce

Hello @SimoriahP 

I am looking at your website and @jvh is right. It seems like your website theme is preventing the typeform from being displayed and is covering it with other elements.

You could try adding data-tf-inline-on-mobile attribute to your embed code or disable the Full-screen on mobile toggle on your share page before copying the code. This will display the form inline on mobile and not try to display it in fullscreen.

Displaying typeform in fullscreen on mobile is better for respondent experience, however there could be conflicts with some other elements and CSS in the website.