Re: 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

Dave_Roberts

Technically, it is possible to change the position of the labels from the LP Editor level but this is not an "out of the box" feature with Marketo. You can toggle the label position from the Form Editor under the Settings menu. It looks like you currently have your labels set to "Left" - the other choice is "Above". As others have mentioned, it's the CSS that's causing an issue here, not the position setting for your labels, but there is one in the Form Editor for future reference.

It also looks like you're using the "checkboxes" field types for your checkboxes. Those have a "label" (which in this case displays to the left of the input, and alternately to above the input based on the form settings) and a "display value" (which can be found under the "Values" link in the form editor when the field is selected). Using the Display Value will add a label to the right of the input rather than above or to the left. I realize this isn't consistent with your design, but might be helpful to understand for another situation and/or if you wanted to take a more modern approach and display your field labels above the inputs and still have the checkbox labels flow out from the right of the checkboxes.

While poking around on the page, I noticed that there's some HTML and JS you've added into the Custom CSS input on the form itself - see the screenshot from the inspector tool below. Please notice that this HTML and JS isn't going to work when placed into a <style> tag, so maybe you were looking to try and accomplish something different there too?

The solution that @Disha_Goyal6 proposed should work b/c it uses the display: flex property to align the child elements of the field wrapper (.mktoFieldWrap) into a "row" rather than in a column. If you'd like to use the Label input rather than the Display Value so that your labels show up to the left of your inputs on the form, this is a good way to change the orientation of the child elements to display left-to-right rather than top-to-bottom.

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