SOLVED
1 ACCEPTED SOLUTION
Accepted Solutions
To specifically remove the "theme" styling layer from a page you can add a stylesheet with id="mktoForms2ThemeStyle" to your template to omit the theme stylesheet from loading. You can also do the same thing with the base stylesheet by adding a stylesheet with id="mktoForms2BaseStyle" to your template. These can be blank stylesheets or you can load them up with CSS you'd rather have load in place of the default Marketo stylesheets.
You can grab the HTML for these links from any page with a form on it and just replace the URL with a link to your own stylesheet instead. Here's a look at the markup you'd use on your template to omit the stylesheet(s) -- just replace the href="..." with the URL to your stylesheets instead (these can even be blank files).
<!-- omit native base form CSS -->
<link id="mktoForms2BaseStyle" rel="stylesheet" type="text/css" href="__LINK_TO_YOUR_STYLESHEET_HERE__">
<!-- omit native form theme CSS -->
<link id="mktoForms2ThemeStyle" rel="stylesheet" type="text/css" href="__LINK_TO_YOUR_STYLESHEET_HERE__">
I think this works b/c Marketo is looking to see if there's already a set of form styling rendered on the page each time it unfolds a form via forms2.js to avoid putting multiple copies of this on the page. If it sees the <link> with either id value listed above it'll skip over loading the native stylesheets and load yours instead.
This won't completely get rid of the styles the same as Sanford's solution but it will allow you to basically omit the add'l stylesheets from getting added into the mix. The balance of things to work around at this point then would be the inline styles on each of the form elements, for example <div class="mktoFormCol" style="padding-bottom: 10px;">...</div> -- but this can be worked around on a stylesheet by using an important tag like this:
form.mktoForm .mktoFormCol {padding-bottom: 20px !important;}
To specifically remove the "theme" styling layer from a page you can add a stylesheet with id="mktoForms2ThemeStyle" to your template to omit the theme stylesheet from loading. You can also do the same thing with the base stylesheet by adding a stylesheet with id="mktoForms2BaseStyle" to your template. These can be blank stylesheets or you can load them up with CSS you'd rather have load in place of the default Marketo stylesheets.
You can grab the HTML for these links from any page with a form on it and just replace the URL with a link to your own stylesheet instead. Here's a look at the markup you'd use on your template to omit the stylesheet(s) -- just replace the href="..." with the URL to your stylesheets instead (these can even be blank files).
<!-- omit native base form CSS -->
<link id="mktoForms2BaseStyle" rel="stylesheet" type="text/css" href="__LINK_TO_YOUR_STYLESHEET_HERE__">
<!-- omit native form theme CSS -->
<link id="mktoForms2ThemeStyle" rel="stylesheet" type="text/css" href="__LINK_TO_YOUR_STYLESHEET_HERE__">
I think this works b/c Marketo is looking to see if there's already a set of form styling rendered on the page each time it unfolds a form via forms2.js to avoid putting multiple copies of this on the page. If it sees the <link> with either id value listed above it'll skip over loading the native stylesheets and load yours instead.
This won't completely get rid of the styles the same as Sanford's solution but it will allow you to basically omit the add'l stylesheets from getting added into the mix. The balance of things to work around at this point then would be the inline styles on each of the form elements, for example <div class="mktoFormCol" style="padding-bottom: 10px;">...</div> -- but this can be worked around on a stylesheet by using an important tag like this:
form.mktoForm .mktoFormCol {padding-bottom: 20px !important;}
.png)