SOLVED
1 ACCEPTED SOLUTION
Accepted Solutions
There are actually a few different ways!
Here's one: adding program tokens as <body> classes.
CSS and important styles!
In your template, you can put program tokens on the body class. If these aren't defined, they don't render to anything on the page. They're great backups for situations just like the one you're talking about.
For example, on this Marketo landing page, we have body class program tokens in place. If you look at the code, you can see they're not defined.
Then in your CSS, either global or not, you can just add a layer of specificity targeting children of this body class with stylings (probably !important) to change the form styling.
E.g., if you had the token {{my.Content - Dev_Body Class}} defined as "body-class-styling-1," then you could add this to your global or non-global CSS to change the button to red:
.body-class-styling-1 .mktoButton {
background-color: red!important;
}
That'd be a clean way to do it, in my opinion, because then you can just tweak one token to choose what styling you want, and it works when a developer sets it up and specialists can use it by changing that token value semantically (or by picking a few different options).
Another option: Backup CSS tokens in the template.
In this case, you'd rely on your Marketo user to know the CSS that needs to be put in place to change the styling of the form, and it can get pretty messy quickly. I like this as a rapid-fire-changing landing pages, and then put it into a queue to migrate to the actual global CSS or Marketo-specific CSS.
In this case, you'd define the token {{my.Content - Dev_head CSS}} as "<style>.mktoButton{background-color: red!important}</style>" and that'd change the button to red just on that page without having to use a different form.
Another option if you just want simple color changes of buttons: color variables.
I think you're looking for something more stylized than this, but you can use the new variable feature of Marketo's guided mode to change the color of the button.
This in the head:
<meta class="mktoColor" id="buttonColor" mktoName="Page: Button Color" default="#336699">
<style>.mktoButton{background-color: ${buttonColor}!important}</style>
And then the editor will allow the users to change the button color. This could get messy fast if your marketers don't know how to design well (EVERYTHING IN FUSCIA!).
Changing the Button Text through Tokens (not CSS or JS)
Also, you can change the button text itself as a token, even if it's a global form. Just put the button text to be {{my.Content - LP_Button CTA:default=Submit}} and then you can change it as necessary on the program, folder, or Universal level as needed.
If you want examples of how the code works with these variables, you can download some new templates with documentation on tokens and how to use them here. Also, I went into an absurd amount of detail on using tokens in this presentation from Marketo Summit here.
Cheers,
Edward Unthank | Founder, Etumos
Hey Sanford Whiteman,
As always, I find some great stuff from you when searching, so I'm resurrecting this thread 
. Are you saying that if I add this to the form (aside from the submit button part) that I can strip all the Marketo Form styling including style tags?
Is this something you would still recommend to achieve this?
/Erik
There are actually a few different ways!
Here's one: adding program tokens as <body> classes.
CSS and important styles!
In your template, you can put program tokens on the body class. If these aren't defined, they don't render to anything on the page. They're great backups for situations just like the one you're talking about.
For example, on this Marketo landing page, we have body class program tokens in place. If you look at the code, you can see they're not defined.
Then in your CSS, either global or not, you can just add a layer of specificity targeting children of this body class with stylings (probably !important) to change the form styling.
E.g., if you had the token {{my.Content - Dev_Body Class}} defined as "body-class-styling-1," then you could add this to your global or non-global CSS to change the button to red:
.body-class-styling-1 .mktoButton {
background-color: red!important;
}
That'd be a clean way to do it, in my opinion, because then you can just tweak one token to choose what styling you want, and it works when a developer sets it up and specialists can use it by changing that token value semantically (or by picking a few different options).
Another option: Backup CSS tokens in the template.
In this case, you'd rely on your Marketo user to know the CSS that needs to be put in place to change the styling of the form, and it can get pretty messy quickly. I like this as a rapid-fire-changing landing pages, and then put it into a queue to migrate to the actual global CSS or Marketo-specific CSS.
In this case, you'd define the token {{my.Content - Dev_head CSS}} as "<style>.mktoButton{background-color: red!important}</style>" and that'd change the button to red just on that page without having to use a different form.
Another option if you just want simple color changes of buttons: color variables.
I think you're looking for something more stylized than this, but you can use the new variable feature of Marketo's guided mode to change the color of the button.
This in the head:
<meta class="mktoColor" id="buttonColor" mktoName="Page: Button Color" default="#336699">
<style>.mktoButton{background-color: ${buttonColor}!important}</style>
And then the editor will allow the users to change the button color. This could get messy fast if your marketers don't know how to design well (EVERYTHING IN FUSCIA!).
Changing the Button Text through Tokens (not CSS or JS)
Also, you can change the button text itself as a token, even if it's a global form. Just put the button text to be {{my.Content - LP_Button CTA:default=Submit}} and then you can change it as necessary on the program, folder, or Universal level as needed.
If you want examples of how the code works with these variables, you can download some new templates with documentation on tokens and how to use them here. Also, I went into an absurd amount of detail on using tokens in this presentation from Marketo Summit here.
Cheers,
Edward Unthank | Founder, Etumos
.png)