Re: Field label position settings on forms 2.0

Level 10 - Community Moderator

Re: Field label position settings on forms 2.0

You'd put the contents of the "CSS" pane from MktoForms2 :: Mixed Alignment - JSFiddle in your CSS, yes. Obviously here it is targeting the fields "Industry" and "PostalCode" -- your fields will vary:


INPUT#PostalCode {

    clear: none;


Your CSS can be anywhere you want: in the form's Custom CSS, in a STYLE tag in the page, in an external CSS file... anywhere.

Level 1

Re: Field label position settings on forms 2.0

Sandy, any chance you can help troubleshoot the code on this page? I tried working in the CSS in in your example, but something is getting in its way. I want that last checkbox "isNotPatient" to have the right aligned label.





Level 6

Re: Field label position settings on forms 2.0

Hi Mandy Hanson​,

I will set it up your form in this way if you want you as this required some manual work, just email me @

And thanks Alexis D'Alba​ and i have tried MktoForms2 :: Mixed Alignment - JSFiddle,

And it worked with some short comings.

Thank You Sanford Whiteman

Level 5

Re: Field label position settings on forms 2.0

I don't know CSS that well either and did try Ravi Ansal​ method and it worked. I'm also going to try   MktoForms2 :: Mixed Alignment - JSFiddle,

because I would like to implement something that is easier to maintain.

Not applicable

Re: Field label position settings on forms 2.0

I promised Mandy I would add my own styling to share with you all. I hope someone finds it useful. Note: You may not see much of a change until after approving the form and landing page if you are hosting the images in Marketo. I create a test form and landing page to make tweaks to. I have included my sprite sheet if you want to make your own.


In the custom CSS drop down on the Form 2.0 builder I pasted:

/* this worked pretty well except for the multi option checkboxes.*/

.mktoForm input[type=checkbox],.mktoForm textarea.mktoField {

    position:absolute; left:-999em;

    border:#1c75bc 3px solid;


/* moving original checkboxes out of the way */

.mktoForm input[type=checkbox] {

    position:absolute; left:-999em;

    border:#1c75bc 3px solid;


/* using a sprite sheet to show stats of checked, unchecked, etc. */

.mktoForm input[type=checkbox] + label, .mktoForm textarea.mktoField + label {




    margin:-1px 4px 0 0;


  background: url("YOURMKTOPATH/check_radio_sheet_lc_01-01.png") left top no-repeat;



.mktoForm input[type=checkbox]:checked + label, .mktoForm textarea.mktoField + label {

    background: url("YOURMKTOPATH/check_radio_sheet_lc_01-01.png") -19px top no-repeat;


.mktoForm input[type=checkbox]:hover + label, .mktoForm input[type=checkbox]:focus + label{

     background: url("YOURMKTOPATH/check_radio_sheet_lc_01-01.png") -19px top no-repeat;}

/* end*/