How to modify field label text color in custom CSS in Marketo Forms | Community
Skip to main content
A
Anonymous
August 13, 2014
Question

How to modify field label text color in custom CSS in Marketo Forms

  • August 13, 2014
  • 13 replies
  • 3440 views
We've built custom CSS to stylize our Marketo forms. The custom CSS for one of them is attached below. It looks like the fields are coded to appear in black but they're appearing in dark grey.

Does anyone out there have CSS knowledge who can help me troubleshoot? We want the fields to display in black. 

.mktoForm{color: #000000;width:378px !important; max-width: 407px; float:right; line-height: 34px; background: none repeat scroll 0% 0% #F0F0F0; padding: 10px 50px 20px 50px;
border-radius: 5px;font-family: 'Open Sans', sans-serif !important;}
.mktoLabel {padding: 0 0 12px 0 !important; width: 109px !important;}
.mktoField{color: #000000; font-size: 14px !important; min-height: 33px; padding: 0px 0px 0px 5px !important; width: 100% !important; border: 1px solid #FAAA43; border-radius: 5px;}
.mktoOffset{width:0px !important; display:none !important;}
.mktoForm .mktoGutter{height:auto !important;}
.mktoForm .mktoFieldWrap{padding: 11px 0 0px 0;}
.mktoError{left:0px !important;}
.mktoButton{color: #000000 !important; font-size: 14px !important; min-height: 33px; padding: 0px 10px 0px 10px !important; width: 100%; border: 1px solid #FAAA43 !important; border-radius: 5px; background-color: #FFC000 !important; background-image: none !important;}
.mktoButton:hover{background-color: #fc9918 !important;}
.mktoButtonWrap{margin-left: 72px !important; display: inline-block;}
.mktoButtonRow{display: block !important; margin-top: 8px !important;}
.mktoAsterix {display:none !important;}
.mktoForm span {float:left;}
.tophed{
  
    float: left;
margin-top: -2px;
margin-bottom: 0px;
}
.lastlab{float: left;
margin-top: -9px !important; 
  font-size: 13px !important;
  
}
.mktoForm * {
font-family: 'Open Sans', sans-serif !important;
}
.mktoFormRow{
  width:250px;
}
.mktoTextField 
{
width:278px !important;
}
.mktoEmailField
{
width:278px !important;
}

Thanks,

David

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

13 replies

A
Anonymous
August 13, 2014
I don't see that you have the background color for the fields set anywhere. So in the class that deals with fields (.mktoField) you should include the following    background-color:#000000;  then they should come up as black.
A
Anonymous
August 13, 2014
Can you post the URL of a page where this is located? Maybe some overriding styles somewhere? Happy to help...
A
Anonymous
August 13, 2014
Shannan: I'm not trying to change the background color. I'm trying to change the text color. Does that help?

Jason: here's the URL for our test site where I've embedded the form  http://ww1.casthighlight.com/    The fields above the cells are appearing in a dark grey. Subtle difference. 

Thanks,
David
A
Anonymous
August 13, 2014
Looks like adding this code will help:

label.mktoLabel {
color: #000000;
}

You have a global form style that is applying a color to everything without a specific declaration; this adds one for labels.
A
Anonymous
August 13, 2014
Thank you for the clarification. I thought the field background color was the objective. Jason's code should work for your needs.
A
Anonymous
August 13, 2014
Thanks Jason. It worked!
A
Anonymous
August 13, 2014
A related question for ya: If I wanted to change the field labels above the cells from bold to regular weight, how would I make that change in the CSS? Ie. First Name: Last Name: etc.
A
Anonymous
August 13, 2014
Now that I look at the form more closely, it appears the font used in the field labels doesn't match the font used on our website, which is Open Sans. We coded the CSS for Open Sans, but I don't think the text in the form is rendering with this font. Any ideas? Sorry for so many questions. 
A
Anonymous
August 13, 2014
Looks like it does in my browser...did you get this fixed?
A
Anonymous
August 13, 2014
No, I haven't touched the CSS since I implemented your earlier advice. But if I look at the 'd' or 'e' in the form labels compared to the rest of the site, as an example, the font looks different. 

Edit: I checked our test site on my other laptop -- a Macbook -- and the font in the form appears to be the same font as on the rest of the website. On both laptops I'm using Chrome. I suppose the font looks a little different depending on the screen resolution or other settings.

I'm still interested in figuring out how to modify the CSS so the field labels are in regular weight. 

I thought the Marketo forms would be responsive but I just discovered this isn't the case, so I also need to figure out how to make our forms responsive. I'll post a separate thread about that one. I hope it's not too difficult. Our site is responsive. 

Thanks again,
David
Show more replies
Terms & ConditionsAccessibility statement

Loading footer...