Marketo Form alignment not consistent between form and LP for checkboxes

[aayushp20]

Hi,

I currently have a form made and aligned like this: 

However, when i insert the form into my landing page, the formatting gets messed up, and everything seems to be stacked: 

Does anybody know why the alignment is changed in the landing page? Here is a preview URL for my landing page if there's something within the inspect elements that I am missing: 925-OPE-062.mktoweb.com/lpeditor/devicePreview?p=1173&t=sVt4qRXPhq5SK2tvX6dQdg,,&m=925-OPE-062

[SanfordWhiteman]

The preview link you posted has expired. Please publish a real LP we can access.

[aayushp20]

Apologies. Does this link work correctly? I just went to my LP and clicked "Generate Preview URL": 925-OPE-062.mktoweb.com/lpeditor/devicePreview?p=1173&t=JcrYy5T2pqMmMRoGDkysSQ,,&m=925-OPE-062 

edit: this might be what you meant actually: http://925-OPE-062.mktoweb.com/lp/925-OPE-062/AD-OPS-2022-10-10-Preference-Center-Management-1133_Pr...

[SanfordWhiteman]

You have an inline <style> on that LP with many overrides for .mktoForm elements. A form will never look the same way it does in Form Editor if you have additional CSS.

(You absolutely should use external CSS for manageability, by the way. Binding styles to the form itself is a recipe for disaster. But your design needs to be done holistically at the LP level.)

Two of the rules affecting the checkbox layout are here:

  .mktoForm .mktoLabel,
  .mktoForm .mktoTextField,
  .mktoForm .mktoEmailField,
  .mktoForm .mktoTelField,
  .mktoForm .mktoCheckboxList {
    width: 100% !important;
  }

  /* Ensure checkbox container doesn't interfere */
  .mktoForm .mktoCheckboxList {
      display: block !important;
      width: 100% !important;
  }

But those rules intersect with others, there’s not just one offending rule.

[aayushp20]

I see, didn't realize I had two of the same. Still seems though after removing one or the other, the lack of alignment still persists. Do you think I should just remove every instance of .mktoForm from the CSS of my LP template? Here's the updated link when I do that: http://925-ope-062.mktoweb.com/lp/925-OPE-062/AD-OPS-2022-10-10-Preference-Center-Management-1133_Pr... 

The button know looks how it does on the independent form version, which is good, but everything else still seems to look the same as before

[SanfordWhiteman]

---

Do you think I should just remove every instance of .mktoForm from the CSS of my LP template?

---

If you don’t know what styles are doing, they should be removed or disabled. Then build your design back up, so there’s nothing that’ll be confusing later.

[Disha_Goyal6]

Hi @aayushp20, after adding this CSS, I achieved the style that you showed in the post.

.mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date], .mktoForm select.mktoField, .mktoForm textarea.mktoField{
width: 100% !important;
}
.mktoFieldWrap {
display: flex;
}
.mktoForm .mktoGutter{display:block !important;}
.mktoFormCol {
width: 100% !important;
}
.mktoHtmlText.mktoHasWidth {
width: 100% !important;
}

Please check.

Thanks,

Disha