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
but when the popup appears it then breaks the CTA forms. Any idea what could be happening here?
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.
Thanks for this - I fixed it.
I believe there was some styling in OptinMonster itself that was overriding.