Does anyone know how to style the email forms in marketo?

[Anonymous]

I noticed that the divs in the markup that are generated to enclose around the various form elements in the form have the following class for every single one. Is there a way to insert a different class?

<div class='mktoFormRow'>

<div class='mktoFormCol'>

</div>

</div>

<div class='mktoFormRow'>

<div class='mktoFormCol'>

   <label class="mktoLabel" for='Email'>

   <span class="email-label">Email Address:</span> </label>

   <input type="text" class='mktoField mktoTextField' name='Email' id='Email'>

</div>

</div>

<div class='mktoFormRow'>

<div class='mktoFormCol'>

   <label class="mktoLabel" for='enewsRegularOptin'>

    Palisade Newsletter  </label>

   <input type="text" class='mktoField mktoTextField' name='enewsRegularOptin' id='enewsRegularOptin'>

</div>

</div>

[Anonymous]

Camilo Rosero​ Check here: Edit an Email's HTML - Marketo Docs - Product Docs

[Anonymous]

Hi Scott,

I am not referring to the email body itself. I'm referring to the html form that one creates that then appears in a landing page. Like so:

[Kenny_Elkington · Accepted solution]

You could certainly add classes with javascript.  The addClass method is really simple.  What exactly are you trying to accomplish by adding the classes?

[Grégoire_Miche2]

Hi Kenny,

If the form is in an email, JS will certainly not work and the email will be sent directly to the spam box...

-Greg

[Kenny_Elkington]

Hey Greg,

I don't think that was the question here.  I think "Email form" is just a form with an email field, though I could be misinterpreting that.  In any case, including a <form> element at all in a email is a fast track to spam anyway.

[Anonymous]

Hi Kenny,

Yes, I think you are on to what I would need. Using the "The addClass method"

How and where can I update the javascript that generates the form?

[Kenny_Elkington]

You can't directly modify the forms JS code, but you can operate on certain callbacks, via the Forms2 API: Forms 2.0 » Marketo Developers

Simple example for running script when a form finishes loading:

MktoForms2.whenReady(function(form){

     //Do something

});

[Anonymous]

HI Kenny,

Thank you for replying.

I am trying to achieve the following: I want to be able to style the background of each of those divs differently through their classes. Like the image below.

[Kenny_Elkington]

I don't think classes would be necessary strictly speaking.  I would probably use the nth-child selector in this case: CSS3 :nth-child() Selector

you could select your first form row like this(there's always a <style> element as the first child of a marketo form):

.mktoForm:nth-child(2){

     /*Your Styles for that element*/

}