Forms 2.0 Embed & Inline Styles?

[Anonymous]

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
 

[Anonymous]

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

[Anonymous]

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

[Anonymous]

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"?

[Anonymous]

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?

[Anonymous]

@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.

[Anonymous]

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.

[Anonymous]

I finally put mine up on GitHub. https://github.com/cfrydlewicz/marketo-forms-style

[Anonymous]

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;

        });

[Anonymous]

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!