Can you have an unstyled 2.0 Form

Anonymous
Not applicable

Can you have an unstyled 2.0 Form

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?
Tags (1)
4 REPLIES 4
Anonymous
Not applicable

Re: Can you have an unstyled 2.0 Form

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
Not applicable

Re: Can you have an unstyled 2.0 Form

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
Not applicable

Re: Can you have an unstyled 2.0 Form

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
Not applicable

Re: Can you have an unstyled 2.0 Form

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");
});