Marketo form checkbox styling issue

Yavor_Todorov · ‎08-12-2022

Hello,

on this page https://info.softwareag.com/test-form-checkboxes.html, on the right side with the form, I have checkboxes(Question_1), where the actual square is aligned to its label on the same line.

But if I use a single checkbox(I opt in), the square moves to the next line. I want to move it just before "I opt in" text on the same line, like it's visualised for Question_1.

Looks like an easy CSS fix, but I cannot figure it out.

Thanks a lot,

Yavor

SanfordWhiteman · ‎09-20-2022

The sample seems to work, but not in all cases.

Works in all cases that you originally described, since you didn't mention VRs. 🙂

If you have VRs you need to use a different event and also add a guard:

MktoForms2.whenRendered(function(mktoForm){
   /* the Checkbox field/s you want to alter */
   const singleCheckboxAsMultiple = ["question2"];

   /* no need to touch below this line */
   let formEl = mktoForm.getFormElem()[0];   
   singleCheckboxAsMultiple.forEach(function(fieldName){
      let checkbox = formEl.querySelector("input[name='" + fieldName + "']"),
          primaryLabel = formEl.querySelector("label[for='" + checkbox.id + "'].mktoLabel"),
          secondaryLabel = formEl.querySelector("label[for='" + checkbox.id + "']:not(.mktoLabel)");

      if(primaryLabel.getAttribute("data-content-migration-state") !== "done"){
        secondaryLabel.innerHTML = primaryLabel.innerHTML;
        primaryLabel.innerHTML = "";
        primaryLabel.setAttribute("data-content-migration-state", "done");
      }
   });
});

View solution in original post