How can I isolate or embed a form without having code collisions?

[Anonymous]

We have embedded a form in our WordPress web site using the following code:

<script src="//app-sjxx.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_xxxx"></form>
<script>MktoForms2.loadForm("//app-sjxx.marketo.com", "xxx-xxx-xxx", xxxx);</script>

Once embedded, the form works okay; however WordPress will no longer allow us to edit its parent object.  It seems there's a code collision happening - perhaps a variable used by Marketo is the same name and scope as in WordPress.

Is there a way I can wrap the code above with JavaScript to isolate the code imported by the script reference?  Is there a WordPress plugin for this perhaps?  Thanks in advance for the help.

[Anonymous · Accepted solution]

We changed the embed to using an iframe that references a plain landing page instead.  The plain landing page contains the form that was previously embedded using the script.

<iframe src="http://go.xxxxx.com/Contact-Embed.html"></iframe>

This solved the issue for us.

[SanfordWhiteman]

Hmm okay, but a major change to the architecture that shouldn't have been necessary. I'd still like to see an example of the former behavior.

[SanfordWhiteman]

Please share an example URL and what you mean by "edit" its parent element.

The MktoForms2 object is of course global but everything else is pretty well encapsulated.