SOLVED

Customizing Form Label Under Visibility Rules

Go to solution
Jeff_Smith3
Level 7

Customizing Form Label Under Visibility Rules

When the country field on our form is selected for either United States or Canada, the visibility rules are enabled to display another field for State or Province. All of our field labels are white and displayed on a dark blue background. However, because the label for state or province is displayed from the visibility rules window, it defaults to black font color. Can anyone provide any help or custom CSS that would change this font color to white? Thanks!

1 ACCEPTED SOLUTION

Accepted Solutions
Grant_Booth
Level 10

Re: Customizing Form Label Under Visibility Rules

Hi Jeff,

I'll generally use the Element Inspector to find a class or Id associated with the part of the form I'm looking for, then write some CSS to over-ride the default. Using the element inspector, I see that Marketo form labels have the class "mktoLabel":

mktoLabel.png

Based on that, I came up with this:

<style>

.mktoLabel {

color:white;

}

</style>

Keep in mind that sets ALL the labels to white, not just the State label.

- Grant

View solution in original post

7 REPLIES 7
Grant_Booth
Level 10

Re: Customizing Form Label Under Visibility Rules

Hi Jeff,

I'll generally use the Element Inspector to find a class or Id associated with the part of the form I'm looking for, then write some CSS to over-ride the default. Using the element inspector, I see that Marketo form labels have the class "mktoLabel":

mktoLabel.png

Based on that, I came up with this:

<style>

.mktoLabel {

color:white;

}

</style>

Keep in mind that sets ALL the labels to white, not just the State label.

- Grant

Mark_Halliday1
Level 2

Re: Customizing Form Label Under Visibility Rules

Jeff,

Using Grant's method you could add this to the custom CSS of the form:

pastedImage_0.png

Jeff_Smith3
Level 7

Re: Customizing Form Label Under Visibility Rules

Perfect! Thanks for the help with that.

Jeff_Smith3
Level 7

Re: Customizing Form Label Under Visibility Rules

Hmm...I just edited the custom CSS with this...

pastedImage_0.png

...but my form is still showing a black field label. The assets are approved. Is there something that's not right?

pastedImage_1.png

Mark_Halliday1
Level 2

Re: Customizing Form Label Under Visibility Rules

Hi Jeff,

you'll need to remove the opening and closing <style> tags. That should do it.

Jeff_Smith3
Level 7

Re: Customizing Form Label Under Visibility Rules

Great, thanks!

Grant_Booth
Level 10

Re: Customizing Form Label Under Visibility Rules

Yes, the <style> tags would only be if you added HTML to the landing page instead of directly to the form CSS.