Center Checkbox on Form

[Anonymous]

Hi,

We are creating a form with the label positions on the left and the field on the right. For the checkboxes, we want to override this styling and have the field (checkbox) below the label and centered for our desktop and mobile verison. Our checkbox currently is left aligned. Does anyone have a solution for this?

[Grégoire_Miche2]

HI Amanda,

This can be done using CSS styling either on the form, or in the LP template.

-Greg

[Anonymous]

Hi,

Yes, I know this. I'm not sure of the CSS code though. Can you provide this code?

[Grégoire_Miche2 · Accepted solution]

Hi Amanda,

I gave it a look and in fact, I understand where your problem comes from : there is no class, hook nor id that enables to format the label for checkboxes separately form the other labels in the form.

It will likely require some JS scripting to dynamically add a class or id to this "mktoFormCol" element so that you can apply some specific CSS to the label and the checkbox.

I am not that good at scripting

Sanford Whiteman​ may know better

-Greg

[SanfordWhiteman]

Post the URL and I'll post the JS/CSS code you need.

I typically add a data- attribute to each .mktoFormRows element so you can seek based on the field(s) inside.

[Anonymous]

Hi Sanford,

I'm going to send you the link via message, but it says you need to be following me or we need to be friends. Can you please follow me and I'll send over the link?

Thanks,

Amanda

[SanfordWhiteman]

Followed!

[SanfordWhiteman]

Try this:

.mktoForm .mktoCheckboxList {

     float: none;

     clear: both;

     position: relative;

     top: 5px;

     left: 50%;

     margin-left: -1.5em;

}

[Anonymous]

Hi Sanford Whiteman, being a coding pro, could you help me make the label text on the checkbox field, align with the actual checkbox itself please? I've tried a few things but can't seem to get it to align. Any tips would be really appreciated! Landing page here: Argus Media  

Thanks

[SanfordWhiteman]

Can you reset to the default CSS, start a new Community thread, and show me exactly what you mean by "align" (mark up a screenshot)?