10 Replies Latest reply on Feb 25, 2016 1:53 PM by Scott McKeighen

    Forms 2.0 Embed & Inline Styles?

      Hello all! I am creating a form using Forms 2.0. All is going well, but when I embed my form using the JavaScript snippets, it puts odd inline styles into some of the elements that I can't seem to override with my own CSS. Is there any way to remove inline style attributes?

      Take this one from the submit button:

      <span class="mktoButtonWrap mktoPaperMashup" style="margin-left: 120px;">
           
           The 120px left margin is no where in my settings or css, yet there it is in the code.
           
           Most likely I am just missing a setting or a way to override these inline styles, but it sure is vexing me.
           
           Thanks for any help!
           
           Doug

            
        • Re: Forms 2.0 Embed & Inline Styles?
          Hi Doug,

          It's painful, I know. There isn't a way to remove that in the form editor.

          Here are two ways to work around it:

          - Overwrite the CSS with "!important" - in the custom CSS for the form
                .mktoButtonWrap { margin-left: auto !important; }

          - Use JavaScript to remove the "style" attribute. It's easy to do, but not best-practice.
                <script>document.getElementsByTagName("button")[0].parentNode.removeAttribute("style");</script>

          Best of luck,
          Brody
          • Re: Forms 2.0 Embed & Inline Styles?
            Brody,
            Thank you for the reply!! I tried the !important flag on the CSS, but since the style is inline, it doesn't seem to override it. BUT... I will take your advise and use JavaScript/JQuery to remove the style attribute. Excellent idea. I was too focused on just CSS and not using JS. You rock!

            Bottom line is that there should be NO inline style attributes in these forms so that designers can do what they need to do with CSS only and not resort to hacks.

            Thanks!
            Doug
            • Re: Forms 2.0 Embed & Inline Styles?
              Richard Morrison
              Couldn't agree more.  Come on Marketo, provide a forms 2.0 "theme" that's actually clean so that those of us who care about consistency and standards can have a clean shot at styling things our own way.

              The "plain" theme injects two stylesheets (about 10K of CSS) as well as inline styles in the HTML.  I have to write javascript to clean up after you?  How is that "plain"?
              • Re: Forms 2.0 Embed & Inline Styles?
                I've been using the "Plain" style (which must have been some sick joke in the naming process for this exact reason) on all our forms and then I've built a massive resetmarketo.css file to deal with this.

                Brody is correct. !important will override inline styles as long as your selectors in the CSS are equally or more descript than Marketo's.

                In other words, if you want to remove the margins from .mktoFormRow you should look at the Inspector in your browser to find what Marketo's stylesheet used as a selector for it. Then copy their selectors for your own. If that doesn't work, try adding another detail to your selector like adding 'div' in front of the mktoFormRow class or something.

                It's always fun to fight against things that are supposed to be tools that make our jobs easier, eh?
                • Re: Forms 2.0 Embed & Inline Styles?
                  Richard Morrison
                  @CorryF great comment above. I couldn't agree more.  If you were able to open source/github your resetmarketo.css, I for one would be very grateful and will try to contribute to it.
                  • Re: Forms 2.0 Embed & Inline Styles?
                    Sadly, my reset file would be just as opinionated as Marketo's. I don't know of any way to reset everything to be a clean slate that would be useful for everyone. There are too many deep selectors and !importants to deal with. I'd just be adding complexity to the mix on top of what we already have to deal with.
                    • Re: Forms 2.0 Embed & Inline Styles?
                      I finally put mine up on GitHub. https://github.com/cfrydlewicz/marketo-forms-style
                        • Re: Forms 2.0 Embed & Inline Styles?

                          Hey Corry, thanks for sharing this!

                           

                          Another way you can change how Marketo styles things (more of a hack) is to add a callback to:

                           

                          MktoForms2.loadForm("//app-abd.marketo.com", "XXX-XXX-XXX", XXXX , function(form) {

                                    var mktoForm = jQuery('#mktoForm_XXXX').find('*').andSelf();

                                 

                                    // Strips all inline styling

                                    mktoForm.attr('style', '');

                           

                                    // Fights marketo's attempts to add some back. (I really don't like that I've got to do this)

                                    jQuery( window ).resize(function() {

                                      mktoForm.attr('style', '');

                                    });

                           

                                    // Disables mkto stylesheets

                                    jQuery('link[id=mktoForms2BaseStyle]')[0].disabled=true;

                                    jQuery('link[id=mktoForms2ThemeStyle]')[0].disabled=true;

                                  });

                        • Re: Forms 2.0 Embed & Inline Styles?
                          Richard Morrison
                          Thanks for sharing, Corry.  It's really good of you.  I plan on trying out your styles when I next build an embedded form - and will send pull requests if I have any suggestions that might be generally useful.

                          I hope others might do the same.

                          Marketo community is one of its best "features" (that's community with a lower case c, not the software that runs it - which is a whole other issue)

                          Happy New Year!
                          • Re: Forms 2.0 Embed & Inline Styles?
                            Scott McKeighen

                            I can verify that as of today (Feb 25, 2016), this problem is still happening. A <span> element with a 120px left shim is still pushed in, and needs to be dealt with if you're doing any custom styling. To Corry's point about specificity in CSS selectors, getting down to the specific <span> is probably your best bet in solving this quickly.

                             

                            In our case, it's declared this way in our form's custom CSS:

                             

                            .mktoButtonRow span[class="mktoButtonWrap mktoSimple"] {

                            margin:auto!important;

                            }

                             

                            The end result is that the margin-left attribute that's hard-coded gets ignored. At least from there you can increase the predictability in how things will style. And obviously, your margins may vary depending on your need.