Field label position settings on forms 2.0 | Community
Skip to main content
Alexis_D_Alba1
Alexis_D_Alba1
Level 5
April 16, 2015
Question

Field label position settings on forms 2.0

  • April 16, 2015
  • 14 replies
  • 4413 views
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?

14 replies

SanfordWhiteman
SanfordWhiteman
Level 10
April 16, 2015
Sure, (almost) anything's possible using CSS. Post a link to your form.
Ravi_Ansal2
Ravi_Ansal2
Level 5
June 3, 2015

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
Alexis_D_Alba1Author
Level 5
June 3, 2015

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

A
Anonymous
June 3, 2015

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

A
Anonymous
June 12, 2015

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):

SanfordWhiteman
SanfordWhiteman
Level 10
June 12, 2015

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

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

Alexis_D_Alba1
Alexis_D_Alba1Author
Level 5
June 12, 2015

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.

A
Anonymous
August 6, 2015

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

Terms & ConditionsAccessibility statement

Loading footer...