Forms: Change field label alignment for some fields, not all | Community
Skip to main content
New Participant
April 20, 2018
Solved

Forms: Change field label alignment for some fields, not all

  • April 20, 2018
  • 1 reply
  • 3109 views

Hi,

I realize this is more of a coding question, but I'm having some issues finding answers in other outlets since the Marketo forms are a bit different. So we have a form that has all the labels above the fields. We want to add two check boxes (two different questions/fields) below the form (agree to TOS, etc). I was able to add the fields as a checkbox, have no label, and just add a text field to the right of the form. So it looks almost correct. But since it's coded to have all labels above the field, the blank label still shows the asterisk for it being a required field. So it looks a little odd. Is there anyway to override the Marketo setting of having the labels above the fields on the setting page just for these two fields? This is a form that is embedded on a non-Marketo page.  Any help would be appreciated - thank you!

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

Not exactly sure what you're going for, but if you want to un-clear the checkboxes (so they float left with the asterisk):

.mktoForm.mktoLayoutAbove .mktoLabel[for="accessWESEAuthorization"] ~ .mktoCheckboxList,

.mktoForm.mktoLayoutAbove .mktoLabel[for="accessWESTermsofCondition"] ~ .mktoCheckboxList {

  clear: none;

}

1 reply

SanfordWhiteman
New Participant
April 20, 2018

Link, please.

SanfordWhiteman
SanfordWhitemanAccepted solution
New Participant
April 20, 2018

Not exactly sure what you're going for, but if you want to un-clear the checkboxes (so they float left with the asterisk):

.mktoForm.mktoLayoutAbove .mktoLabel[for="accessWESEAuthorization"] ~ .mktoCheckboxList,

.mktoForm.mktoLayoutAbove .mktoLabel[for="accessWESTermsofCondition"] ~ .mktoCheckboxList {

  clear: none;

}

New Participant
April 20, 2018

Thanks! Yes, that's what I am trying to achieve. The code provided (clear: none;) though didn't change anything though. But when I added display: inline, it worked. However, you'll see that now there is just some spacing issues. I can probably fix this from here now. I just needed a way to identify those how to edit those two items. So I think I am good - thank you!