Form is duplicating for some users / browsers - not for everyone

Question

On our pubic site https://www.ease.com/ when a user clicks on BOOK YOUR DEMO the marketo form pops up and sometimes everything looks and works as expected - other times the form repeats itself and when users fill it out and click submit nothing happens.  I've been able to duplicate this where in chrome everything works fine and in edge the form duplicates.

SanfordWhiteman · Accepted Answer

It’s not Wordpress-related. Just JavaScript order of operations/checking if a function already completed.

Here’s an example of 2 buttons properly controlling the same lightbox, instead of always creating a new one: MktoForms2 :: Reentrant lightbox

SanfordWhiteman · Answer

It’s your site’s custom popup JS that’s to blame. And it can be reproduced in both Chrome & Edge (which have the same underlying engine, by the way — it’s nearly impossible for there to be actual differences there). The only reason it doesn’t happen as often in Firefox and Safari is your code works differently in those browsers.

The root cause is that you’re loading form 5760 with the initial page, and you’re also reloading form 5760 (MktoForms2.loadForm()) from Marketo whenever somebody clicks the button! This isn’t the right way to do it: you should load and render the form only once, then show/hide the popup on demand. It’s a faster user experience and also avoids any duplication.

The above happens in all browsers, every time. Any cross-browser/cross-session differences depend on whether the old <form> element is completely deleted from the DOM before a new <form> element is injected. If the old one is gone then the problem appears to not be present, but it’s still there: you just got lucky and the old one was removed first. And that’s the direct cause, which is that you have a race condition where the old form may or may not be removed in time.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded