Marketo Forms 2.0 embedding nightmare | Community
Skip to main content
A
AmeliaDa
Level 3
June 3, 2026
Solved

Marketo Forms 2.0 embedding nightmare

  • June 3, 2026
  • 1 reply
  • 59 views

I’m looking for guidance on embedding Marketo Forms 2.0 into a third-party CMS with limited customization options.

 

Our CMS is fairly locked down. I have set content modules where I can add HTML, plus separate header and footer code areas in the page settings. Script code only appears to load properly from the footer, so I’ve had to split the standard Marketo embed code:

  • The ‘<form id="mktoForm_####"></form>’ goes in the page module.
  • The Marketo Forms 2.0 script and ‘MktoForms2.loadForm()’ code go in the page footer.

The form does load and submit, but the issue happens after styling/customization. Any custom CSS added in Marketo Forms appears to get pulled back into the CMS editor after the page is saved. If I leave the page and come back to edit later, the module HTML is filled with Marketo-generated styling and markup. This creates a duplicate styling situation because the styles still exist in Marketo, but now the CMS also appears to be storing/rendering them.

 

I’m not sure what this behavior is called, but it feels like the CMS may be saving the rendered form output instead of preserving only the original form placeholder.

 

We previously embedded a Marketo form on other pages, but it required a lot of vendor developer support and what appears to be some global code. My concern is that global form-specific code may conflict with future forms we need to embed on individual pages.

 

For this current use case, the form is very simple:

  • Email address field only
  • Placeholder text inside the field
  • Submit button
  • On-page thank-you/confirmation message after submission
  • Needs to be reusable on several pages
  • Ideally styled per campaign/brand without global conflicts

I’ll also be meeting with our CMS developers to discuss options, but I’m hoping to understand the Marketo side better.

 

Has anyone dealt with this kind of issue when embedding Marketo forms into a third-party CMS?

 

I’d appreciate any guidance on:

  • Best practices for embedding Marketo Forms 2.0 in locked-down CMS environments
  • Whether there’s a better way to separate the form, script, and styling
  • How to avoid CMS/Marketo style duplication
  • Whether on-page confirmation messages are best handled in Marketo or with custom JS
  • Alternative approaches that are more sustainable than global form-specific code

 

Any advice, terminology, or recommended implementation patterns would be super helpful. I’m trying to find a scalable way to use Marketo as the form platform without every embedded form turning into a one-off development project.

Best answer by SanfordWhiteman

Our CMS is module-based. Each module has its own HTML editor, and pages also have header and footer code sections. Through testing, I found that the form only loads correctly when I split the embed code. The form HTML goes into the module, while the script/loadForm code goes into the page footer.

Well, it’s not that weird to prohibit <style>, <script>, and presumably <link> and some other tags in content blocks and force them into headers/footers. Annoying, but it doesn’t predict the bug you’re seeing. That’s a whole other level. 

 

The issue started when I initially customized the form inside the Marketo Form Editor. After saving and revisiting the page, the Marketo-generated styles and markup appeared inside HTML editor, creating duplicate styling and other issues. I'll attach screenshots showing what I mean.

Right, this seems like a pretty bad bug in the CMS. But there surely are ways to sidestep it. Another approach is to have the embed code check if it’s running on the CMS URL, and if so don’t embed the form. That way the form would only render in preview/staging mode but it would mean the CMS UI wouldn’t be able to do the weird DOM copying thing. 

 

Based on your feedback, I removed the custom styling from Marketo and moved it to the page-level CSS instead. That seems to be working much better (the first two screenshots demonstrate how I have it currently set up).

To be clear though, I wasn’t referring to the page-level CSS. This won’t scale. I meant a remote .css file (hosted in Marketo Design Studio and pulled into a <link>).

 

1 reply

SanfordWhiteman
SanfordWhiteman
Level 10
June 4, 2026

You’re describing some very bizarre behavior on the part of the CMS that probably has to be debugged live to be believed & worked around! From what you’ve said so far, it’s unlike anything I’ve seen in embedding 1000s of Marketo forms in 10s of CMSes over the past decade plus. What CMS is this?  Can you please show screenshots?

 

In any case, the CMS bug you’re describing so far is technically possible: a UI could wait for Marketo to render all its dynamic HTML, then read the final DOM/innerHTML and store that, or parts of it, instead. It’s just frighteningly ill-advised for any product to work that way.

 

Embedding Marketo forms in CMSes isn’t complex. Sometimes CMS devs will add a component where, for example, you just plug in a Marketo form ID and then it renders the corresponding form embed . Sometimes devs add the Forms 2.0 library to their JS packager/lazy loader; they often screw up timing-wise but the fixes are straightforward (you can read my blog posts on properly awaiting the global MktoForms2 object).

 

Whether in a CMS or plain-vanilla web pages, it’s not best practice to customize Marketo form behaviors and styles within Form Editor. That is:

  • Don’t try to include custom JS in a rich text area (this causes very difficult to track bugs)
  • Don’t use Marketo’s Custom CSS feature, as convenient as it may seem

Put your custom custom behaviors JS in a separate .js file and your custom styles in a .css file. Load those alongside the form embed. Or to put it another way, add them to the form embed for your organization.

A
AmeliaDaAuthor
Level 3
June 4, 2026

Hey ​@SanfordWhiteman 
 

Thank you, this is really helpful.

 

Our CMS definitely behaves strangely with third-party code. I think the bigger question at this point is what the preferred long-term approach should be.

 

Our CMS is module-based. Each module has its own HTML editor, and pages also have header and footer code sections. Through testing, I found that the form only loads correctly when I split the embed code. The form HTML goes into the module, while the script/loadForm code goes into the page footer.


 

 

The issue started when I initially customized the form inside the Marketo Form Editor. After saving and revisiting the page, the Marketo-generated styles and markup appeared inside HTML editor, creating duplicate styling and other issues. I'll attach screenshots showing what I mean.

 

 

We previously worked with our CMS developers to embed another Marketo form, but it required a lot of troubleshooting and some type of global code. My concern is whether that approach is scalable as we start embedding more forms across the site.

 

It’s worth noting that this previous form is different from the form I’m working on right now. The previous implementation included custom styling within the Form Editor as well as some JS for on-page confirmation message after form submission. 

 

Based on your feedback, I removed the custom styling from Marketo and moved it to the page-level CSS instead. That seems to be working much better (the first two screenshots demonstrate how I have it currently set up).

 

I'm meeting with our CMS developers soon and would like to better understand the component approach you mentioned, where a developer creates a reusable form component and we simply provide the Marketo form ID.

 

I’ll share the page URL via DM if you’d like to see how the original form implementation is currently being rendered. 

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
June 4, 2026

Our CMS is module-based. Each module has its own HTML editor, and pages also have header and footer code sections. Through testing, I found that the form only loads correctly when I split the embed code. The form HTML goes into the module, while the script/loadForm code goes into the page footer.

Well, it’s not that weird to prohibit <style>, <script>, and presumably <link> and some other tags in content blocks and force them into headers/footers. Annoying, but it doesn’t predict the bug you’re seeing. That’s a whole other level. 

 

The issue started when I initially customized the form inside the Marketo Form Editor. After saving and revisiting the page, the Marketo-generated styles and markup appeared inside HTML editor, creating duplicate styling and other issues. I'll attach screenshots showing what I mean.

Right, this seems like a pretty bad bug in the CMS. But there surely are ways to sidestep it. Another approach is to have the embed code check if it’s running on the CMS URL, and if so don’t embed the form. That way the form would only render in preview/staging mode but it would mean the CMS UI wouldn’t be able to do the weird DOM copying thing. 

 

Based on your feedback, I removed the custom styling from Marketo and moved it to the page-level CSS instead. That seems to be working much better (the first two screenshots demonstrate how I have it currently set up).

To be clear though, I wasn’t referring to the page-level CSS. This won’t scale. I meant a remote .css file (hosted in Marketo Design Studio and pulled into a <link>).

 

Terms & ConditionsAccessibility statement

Loading footer...