MarketoForms2 not attaching HTML to page

[Anonymous]

I am having an issue when calling MktoForms2.loadForm() the resulting html for the form never gets added to the page. In the callback to loadForm I can see the HTML node in the console when calling form.getFormElem() and the .whenReady(), .onFormRender(), and .whenRendered() callbacks all fire, but the <form> element on the page that it's supposed to attach to is empty. Occasionally every 10 or so loads it will randomly load. There are no js errors at all in the console.

The only thing I've noticed is that when disabling some other javascript on the page that uses Vue.js it will work every time. But I do not see any conflicting variables, etc.

Any thoughts or ideas to try to get to the bottom of the problem?

[Anonymous · Accepted solution]

Found my own problem. It looks like because the <form> element where the Marketo Form was attaching was technically inside the HTML that is part of the Vue component it was creating a race condition where Vue was re-rendering the HTML right as Marketo was trying to attach and it looks like Vue was overriding the Marketo Form with the HTML that was previously there.

I found two solutions: Move the html where the form attaches so that it's not a child of the parent element of the Vue component or call MktoForms2.loadForm() from inside the Vue component JS.