Anyone else face the issue of "ugly" Marketo forms on mobile?

[Dylan_Teo]

As seen in the image attached, my Marketo form fields always seem out of proportion when seen on mobile. The reason why I cannot adjust the width of the global Marketo form fields is because they are of the right size when seen on desktop.

Does anyone know of a way to work around this?

Regards,

Dylan

[SanfordWhiteman]

The reason why I cannot adjust the width of the global Marketo form fields is because they are of the right size when seen on desktop.

Well, you have to adjust them using responsive design. In fact the default styles don't keep the hard-coded width (although certainly they may not look too pretty on mobile, this is something you're overriding locally).

[Dylan_Teo]

Hi Sanford,

Thanks for your reply. When you say "adjust them using responsive design", is that something that can be done on Marketo? Or is that something I have to do on the landing page editor (which is Unbounce in my case)?

[SanfordWhiteman]

Unbounce, eh?   Any specific reason why you aren't using an Unbounce form and posting it to the Marketo form acceptor?

Anyway -- this could be done using the Custom CSS option in Marketo Form Editor or via CSS on the Unbounce side. It's really the same concept, you need to un-override whatever styles you have that are breaking the regular Marketo layout, which as I said isn't particularly pretty but doesn't do what you show here.

[Floyd_Alvares2]

Hey Dylan,

Adding to Sanford's comment, you would need to restyle your Marketo form on either Unbounce or within the CSS editor on the Form.

I would recommend reading through: Destyling a Marketo form (for easier CSS restyling)  which was posted by Sanford which has helped me a lot personally in enabling to style the forms without any overwritten code. Basic idea is to get rid of Marketo styles and then just add in the desired styling that is required on the landing page.

Hope this helps

Floyd

[Casey_Grimes]

Hi Dylan,

This can be tackled pretty easily with CSS: NormalizeMktoForms.css​