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.
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 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
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.
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.
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.
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.)
You can also disable all Marketo native styles with a few lines of code. Then go crazy!