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

[Anonymous]

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

[Anonymous]

It's not quite that easy...you'll need to replace most of the fixed widths with 100% !important declarations; since your form is in a responsive "container", you want it to fill that no matter the screen size.

[Anonymous]

Thanks Jason. I see a few lines in the CSS for fixed widths. I deleted them and it threw off the length of one of the cells big-time. Am I only supposed to remove certain ones? 

[Anonymous]

To fix your font-weight issue, here's the code:

.mktoForm .mktoRequiredField label.mktoLabel{
     font-weight: normal;
}

As far as responsive goes, Forms 2.0 are responsive, but the CSS code you have above declares fixed widths for the form and the fields. If you remove that code, your form should be responsive. Here's a screenshot of some tweaking I did in Chrome Inspector:

Desktop: cl.ly/image/1M3h1R2a2J0r
Tablet: cl.ly/image/1g3P42082r13
Mobile: cl.ly/image/032f33113b3u

You just need the coders to understand Marketo a little more 🙂

[Anonymous]

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

[Anonymous]

Looks like it does in my browser...did you get this fixed?

[Anonymous]

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. 

[Anonymous]

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.

[Anonymous]

Thanks Jason. It worked!

[Anonymous]

Thank you for the clarification. I thought the field background color was the objective. Jason's code should work for your needs.

[Anonymous]

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.

[Anonymous]

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

[Anonymous]

Can you post the URL of a page where this is located? Maybe some overriding styles somewhere? Happy to help...

[Anonymous]

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.