Can you have an unstyled 2.0 Form | Community
Skip to main content
A
Anonymous
July 14, 2014
Question

Can you have an unstyled 2.0 Form

  • July 14, 2014
  • 4 replies
  • 1404 views
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?
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

4 replies

A
Anonymous
July 14, 2014
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
A
Anonymous
July 14, 2014
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.
A
Anonymous
July 14, 2014
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.
A
Anonymous
July 14, 2014
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");
});
Terms & ConditionsAccessibility statement

Loading footer...