Skip to main content
A
Anonymous
January 20, 2017
Question

Material Design style Marketo forms - can it be done?

  • January 20, 2017
  • 3 replies
  • 4767 views

Hey! I'm a designer working on a team using Marketo, I want to upgrade the design of our forms beyond what Forms 2.0 allows. Has anyone here done work on their forms to make them look and interact like this form: Bootstrap Forms - Material Design for Bootstrap

Right now it seems like I'm stuck with inline coding on all the forms that keeps me from really making them look and interact the way I want them to.

I'm trying to get beyond the world you can see in the attached picture, where it looks like I've built, and not updated my forms since 1999.

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

3 replies

Casey_Grimes2
Casey_Grimes2
Level 10
January 20, 2017

Hi Dan,

You absolutely can and this kind of thing is exceedingly common. The key is to make a CSS file wherever you're embedding your form (whether that's on Marketo or your own website) that acts as a global override rather than trying to do it per-form.

I have two common CSS resets that I use for form styling located here and here​ that should get you started towards making your forms work properly with Bootstrap.

I keep intending to do a side project or blog series showing some of the cooler things you can do with form styling and Marketo (sliders, advanced datepickers, color pickers, raters, etc.) and questions like this remind me that people actually do care. :X

A
Anonymous
January 20, 2017

Courtney! Thank you so much for this. It's so helpful, I'm going to see what I can do now with this css override code.

SanfordWhiteman
SanfordWhiteman
Level 10
January 20, 2017

You can also disable all Marketo native styles with a few lines of code. Then go crazy!

A
Anonymous
January 26, 2017

I ended up stripping the code and working with a developer to build a new form style for my page. Thanks for the advice Sanford Whiteman 2 (FigureOne)​ and @Courtney Grimes​!

You can see the form here: Transformers 2017 . It's the email address input form.

Terms & ConditionsAccessibility statement

Loading footer...