Remove bold label for required fields | Community
Skip to main content
A
Anonymous
June 30, 2015
Solved

Remove bold label for required fields

  • June 30, 2015
  • 3 replies
  • 7026 views

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;

    }

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

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


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

3 replies

Grant_Booth
Grant_Booth
Level 9
June 30, 2015

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;

    }

A
Anonymous
July 1, 2015

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
Grant_Booth
Level 9
July 1, 2015

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
SanfordWhiteman
Level 10
July 1, 2015

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

A
Anonymous
July 1, 2015

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

bit.ly/1dyfJAN

SanfordWhiteman
SanfordWhiteman
Level 10
July 1, 2015

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

A
Anonymous
July 8, 2015

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

Grant_Booth
Grant_Booth
Level 9
July 9, 2015

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

A
Anonymous
July 9, 2015

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

    Terms & ConditionsAccessibility statement

    Loading footer...