SOLVED: Marketo form display and input issue with iOS

[MichaelOsborne]

Hi Marketo community,

We have experienced a unique issue where an embedded Marketo form is not displaying and inputting text correctly on iOS only.  Been trying to work with a developer on the website but have not been able to crack it.

We can only see the issue on the iphone device itself, not when we are testing on responsive design mode on Firefox.

Here is a link to the form:

https://hronboard.me/book-a-demo/ 

    

[SanfordWhiteman]

Simple, it’s right here in your Custom CSS (in Form Editor):

/* Reduce spacing between fields */

.mktoForm .mktoFieldWrap {
margin-top:-20px;
}

And this margin adjustment happens on desktop as well, it’s just less visually jarring because of the overall layout.

Start by removing this customization and then build out mobile styles as needed.

[MichaelOsborne]

Thanks @SanfordWhiteman.

So remove that section in the CSS Form Editor and build a new style specifically for iOS?  Are there any recommendations on where to look for this?

[SanfordWhiteman · Accepted solution]

---

So remove that section in the CSS Form Editor and build a new style specifically for iOS?  Are there any recommendations on where to look for this?

---

You already have have something that only takes effect on iOS that makes it differ from Android — not something that was intended to be different but a style that in practice functions differently across the OSes.

So I think you need to replace one of your mobile-only styles after taking the margin-top out.

[MichaelOsborne]

Thanks you!  Yes this has been fixed by editing the margin-top to 0px and also we removed the font 'poppins' to solve the inputting issue with the forms. 😀