Contact form will not allow user to enter info on mobile iOS 15

Design help General
1

Hi all,
I’m extremely new to Webflow and web design with no coding experience whatsoever, so please bear with me.

I’ve just competed a site for my client and published it live (needs some tweaks still). The issue I’m having is that the contact form on the contact page doesn’t render properly on an iPad or iPhone.

On both devices the form key lines (grey boxes) disappear - I think I know how to fix this using the borders pallet in the designer but wouldn’t mind a yay or nay on this point.

More importantly on the live iPhone site on my iphone 12 I cannot access the form fields to enter the required information. It will allow me to do so on the ipad but not on mobile iOS. The form works fine on desktop Chrome, Safari and Firefox

Any help would be greatly appreciated as my client wants to get their site launched and share the link with customers ASAP.

Cheers

Here is my site Read-Only:
https://preview.webflow.com/preview/sealingguys?utm_medium=preview_link&utm_source=designer&utm_content=sealingguys&preview=eb25bfb10fd17a60655b41d75b167770&workflow=preview

2

Hi Mike,

Do you also have the link to the live site you can share?

3

Hi Brian,

here’s the link: https://www.sealingguys.ca/

4

Hi @Genchi,

Would you be able to change the ‘Form Wrapper’ to display: block and republish? This will help us with testing the form on your live site.

Screenshot here: Webflow - Sealing Guys 2022...

Cheers

5

@mww I set it back to display: block and republished.

sorry for the late reply

6

Hey @Genchi,

No problem at all.

To fix this you’ll need to remove the Min Height setting on ‘Container 2’ within the Navigation symbol.

It’s overlapping the page and form and it has the highest z-index value. I’d recommend setting this back to ‘Auto’, republishing and it should fix your issue.

Screenshot here: Webflow - Sealing Guys 2022...

Cheers

7

@mww

Wow, thank you for the fix!

It worked like a charm.

I’m truly grateful!

Mike

1 Like