Material Design style Marketo forms - can it be done?

[Anonymous]

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.

[Casey_Grimes]

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

[Anonymous]

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.

[Anonymous]

I've been building a more complex javascript (plain old js, no jQuery necessary) class that compensates for other deficiencies in Marketo forms as well, like assign actual placeholder attributes, moving a submit button inside a fieldset, etc. While compensating for the inability to designate fields as required using the actual 'required' field attribute, I began to wonder...any idea who's the Goscinny/Uderzo fan at Marketo? I saw the "Asterix" class and started wondering where Obelix, Dogmatix, Cacophonix, and the rest of the Gauls would show up.

The eventual goal of the code is to replace the, um, shall we say idiosyncratic(?) Marketo markup with 'normal' Bootstrap markup, so the form can drop right into a page w/o making me maintain duplicate codebases just to make the forms look and act like they were designed in the last decade.

[Casey_Grimes]

I, too, often use custom JavaScript to enhance capabilities around forms--but I'm doing it to add an extra layer of semantics and accessibility on top or provide the end user with controls and inputs that Marketo doesn't support due to their relative rarity. Placeholder attributes can be correctly set with out of the box functionality (and honestly, there's less and less of a reason to use polyfills in 2017 if that's where your complaint lies.) In terms of adding submission buttons inside fieldsets, I'd make the argument that this only makes sense semantically if you're requiring the person to agree to some condition upon posting the form; otherwise, it's just stylistic at best.

Additionally, I'd be incredibly wary of manipulating classes to act like Bootstrap, because then...you're really just swapping out one prescriptive design for another. There are plenty of frameworks out there, and it's really not a huge leap to group CSS selectors as-is. Honestly, if the design is that big of an aesthetic offense, you can always use the plain design that will inherit any properties you set to the form elements themselves. I honestly only wrote that CSS override because a lot of companies start out with the default design and it's not practical to switch, say, 70 forms. I don't get the argument that you're having to maintain two codebases, because I have put Marketo form styling into plenty of overall CSS/Sass codebases without incident.

Are Marketo forms perfect? No. In fact, I've talked to Marketo directly about this. But I'm just confused where your hostility is coming from.

[Anonymous]

Yes, I add semantics and other extras, but there's more wrong than just that (for example, I've never had a Marketo form pass a simple check for valid HTML usage) so I kept going. I might have a different approach to this if every form on the site was Marketo-based, but only some are, so Marketo's idiosyncrasies end up feeling like it's the rock group demanding the hotel -- me -- remove all the brown M&M's from the bowl. Other forms on the site sometimes end up making Marketo's forms just look bad. And perish the thought you might want to try something a bit edgy for your forms. (Have a look at Huffduffer's sign up page sometime and try to do *that* form in Marketo without surgery -- and that form layout technique is about a decade old. There's a lot of interesting and effective approaches to form layout that can't be done without kicking Marketo out of the way, at least metaphorically.)

It's not so much "swapping one prescriptive design for another" as it is refusing to double up on code (one batch for the site, another batch because Marketo forms are "special") in order to maintain *two* prescriptive designs (Marketo and <insert framework name>). Faced with that choice, I'll choose the better one and apply it everywhere. And it's hard to imagine one of those matchups Marketo doesn't lose, simply because the others let you take advantage of better approaches to form markup (Marketo's markup is div-heavy, even compared to Bootstrap, which something I *never* thought I'd see).

My hostility is based in frustration. Picture Marketo Forms as That Guy in the office who's always in your way, always trying to stop you from getting your work done, always blocking you for no other reason than that he can. Always making things harder than they should be. It grates on you. I'm tired of having to put up with it, hence the hostility. Tools are supposed to save time and reduce work; when you have to spend time working around the tool's limitations, there's something wrong with the tool.

(And we'll have to have that discussion on submit/fieldset sometime, but it's more 'tool philosophy' than 'tool use' in nature so this isn't the spot for it.)

[SanfordWhiteman]

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

[Anonymous]

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.