Form Ruins Guided Landing Page in IE11

[Sergio_Azevedo1]

Has anyone had problems with IE page rendering after throwing a form into a page that uses a guided landing page template?

The page renders perfectly fine without a form, but as soon as I add a form to the page, the formatting goes haywire when viewed in IE. http://ess.csa.canon.com/CSA-Look_Guided-Test.html

I was able to fix this issue in a previous template by removing css from the page and calling to an external file, but that's not helping here. This template was also built in Bootstrap 3 if that matters.

One thing I may try is removing all form styling from the bootstrap css file and see if that does anything? (The previous responsive template I built was coded from scratch.)

Thanks in advance!

S

[SanfordWhiteman]

I assume you've been playing with the styles, but it looks like this for me in IE11: CrossBrowserTesting http://ess.csa.canon.com/CSA-Look_Guided-Test.html

[Sergio_Azevedo1]

Thanks Sanford. I found something interesting when testing last night. It seems that whatever I previously did had no effect on 'fixing' the page, but rather if I clear the browser's cache, the page works fine. For whatever reason this only happens once a form is placed on the page.

I'm completely stumped on how to fix this and I can't exactly put out pages that need 'please clear your IE cache to view properly' disclaimers on them lol. I can't be the first to have this issue, but I'm not finding any instances out there.

[Sergio_Azevedo1 · Accepted solution]

FYI - Turns out it had to do with browser emulation on some browsers here . OF COURSE it had to be something silly like that.

[Markus_Grant]

Thanks Sergio!

We had the same issue with IE destroying our landing pages and it was because it was switching to IE7 in emulation mode.

The next step was finding out why and the answer to that we found here --> https://nation.marketo.com/ideas/7314

[Anthony_Dykstr1]

Thank you for including that article Markus, I'm happy to see the Marketo team implemented a fix for it.

[Anthony_Dykstr1]

I'm dealing with this exact issue now and it's beyond frustrating. This meta tag is supposed to fix that  <meta http-equiv="X-UA-Compatible" content="IE=edge"> but something about the form loading on the page via the mktoForm element makes IE completely ignore it and I can't figure out why. When you embed the forms in the pages that doesn't happen but then you lose the conversion tracking.

All of my landing page templates are built with Bootstrap 3 as well.

[SanfordWhiteman]

Provide a sample URL.

[Sergio_Azevedo1]

Hi Anthony,

I found out that I was having an IE issue with the emulation set to IE7. Anything above that and it was working fine. Go into the developer tools and check to see if you have browser emulation set to IE7 and that should help.

[Anthony_Dykstr1]

Hey Sergio,

After a few hours of troubleshooting I discovered that as well along with the root of the problem indicated in the article that Markus shared with us (https://nation.marketo.com/ideas/7314). I was in a pinch with a tight deadline so I ended up using a custom embed script to load the forms on our pages as a hacky but effective work around. We had to sacrifice some of Marketo's reporting and leverage Google Analytics / Tag Manager instead.

It kills me that anyone would even use IE to begin with but in the spirit of that undeniable reality in the corporate setting, the minimal reporting sacrifice was far better than a broken user experience or expecting our clients to adjust their emulation settings in order for our landing pages to render properly on their end.

Looks like I have some template updates to do now that there's a fix for it haha.