Marketo Form Conflict Across Pages in Next.js (Forms Persist in Memory and Override Each Other)
Hi everyone 👋
I’m running into a persistent issue while integrating Marketo Forms inside a Next.js (React) application for Seismic’s website.
The issue:
When navigating between two pages that both contain Marketo forms — for example:
https://www.seismic.com/resources/reports/g2-grid-spring-2025/
The “Connect With Us” button will take you to get a demo (also a Marketo form)
— the Marketo forms conflict with each other.
Once a user visits one page and then navigates to another (SPA routing, not full reload), the Marketo form from the first page persists in memory (window.MktoForms2 cache). This leads to:
Duplicate or multiple form instances (window.MktoForms2.allForms() keeps old forms)
Conflicting success handlers — one form overrides another
Stale or broken styling when switching between form types (inline vs popup)
Programmatic reloads (router.reload() or window.location.reload()) causing further side effects like state loss and flickering
I’ve already tried:
Clearing window.MktoForms2.allForms() and calling destroy() on each form
Deleting window.MktoForms2 and reloading the script
Using dynamic imports and script loaders
Reloading the page programmatically on route changes
…but none of these provided a stable solution inside a single-page app context.
What I’m Looking For
Has anyone successfully isolated or reset Marketo Forms between routes in a React or Next.js application without a full page reload?
Would implementing a middleware or hook (to manage Marketo’s global state between page transitions) be a better long-term fix?
Any code patterns, examples, or best practices to handle this cleanly would be super helpful. 🙏
Environment details:
Framework: Next.js 14+
Integration: Marketo Forms 2.0 (MktoForms2 global script)
Pages involved: Both use different Marketo form IDs
Observed in Chrome and Edge
Thanks in advance to anyone who’s handled this kind of Marketo/SPA integration before!