Using token for color of form button

Forum|Forum|4 years ago
June 28, 2021
1 reply
2607 views

Hello,

Our company has a number of clients for whom we use the Marketo platform. Each client has their own branding assets/colors, etc., which we display in our emails and landing pages.

In order to assign the branding assets in our emails and landing pages, e.g., logos, background colors, button colors, font colors, etc., we use tokens.

We have created a landing page in Marketo that is using a Marketo form. I would like to be able to use our {{lead.Brand Primary Color}} token to assign each brand's color to the form button color and font colors.

How would I go about doing this?

Thanks for your help,

LK

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

SanfordWhiteman

New Participant

The background color is a gradient by default. How do you plan to deal with that?

Which form theme are you using? The selectors can change by theme.

G

Guitarrista82Author

New Participant

I am using the Simple form theme and am trying to override some existing external CSS that was coded to change the form.

The landing page is Marketo but is a custom-edited page using external CSS, Javascript and other files.

I am trying to code the CSS code within the HTML page itself to modify the look of the button.

SanfordWhiteman

New Participant

Using CSS variables only to make the demo clearer — you can’t use them in production because they won’t work on IE11, so use actual values — this is how you’d override in Simple:

:root {
  --primary-marketo-font-color: violet;
  --primary-marketo-button-color: red;
  --secondary-marketo-button-color : gold;
  --secondary-marketo-font-color: whitesmoke;
}
.mktoForm {
  color: var(--primary-marketo-font-color) !important;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
  color: var(--secondary-marketo-font-color) !important;
  border: 1px solid var(--primary-marketo-button-color);
  background-color: var(--primary-marketo-button-color);
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-button-color)), to(var(--primary-marketo-button-color)));
  background-image: -webkit-linear-gradient(top, var(--secondary-marketo-button-color), var(--primary-marketo-button-color));
  background-image: -moz-linear-gradient(top, var(--secondary-marketo-button-color), var(--primary-marketo-button-color));
  background-image: linear-gradient(to bottom, var(--secondary-marketo-button-color), var(--primary-marketo-button-color));
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {
  border:1px solid var(--secondary-marketo-button-color);
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:focus {
  border:1px solid var(--secondary-marketo-button-color);
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:active{
  background-color: var(--secondary-button-color);
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--primary-marketo-button-color)), to(var(--secondary-marketo-button-color)));
  background-image: -webkit-linear-gradient(top, var(--primary-marketo-button-color), var(--secondary-marketo-button-color));
  background-image: -moz-linear-gradient(top, var(--primary-marketo-button-color), var(--secondary-marketo-button-color));
  background-image: linear-gradient(to bottom, var(--primary-marketo-button-color), var(--secondary-marketo-button-color));
}

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded