Field label position settings on forms 2.0

[SanfordWhiteman]

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#Industry,

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.

[ASchatzberg]

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.

https://go.valant.io/Mixedalignmentformtest.html

Thanks!!!

-Andrew

[Ravi_Ansal2]

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 @ raviansal@live.com.

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

And it worked with some short comings.

Thank You Sanford Whiteman

[Alexis_D_Alba1]

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.

[Anonymous]

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 {

    display:inline-block;

    width:19px;

    height:19px;

    margin:-1px 4px 0 0;

    vertical-align:middle;

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

    cursor:pointer;

}

.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*/