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