SOLVED

Urgent Form 2.0 CSS Help

Go to solution
Anonymous
Not applicable

Urgent Form 2.0 CSS Help

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.

1 ACCEPTED SOLUTION

Accepted Solutions
Grégoire_Miche2
Level 10

Re: Urgent Form 2.0 CSS Help

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

-Greg

View solution in original post

10 REPLIES 10
Dory_Viscoglio
Level 10

Re: Urgent Form 2.0 CSS Help

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

Josh_Hill13
Level 10 - Champion Alumni

Re: Urgent Form 2.0 CSS Help

Hey Raj,

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

Anonymous
Not applicable

Re: Urgent Form 2.0 CSS Help

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.

Jim_Thao7
Level 9

Re: Urgent Form 2.0 CSS Help

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
Not applicable

Re: Urgent Form 2.0 CSS Help

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

Grégoire_Miche2
Level 10

Re: Urgent Form 2.0 CSS Help

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

-Greg

SanfordWhiteman
Level 10 - Community Moderator

Re: Urgent Form 2.0 CSS Help

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
Not applicable

Re: Urgent Form 2.0 CSS Help

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
Level 10 - Community Moderator

Re: Urgent Form 2.0 CSS Help

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....)