Field label position settings on forms 2.0

[Alexis_D_Alba1]

Is there a way to change the field label position for each field individually? I know that I can change all the fields on a form to either above or left in the form settings, however, I would like to postion one label to the left while keeping the rest of the labels above.

Does anyone know if this is possible?

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

[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]

Hi, I have the same question...I do not know CSS so will Ravi's solution work better? @ Ravi, I am not sure what you mean by use Rich Text and delete the label text. Here is what I am trying to create (email preference center):

[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

[SanfordWhiteman]

Also, based on your other question, you are asking about restyling the form. So you can't avoid CSS -- that's how it's done.

[Anonymous]

Thank you! So I need to copy your MktoForms2 :: Mixed Alignment - JSFiddle​ and put it in the HTML?

[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

[SanfordWhiteman]

You don't need to know CSS, really, just copy the example.

I find my method easier to maintain. But I'm prejudiced.

[Ravi_Ansal2]

Hi Alexis D'Alba​,

I was facing the same problem, so here is what I have done:

I used the form alignment as  left and for the Label that needed to be on top I used Rich text and removed the label text from the original label Text.

let me know if you want any help to align your form.

[Alexis_D_Alba1]

Thank you so much! I will try this next time I set up a form. Sounds like a great solution.

[SanfordWhiteman]

While concepts like Ravi's will work I find them cumbersome to maintain, especially with the absolute positioning and the need to create extra RT fields.

You can do this with simple CSS: MktoForms2 :: Mixed Alignment - JSFiddle

In this example, the form as a whole is set to "Layout Above" but two fields are overridden so that are "Layout Left".  Should be easy to understand.

[Anonymous]

Alexis D'Alba​ If the solution works, can you click on "Correct Answer" for the post.

[SanfordWhiteman]

Sure, (almost) anything's possible using CSS. Post a link to your form.