SOLVED

Re: Marketo form display and input issue with iOS

Go to solution
MichaelOsborne
Level 2

Marketo form display and input issue with iOS

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/ 

 

    Image from iOS (2).png

 

 

Tags (3)
1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Marketo form display and input issue with iOS


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.

View solution in original post

4 REPLIES 4
SanfordWhiteman
Level 10 - Community Moderator

Re: Marketo form display and input issue with iOS

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
Level 2

Re: Marketo form display and input issue with iOS

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
Level 10 - Community Moderator

Re: Marketo form display and input issue with iOS


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
Level 2

SOLVED: Marketo form display and input issue with iOS

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. 😀