Did a large form export (3000+ forms) from a Marketo instance recently, prepping for migration to a new instance, and was alarmed to see how many forms used extremely specific selectors in their Custom CSS:
/* Add your custom CSS below */
#mktoForm_1234 input {
border: 2px solid pink;
}Of course, it’s clear why people do this: to ensure no other form on the page is affected by the custom styles. Especially when you’re doing a rush styling job, you want to make sure to limit side effects.
The problem is when you clone the form, everything breaks.
That’s when you realize you didn’t mean “Only this specific form descriptor in the db has these styles.” At very least, you meant “Whatever forms serve this business purpose in our current design system have these styles.” (And it’s possible you actually meant “All Marketo forms have these styles.”)
So this method locks you in and should be avoided. Instead, use a custom data- attribute that holds a custom name* for the form. Then you can use and reuse that name across forms and/or instances:
<form id="mktoForm_1234" data-mktoform-name="Contact Us Form"></form>/* Add your custom CSS below */
[data-mktoform-name="Contact Us Form"] input {
border: 2px solid pink;
}The data-mktoform-name can still be unique across your instance if you want. It just doesn’t have to be unique, which is important for scaling out (and “scaling over,” if you will, when migrating).
And a general tip: try to avoid using Form Editor-level Custom CSS at all. Separate CSS files are way easier to manage!
Notes
* Nope, you can’t automatically pick up the Form Name from Marketing Activities/Design Studio. But to me this is a net positive, since that’s a private value that may not be meant for outside consumption. (Also why I don’t like using {{program.name}} or {{campaign.name}} in places that the public can see.)