SOLVED

Re: Marketo Form - Sizing dropdown field and mobile

Go to solution
Callum_Pirie
Level 3

Re: Marketo Form - Sizing dropdown field and mobile

Hey Dave and others

Im actually still having some issues with this

if you go to Corporate Digital Training | Digital Marketing institute

and click on a CTA the form is small and condensed

1.png

but when the popup appears it then breaks the CTA forms. Any idea what could be happening here?

2.png3.png

Dave_Roberts
Level 10

Re: Marketo Form - Sizing dropdown field and mobile

Hey Callum-

I think what you're seeing here is that the pop-up form loads after the other forms on the page. This usually has something to do with where it's placed in the HTML or some kind of order of operations things with scripts unfolding into the page.

When I first visited the page, I saw the pop-up and dismissed it. After poking around a little bit, I refreshed the page and it didn't load the pop-up again (thanks for that!). Once I had reloaded the page, all of the forms appeared to be displaying properly. To be able to see the pop-up form again, I launched the page in an incognito window and noticed that the form issues were back. Im pretty sure this points to specifically the pop-up form. It's looking like each of your forms in Marketo has a set of Custom CSS that travels with the form. When you've got more than one form on a page, you're gonna load both sets of Custom CSS -- and whichever loads last (after) is the style that gets used in the render [this means which ever form loads last onto the page will apply its CSS "on top of" the previous form's CSS].

It's hard to tell without a little bit of tinkering with each of the stylesheets, but it looks like there are probably different rules that are setup for at very least the button (maybe search the Custom CSS for "mktoButton" or just "button" and compare the results for the two forms). From the looks of it, some kind of height attribute, mabe padding might be the difference?

--------

If there are some styles for the button that you can find on the Corporate Brochure form, you can probably just copy/paste those button styles to the very bottom of the Custom CSS for the pop-up form. Assuming they're written 'equally' (with similar selectors), this should override any other button styles further up the Custom CSS (if you can't otherwise find them to match em up).

If you get stuck, if you'd like to post the two sets of Custom CSS for each of the forms here I can take a look and help make a recommendation to align the two stylesheets. You can find the Custom CSS on the 2nd page of the form editor by clicking the little purple gear icon.

Screenshot_012119_083543_PM.jpg

Callum_Pirie
Level 3

Re: Marketo Form - Sizing dropdown field and mobile

Thanks for this - I fixed it.

I believe there was some styling in OptinMonster itself that was overriding.