Multiple Forms Checkbox CSS Issue

[Anonymous]

I have multiple Marketo forms on this page. Only problem is the CSS I have used to style checkboxes isnt working and when you use the checkbox of the 2nd or 3rd form on the page it checks the 1st form instead. When I remove the CS it works fine.

Here is the page with forms:

https://www.busyatwork.com.au/marketo-forms/aged-care/

And below is my CSS.  I have tried to use the > child combinator but this doesn't work.

.mktoCheckboxList > input + label:before {

    content: '';

    background: #fff;

    // border: 2px solid #ddd;

    display: inline-block;

    vertical-align: middle;

      height: 22px;

    height: 22px;

    padding: 2px;

    margin-right: 10px;

    text-align: center;

}

.mktoCheckboxList > input:checked + label:before {

    content: "\f00c";

    font-family: 'FontAwesome';

    background: #015daa;

     color: #fff;

    border-color: #015daa;

}

Help appreciated.

[SanfordWhiteman]

You have the whole mktoFormChain code and config running twice (2 different config blocks)  The code must only run once in the page.

[Anonymous]

Thanks for pointing that out. I have fixed this but  console now gives me this error:

Uncaught TypeError: Cannot set property 'id' of undefined

and one of the forms which is content managed  (higher up in the HTML) doesn't display and I am no  longer able to add a class of full width on the event below:

  MktoForms2.whenRendered(function (form) {

     jQuery('.mktoFormRow').has('textarea').addClass('full-width');

     jQuery('.mktoFormRow').has('.mktoCheckboxList').addClass('full-width');

https://www.busyatwork.com.au/marketo-forms/aged-care/

Thx

[SanfordWhiteman]

Why are you adding whenRendered events within the existing listener? They should be in their own listener. Also there's no reason for this code to run for every form on every render.  It should run for the .mktoFormRow elements inside the currently rendering form only.

[Anonymous]

Ok I have removed that. I am not that great with JS but that was the only way I could work out how to add a class to a row with a text area or checkbox field.

Even though I have removed that code the top form doesn't render unfortunately.

[SanfordWhiteman]

Ok I have removed that. I am not that great with JS but that was the only way I could work out how to add a class to a row with a text area or checkbox field.

The means of adding the class itself is fine.  When you use the document-level selector ".mktoFormRow" you're selecting all the matching elements in the entire document. Which means the code is running over every .mktoFormRow in the entire document -- both inside and outside the current form -- whenever any form is rendered. You need to anchor all your selectors at the current element, using either the form.getFormElem() jQ wrapper or form.getFormElem()[0] actual element (the latter is preferred).

[SanfordWhiteman]

Even though I have removed that code the top form doesn't render unfortunately.

You still have your code inserted inside the listener... see how it says "/* ---- NO NEED TO TOUCH ANYTHING BELOW THIS LINE! ---- */"? 

[Anonymous]

Thx for the tips..Yes its been removed again.. the main issue is the form higher in DOM not being displayed.  The only difference between the form  that doesnt display and and ones below is the location in DOM

[SanfordWhiteman]

If you look in the F12 Console you'll see there is an error because you have form IDs 1042, 1032, and 1034 in your config, but 1032 is not in the page.

[Anonymous]

Thank you Sam you really saved the day   

Ws meant to go live today with these forms. I am not sure how to add those classes by anchoring an event to that selector but will look into that.