Error When Using Marketo Form in Elementor PopUp

[sethanderson]

We are using a Marketo form on our site as our Demo form, and have built it to hide most of the fields until the email address is entered and Clearbit can check before revealing any more unknown fields. This works totally fine when the form is embedded on the site - however when we embed the form as a popup in Elementor we sometimes experience issues where we see two forms render at once or show all the fields without hiding them as expected.

When this happens we see the following error:

Has anyone else experienced issues when embedding a Marketo form with hidden fields into an Elementor popup?

[SanfordWhiteman]

You’ll need to link to your page. There’s no way to make any recommendations without that.

Please include steps to reproduce the problem, if you have them.

[sethanderson]

Here is the page: https://codesignal.com/pricing 

This occurs when clicking the 'Contact Sales' CTAs. If it doesn't happen upon the first click it will usually happen after refreshing the page a few times.

Thank you!

[SanfordWhiteman · Accepted solution]

The cause: when the lightbox loads on button click, it’s reinjecting the lightbox-able child content into the DOM — and deliberately re-running the code in child <script> elements.

So even though there’s already a fully-formed Marketo <form> element, MktoForms2.loadForm() runs again and stacks another set of the same fields underneath (this is expected if you run loadForm() again for the same form ID).

You need to make sure loadForm() only runs once per ID, simply wrapping the existing <form> in the lightbox. This is better for performance as well.