Can you have an unstyled 2.0 Form

[Anonymous]

I'm using the Marketo API to inject a form onto our web site, but it brings with it a ton of unwanted css and markup which makes the form's design diverge from our look and feel. Is there a way to load a vanilla form without all of that? Just a basic label/input structure without a buch of aweful inline styles and spacing divs?

[Anonymous]

Not really, no. You could build your own form and hook it up using the Marketo API. I hacked and whacked at Forms 2.0 to make it play nice with Bootstrap for 6 hours and it's still not perfect: http://go.servicetrade.com/Free-Trial-Request_LP-Forms-20.html

[Anonymous]

Hey Jason,
Just to clarify, you're still ajax loading in a Marketo form, right? You didn't write your own HTML on your site and just wire up the backend somehow?

I've resorted to loading the form and then stripping out all the linked CSS, inline styles, and extra markup with JS before I display it.

[Anonymous]

This is a Marketo landing page...I added the Form 2.0 code, set a 800ms delay, and then apply my styles by adding Boostrap classes, removing inline styles, etc. Not sure how to do it on an embedded page yet, haven't had that use case come into play yet.

[Anonymous]

For what it's worth, Here's my code sample...

var newsletterForm = document.getElementById("--placeholderID--");

function removeStyles(el) {

el.removeAttribute('style');

if(el.childNodes.length > 0) {

for(var child in el.childNodes) {

/* filter element nodes only */

if(el.childNodes[child].nodeType == 1)

removeStyles(el.childNodes[child]);

}

}

}

function removeElem(selector, scope){

scope = scope || document;

var nodeList = scope.querySelectorAll(selector),

nodeLength = nodeList.length;

while (nodeLength > 0){

nodeList[nodeLength-1].parentNode.removeChild(nodeList[nodeLength-1]);

nodeLength--;

}

}

function removeClass(el, theClass){

if (el.classList){

el.classList.remove(theClass);

} else {

el.className = el.className.replace(new RegExp('(^|\\b)' + theClass.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');

}

}

function addClass(el, theClass){

if (el.classList){

el.classList.add(theClass);

} else {

el.className += ' ' + theClass;

}

}

MktoForms2.loadForm("//app-sj01.marketo.com", "###-XXX-###", ####, function(frm){

// Strip styles

removeElem("style", newsletterForm);

removeElem("#mktoForms2BaseStyle");

removeElem("#mktoForms2ThemeStyle");

removeStyles(newsletterForm);

// Strip extra elements

removeElem(".mktoAsterix");

removeElem(".mktoOffset");

removeElem(".mktoGutter");

removeElem(".mktoClear");

// Set class

removeClass(newsletterForm, "pre-render");

addClass(newsletterForm, "rendered");

});