Skip to main content
A
Anonymous
September 14, 2018
Question

Multiple Forms Checkbox CSS Issue

  • September 14, 2018
  • 1 reply
  • 4490 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

SanfordWhiteman
SanfordWhiteman
Level 10
September 14, 2018

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

A
Anonymous
September 14, 2018

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
SanfordWhiteman
Level 10
September 14, 2018

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.

Terms & ConditionsAccessibility statement

Loading footer...