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

Question

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 Answer

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 · Answer

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded