Customizing a global form at landing page level

James_Glavin · ‎06-03-2015

Hi there,

We have one standard form that we use on multiple Marketo landing pages. We're struggling to find an easy way to customize the submit button on the form and hope someone out there has found a good solution!

We'd like to be able to change the look of the button (color and text) from page to page. How could we do that without having to create a new template for every landing page or having multiple forms?

In other discussion threads, people have mentioned using tokens, but I don't understand where we place the token initially in order to make this work.

We're using Marketo's new guided landing page template feature which is making it much easier for our marketing team to make changes to landing pages, but this is the last piece of the puzzle—thanks in advance for any advice!

James

Edward_Unthank_ · ‎06-03-2015

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:

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

View solution in original post