Level 4

Question

Forms 2.0 css styling

Forum|Forum|11 years ago
June 23, 2014
9 replies
3117 views

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?

Marketo

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

Matt_Stone2

Level 9

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

Level 10

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

Richard_WasylynAuthor

Level 4

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.

Richard Wasylynchuk

Matt_Stone2

Level 9

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_WasylynAuthor

Level 4

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 Wasylynchuk

Richard_WasylynAuthor

Level 4

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?

Richard Wasylynchuk

A

Anonymous

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

Richard_WasylynAuthor

Level 4

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

Richard Wasylynchuk

Matt_Stone2

Level 9

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded