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
  • 3441 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

Show previous replies
A
Anonymous
August 14, 2014

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 🙂

 



 

A
Anonymous
August 14, 2014
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? 
A
Anonymous
August 15, 2014
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.
Terms & ConditionsAccessibility statement

Loading footer...