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

Field label position settings on forms 2.0

  • April 16, 2015
  • 5 replies
  • 4367 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?

5 replies

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

Alexis_D_Alba1
New Participant
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.

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
New Participant
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.

Ravi_Ansal2
New Participant
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
New Participant
June 3, 2015

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

June 3, 2015

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

SanfordWhiteman
New Participant
April 16, 2015
Sure, (almost) anything's possible using CSS. Post a link to your form.