How to get this to work on a Marketo form?

[JAgatone]

Hi! I am using placeholders for a Marketo form, which is loaded with a snippet of Javascript. Since that is a dynamic piece of content, how do I go about loading the placeholders script? Including it at the bottom of the body tag doesn't work. What happens is the placeholders briefly appear on page load, and then they disappear and the fields are blank. So I'm thinking something happens as the Marketo form loads that makes the placeholders disappear in IE7-8.

[micrypt]

Marketo includes their own broken placeholder polyfill that interferes.

[pinkfluffica]

Have spent many hours investigating this, I can confirm that this is still the case. I will be asking my boss to point this out to Marketo - would be good if others did too as they normally refuse to believe anything is wrong for a while.

[jamesallardice]

I am guessing (having never so much as looked at Marketo) that such forms work by creating an iframe that loads a page from some other context (if you can't e.g. style Marketo forms from your own stylesheets this will almost certainly be the case). If that's the case then there's very little you can do. If that's not the case, and the Marketo script actually creates elements in your local DOM then Placeholders.js should work fine (unless you've manually disabled live updates).

I will close this issue for now but happy to reopen if someone can confirm that Marketo forms work by manipulating the local DOM rather than simply injecting an iframe.

[pinkfluffica]

Marketo does not use an iframe, and yes manipulates the DOM (can't get at the .js to look at it though!)

From what I can tell, the DOM is arranged quite differently when loading in IE8 and the placeholder attribute is no longer on the "input" element, it is moved to a 'div' inside the 'label' element and rendered as text inside that 'div'. The div has the classes "placeholder" and "placeholder-hidden-except-screenreaders".

The 'input' element has a new class of "mktoPlaceholderPolyfill", which is presumably used by their .js to inject a placeholder, but this fails.

[jamesallardice]

@ssica3003 thanks for explaining. That sounds... horrible (although it is how numerous placeholder polyfills work - I've just never liked that approach). Unfortunately it still means there's nothing this library can do. I guess it may be possible to do something like this in your own code after Marketo has done its thing (untested, assuming jQuery):

$('.placeholder').each(function ( i, elem ) {
  var placeholder = elem.text();
  elem.find('input').attr('placeholder', placeholder);
});

Placeholders.js should then pick up the added placeholder attribute and display the placeholder. But if Marketo fix their JS you'll probably end up with a horrible mess as 2 placeholders will get rendered.

[pinkfluffica]

Indeed! And since the placeholders do show briefly, but then disappear, I fear any external fix will still be overridden by their broken JS loading something afterwards that fails.

If anyone is interested in trying fixes, the "title" attribute is retained on the 'input' element, which could be grabbed by jquery a bit more easily than the div text