Urgent Form 2.0 CSS Help

[Anonymous]

I have a form here http://info.xyleminc.com/NewProdTest.html?aliId=23401951

That I want to style to make it look like the form here Xylem

Any help would be great.

[Anonymous]

Thanks Greg, I found this really helpful!

[Jim_Thao7]

If you've not played with Marketo Form CSS at all, I would recommend that you start here: http://jennamolby.com/how-to-style-a-marketo-form-like-a-pro/

[Anonymous]

This is helpful, but it still doesn't tell me how to add height to fields. Can you suggest how?

[SanfordWhiteman]

Your original form uses ParsleyJS for validation, so if you are really going to mirror the original you need to integrate this interaction as well.

Disabling all Marketo styles + stylesheets is very useful when trying to match styles from a mockup or model form (see my recipe MktoForms2 :: Destyle Marketo form) but you have a significant task if this is truly urgent to deliver.

[Anonymous]

Agreed. This is taking longer than I thought it would. Is there a way I can use the CSS in the original and apply it to my form?

[SanfordWhiteman]

The <FORM> DOM fragment is too different now.  It could be manipulated to look like the original, then CSS + JS could be applied.

(Something I could def'ly do, but it's beyond the bounds of pro bono....)

[Grégoire_Miche2 · Accepted solution]

.mktoForm input {height: 20px !important;}

-Greg

[Josh_Hill13]

Hey Raj,

If your web team has a developer, it should be easy for them.

[Anonymous]

Unfortunately a developer wont be touching this form. All i need help with is how to add height to the field itself. and add spacing between label and field.

[Dory_Viscoglio]

Hey Raj, I would post this in Products instead of the NY User Group. You will likely get more responses.