The Custom CSS should be cloned as well — although there have been bugs in this area in the past.
In any case, it’s impossible to know for sure without seeing the forms live (like @vinay_kumar said) but it may also be that the Custom CSS was specifically tailored for the original form ID. For example, I see stuff like this in lots of Custom CSS:
#mktoForm_1234 input {
border: 2px solid red;
}
This selector will only apply to the original form ID, by definition. This is both good and bad.
- Good: The styles you apply will never accidentally “leak” into other Marketo forms on the same page.
- Bad: If you clone the form, intending to use the clone in exactly the same context, the styles won’t apply.
- Also not good: Since the styles aren’t applied but are otherwise harmless, they tend to linger around forever because no one knows whether they’re necessary or not!
To make things more future-proof, it’s better to tag your <form> tag with a semantically solid name that can be used regardless of whether the ID changes:
<form id="mktoForm_1234" data-mktoform-name="Contact Us"></form>
Then your selectors use that:
[data-mktoform-name="Contact Us"] input {
border: 2px solid red;
}
Unfortunately, you can’t automatically pick up the Form Name from Marketing Activities/Design Studio. But this may be a net positive, since that’s a private value that may not be meant for outside consumption. (Sidebar: this is why I don’t like using {{program.name}} or {{campaign.name}} in places that the public can see.)
