Add field-type-specific class to .mktoFieldWrap in Forms

0 Likes

Add field-type-specific class to .mktoFieldWrap in Forms

The only class that is specific to the field type is on the input element itself, but I want to style the LABELS of the inputs differently depending on the type. I could probably even manage if I could switch the label in the DOM to come AFTER the input using input[type=...] ~ label... but you know what would be easier??... including a class on the wrapper... PLEASE!!

e.g.

<div class="mktoFieldWrap MKTO-FIELD-SELECT"> ← ADD A NEW CLASS HERE!!!
 <label for="foo" id="Lblfoo" class="mktoLabel mktoHasWidth" style="width: 100px;">
Select one:</label>
 <div class="mktoGutter mktoHasWidth" style="width: 10px;"></div>
 <select id="foo" name="bar" aria-labelledby="Lblfoo" class="mktoField mktoHasWidth mktoValid" style="width: 150px;" aria-invalid="false">
  <option value="">Select...</option>
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
 </select>
 <span id="foo" tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>

 

2 Comments
corypark
Level 1

mktoFieldSelect

mktoFieldText

mktoFieldEmail

mktoFieldPhone

mktoFieldNumber

etc.

corypark
Level 1

UPDATE:

My research (quite randomly) led me to (yet another)  hack  solution for this issue by none other than the ultimo Marketo hackster himself, @SanfordWhiteman !

https://blog.teknkl.com/tagging-labels-with-input-types-for-styling/

Thanks again Sanford! Is this such a "rare need"? Seems pretty common to me... like thank you messages, and multiple forms on a single page (both of which I've had to use variations of #sanfordHacks) I've been quite surprised at how thoughtlessly forms have been implemented in Marketo 😕👎