Forms 2.0 css styling

Highlighted
Level 4 - Champion Alumni

Forms 2.0 css styling


We are in the process of moving some of our forms over to Forms 2.0 but are having issues around out styling. We obviously don't want to release the new forms unless they match our existing forms but are having some challenges getting our existing styles to be recognized with the new forms.

Does anyone have any quick tips on how we can get the new forms (forms 2.0) to adopt our existing styling?
Tags (1)
9 REPLIES 9
Highlighted
Level 6

Re: Forms 2.0 css styling

Kind of depends on exactly what's not matching up, but the 2.0 forms let you drop custom CSS into them and if you've got decent knowledge of it, you can customize it any way you want.

Keep in mind that sometimes you'll have to use the !important operator to override some built-in styles.
Highlighted
Level 10 - Champion Alumni

Re: Forms 2.0 css styling

Also check if  the CSS matches your LP templates, although !important would override that code.
Highlighted
Level 4 - Champion Alumni

Re: Forms 2.0 css styling

At this point most of our styling isn't getting picked up, we have some background colors and positioning that isn't working out. I've checked the CSS matches my original templates and added !important but not having much luck getting this form to work out. It still looks like the form themes are overridding my original styles.
Highlighted
Level 6

Re: Forms 2.0 css styling

It's hard to identify why that's happening without seeing it. Would you be willing to post a link, or at least a screenshot, so we can take a look?
Highlighted
Level 4 - Champion Alumni

Re: Forms 2.0 css styling

Here are the screen shots of the approved, I'm trying to get the styling on the Forms 2.0 shot to match our original styling. It looks like the  Forms 2.0 form is picking up the form themes from the editor and overridding our CSS.
0EM50000000S2sY.jpg0EM50000000S2sd.jpg
Highlighted
Level 4 - Champion Alumni

Re: Forms 2.0 css styling

Digging into this a bit further, Forms 2.0 has a completely different set of classes that are being dropped in.

Old form
<li class='mktFormReq mktField' ><label>First Name:</label><span class='mktInput'><input class='mktFormText mktFormString mktFReq' name="FirstName" id="FirstName" type='text' value="" maxlength='255' tabIndex='1' /><span class='mktFormMsg'></span></span></li>

New Form (form 2.0)
<input  id="FirstName" class="mktoField mktoTextField mktoHasWidth mktoRequired mktoInvalid" type="text" name="FirstName" maxlength="255" title="" style="width: 150px;"></input>

I'm guessing that basically I'm going to have to either re-build my CSS or abandon Forms 2.0?
Highlighted
Anonymous
Not applicable

Re: Forms 2.0 css styling

You are correct. You will have to update the class names in your CSS to match the new class names. 
Highlighted
Level 4 - Champion Alumni

Re: Forms 2.0 css styling

Is there any patter behind the mapping? Or is this something I'd have to do one by one? For example with class "form.lpeRegForm" does that always get replaces with ".mrkto.Form"?
Highlighted
Level 6

Re: Forms 2.0 css styling

You should be able to pattern match them. The classes won't change on a form-by-form basis.