Remove bold label for required fields

[Anonymous]

Hello,

I don't want the required fields to be bold. The below css change is not working in my custom css, I also tried normal !important. Any ideas?

.mktoForm .mktoRequiredField label.mktoLabel{

      font-weight: normal;

    }

[Anonymous]

How can I unwrap the strong tags them because I did not do that. Any ideas?

[Grant_Booth]

Hi Dan,

The first thing I would check is the rich text editor for the label:

Edit a Field Label in a Form - Marketo Docs - Product Docs

There's a little pencil icon to the right of the Label in the form editor which brings up a rich text editor. From there you can drill into the HTML to see if there's strong tags there for some reason. Any luck with that?

The only thing I can think of is that this is somehow related to the form's theme - what if you try a different one? I double-checked with a test form that Marketo does not insert strong tags for required fields - at least not for the theme that I chose.

Grant

[Anonymous]

Perfect! It worked! Thanks for sticking through this, I appreciate it!

[SanfordWhiteman]

Dan, please post a link to your form as embedded on a page.

[Anonymous]

Sure, here is the link. The contact request form is at the bottom. Need to remove the bolded required labels.

http://bit.ly/1dyfJAN

[SanfordWhiteman]

You have <STRONG> tags wrapping your labels.  Edit the label text itself.

[Anonymous]

Thanks for your reply. I am using marketo's 2.0 form and using the embed code. Not sure how I can do that as the embed code just populates the form

[SanfordWhiteman · Accepted solution]

Go into the form's definition in Marketo is what I'm saying.  Someone has deliberately bolded those labels by wrapping them in <STRONG>.

[Grant_Booth]

Hi Dan,

You'll want to add "!important" to the end of the CSS rule so it over-rides the form's built-in CSS.

Like this:

.mktoForm .mktoRequiredField label.mktoLabel{

      font-weight: normal !important;

    }

[Anonymous]

I added the !important in my custom css as I mentioned in my first post. Any other ideas?

Here is my entire custom css:

/* Add your custom CSS below */

.mktoForm .mktoRequiredField label.mktoLabel{

      font-weight: normal !important;

    }

.mktoForm .mktoButtonWrap.mktoGlow .mktoButton {

  color: #fff;

  background: #fff;

  border: 1px solid #F9B872;

  padding: 0.4em 1em;

  font-size: 1em;

  box-shadow: 0px 0px 10px 2px #FDEEA6;

  background-color: #F49F6C;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#F49F6C), to(#EC802F));

  background-image: -webkit-linear-gradient(top, #F49F6C, #EC802F);

  background-image: -moz-linear-gradient(top, #F49F6C, #EC802F);

  background-image: linear-gradient(to bottom, #F49F6C, #EC802F);

  float: left;

  width: 396px;

  padding: 1em !important;

  font-size: 1.3em !important;

}

@media screen and (max-width: 375px) {

   color: #fff;

  background: #fff;

  border: 1px solid #F9B872;

  padding: 0.4em 1em;

  font-size: 1em;

  box-shadow: 0px 0px 10px 2px #FDEEA6;

  background-color: #F49F6C;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#F49F6C), to(#EC802F));

  background-image: -webkit-linear-gradient(top, #F49F6C, #EC802F);

  background-image: -moz-linear-gradient(top, #F49F6C, #EC802F);

  background-image: linear-gradient(to bottom, #F49F6C, #EC802F);

  float: left;

  width: 375px;

  padding: 1em !important;

  font-size: 1.3em !important;

}

}

[Grant_Booth]

Ah, sorry Dan, I missed that.
I don't see anything that sticks out in the CSS which would interfere...have you tried inherit !mportant instead?
What does the element inspector show when you dig into that label?