Relative-ize Marketo forms on Free-Form LPs

Ah, Free-Form LPs: the Marketo feature you swore you'd never use again. Except your marketers or clients (or even you in a crunch) didn't listen.

The main problem with FFLPs isn't what they do — that is, offer a drag-and-drop canvas for absolutely positioned elements so you can rapidly create LPs — it's trying to make them do anything else.

A good example is when you have a responsive-ish layout at the template level that expects a <form> in a particular place, but when you drag in a Marketo form and it just ends up inside an absolutely positioned <div>, breaking your designer's expectations.

Easy to fix, though, thanks to the Forms API.

Tag the container you want the form to end up in with class mktoFormWrapper:

<div class="mktoFormWrapper">
<!-- Form's going to end up in here -->
</div>

Hide the form by default:

.mktoForm {
  opacity: 0;
}
.mktoForm[data-ready-state="move-complete"] {
  opacity: 1;
}

And move it into place when it's ready:

<script>
MktoForms2.whenReady(function(form){
 var formEl = form.getFormElem()[0],
       hostEl = document.querySelector('.mktoFormWrapper');
       
   hostEl.appendChild(formEl);
   formEl.setAttribute('data-ready-state','move-complete');
});
</script>

Presto!