4 Replies Latest reply on Jul 14, 2014 1:03 PM by cc145d356b19a42a34838860d3010f663caa164b

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