Form CSS

Highlighted
Anonymous
Not applicable

Form CSS

I am new to Marketo and am finding many areas frustrating and challenging. Specifically with forms. Is there an easy way to customize the css to make my forms more stylized. It would be really nice to see code snippets and examples. Maybe they exist, I just can't seem to find them.

Thank you in advance

Marc

8 REPLIES 8
Highlighted
Level 10 - Community Moderator

Re: Form CSS

Restyling forms is quite easy if you know CSS: the form HTML -- the DIV wrappers and the actual form INPUTs -- is quite predictable.  You can search my posts for "destyled form" and see a barebones form that can be built up with fully custom CSS.

It is, however, true that people tend to customize Marketo form behaviors (i.e. using the Forms JS API and using Visibility Rules) more often than they customize the form styles. This is not to say they could not restyle to their heart's content. But typically the people authoring LPs are marketers, not designers, so it's best for them to use the default look-and-feel.

Anonymous
Not applicable

Re: Form CSS

2017-MKTO-LP-GN

Highlighted
Level 10 - Community Moderator

Re: Form CSS

Hi Marc,

I don't understand your response.

Highlighted
Anonymous
Not applicable

Re: Form CSS

Wow neither do I! Hmm well thank you for responding!

Highlighted
Level 10 - Community Moderator

Re: Form CSS

Also, be sure to post to Products. Marketing Central is more general and not for tech questions about the Marketo product line. (Although it is confusing because blog posts in ​MC ​can be technical.)

Highlighted
Level 5

Re: Form CSS

Hi Marc Reece​,

You may have come across this already but this link in the Marketo docs is a very helpful guide to get you started on overwriting form CSS:  Edit the CSS of a Form Theme - Marketo Docs - Product Docs . As the article states, I strongly recommend copying the existing CSS and then editing it as needed. It took some trial and error (I am not a developer) but I found that I could customize everything I needed to match our designer's creative.

Below is a screenshot of an example of a form with custom CSS. The font, borders and submit button are all custom CSS.

pastedImage_1.png

Highlighted
Anonymous
Not applicable

Re: Form CSS

Thank you

Highlighted

Re: Form CSS

Hey Marc,

You should try out Knak (www.knak.io). We have almost 100 Marketo templates (emails + landing pages) where we provide all the stylized CSS for your Marketo forms. A lot of developers will use this as their base and then customize accordingly. Will save you a ton of time.