Forms 2.0 css styling

[Richard_Wasylyn]

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?

[Matt_Stone2]

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.

[Josh_Hill13]

Also check if  the CSS matches your LP templates, although !important would override that code.

[Richard_Wasylyn]

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.

[Matt_Stone2]

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?

[Richard_Wasylyn]

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.

[Richard_Wasylyn]

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?

[Anonymous]

You are correct. You will have to update the class names in your CSS to match the new class names. 

[Richard_Wasylyn]

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"?

[Matt_Stone2]

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