SOLVED

Remove bold label for required fields

Go to solution
Anonymous
Not applicable

Remove bold label for required fields

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;

    }

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Remove bold label for required fields

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

View solution in original post

11 REPLIES 11
Grant_Booth
Level 10

Re: Remove bold label for required fields

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
Not applicable

Re: Remove bold label for required fields

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
Level 10

Re: Remove bold label for required fields

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?

SanfordWhiteman
Level 10 - Community Moderator

Re: Remove bold label for required fields

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

Anonymous
Not applicable

Re: Remove bold label for required fields

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
Level 10 - Community Moderator

Re: Remove bold label for required fields

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

Anonymous
Not applicable

Re: Remove bold label for required fields

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
Level 10 - Community Moderator

Re: Remove bold label for required fields

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

View solution in original post

Anonymous
Not applicable

Re: Remove bold label for required fields

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