A Pride flag effect for Marketo forms (though maybe too late for 2023)
Yes, it’s almost June! But the other day the idea of “form rows as flag stripes” came to me. Myriad ways to interpret that idea, of course, but here’s what I came up with:
My goal was to stick to standard Marketo form HTML, not injecting any new (non-pseudo) elements nor rearranging existing ones. And my custom CSS doesn’t override the native Simple theme.
(A custom HTML form could of course do much more, but that defeats the point of “simply” dressing up an existing Marketo form for a special occasion.)
To get the effect, we need a tiny snippet of JS and a small amount of CSS.
The JS
MktoForms2.whenReady(function (mktoForm) {
let formEl = mktoForm.getFormElem()[0],
allRows = formEl.querySelectorAll(".mktoFormRow,.mktoButtonRow"),
visibleRows = Array.from(allRows).filter( (row) => window.getComputedStyle(row).height !== "0px" );
visibleRows[0].classList.add("flag-top");
visibleRows.forEach((row, idx) => {
row.classList.add
