Skip to main content
A
Anonymous
March 19, 2014
Question

Forms 2.0 Embed & Inline Styles?

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

9 replies

A
Anonymous
March 20, 2014
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
A
Anonymous
March 20, 2014
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
    A
    Anonymous
    October 10, 2014
    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"?
      A
      Anonymous
      December 19, 2014
      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?
        A
        Anonymous
        December 19, 2014
        @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.
        A
        Anonymous
        December 19, 2014
        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.
        A
        Anonymous
        December 31, 2014
        I finally put mine up on GitHub. https://github.com/cfrydlewicz/marketo-forms-style
        A
        Anonymous
        July 13, 2015

        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;

                });

        A
        Anonymous
        January 2, 2015
        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!
        Scott_McKeighe2
        Scott_McKeighe2
        Level 4
        February 25, 2016

        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.

        Terms & ConditionsAccessibility statement

        Loading footer...