Remove tha auto-generated forms2.css

[Anonymous]

We have heavily customized Forms 2.0 using Javascript (jQuery) to restructure the DOM to match our needs (in our case, formatting it to match the Bootstrap structure/markup).

[Rasmus_Bidstru1]

Then you need a lot of div:nth-child(n) with you styling, that's the only ways to target a specific div row in the form.

[Anonymous]

Thank You Rasmus,

That is what I wanted to know. It was starting to become clear to me that the only way I was going to achieve my objective was to use a lot of div.nth-child(n).

[Rasmus_Bidstru1]

Just remember if you insert or remove a question, your order will mess up 🙂

[SanfordWhiteman]

You don't need to use nth-child().  If you check a lot of my forms recipes, I use a standard function to tag the parent elements with the names of the fields they contain.  Then I style like [data-wrapper-for="LastName"] etc.

[Anonymous]

Hi Sanford,

Are the form templates the forms you are referring to? Where would I find access to your forms recipes? Thank you for your help.

[Anonymous]

Thank you all for your help.

In exploring the various methods discussed here I came up with a solution that is rather simple and unobtrusive and only @media query dependent. Since we are still only referring to labels, I used the  media query already present in forms2.css ( @media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-height: 480px) {} ) to trigger my following classes (hidden_1, hidden_2) to either (display: none;) or (display: inline;) depending on the view port.

Thanks you all for the numerous replies.

Team effort.

[Anonymous]

Just add to footer next code

<div id="mktoForms2ThemeStyle" style="display:none"></div>

<div id="mktoForms2BaseStyle" style="display:none"></div>

This code will disable to load generated form2.css

[Conwaydev]

This is still an actual issue that would be awesome to include the possibility to opt out. Yes we can use client-side JS to remove these CSS files, but its still two requests for users (no matter how small) that are unnecessarily when removing. Would love to see an option in the loadForm method that had something like window.MktoForms2.loadForm(accountUrl, accountId, formId, callback, { ...options like disableStylesheets: true }) with a bit more configuration. Its a low level performance win.