Switch form label and checkbox position

[Benjamin_Ortiz1]

I want to add a checkbox field to a form, however I want to have the checkbox aligned left with the field label to the right, like this - http://screencast.com/t/x7pXyE9qK

Is this possible with Forms2.0?

[Valerie_Armstro · Accepted solution]

Hi Ben,

What I have to done to achieve this: 

- Insert the checkbox field into the form
- Delete the text in the field label
- Set the label width to zero, set field width to 10
- Add rich text to the form (enter in the rich text editor what you want to appear to the right of the checkbox)
- Move the rich text block to the right of the field. 

[Benjamin_Ortiz1]

Wonderful 

[Dory_Viscoglio]

I like Val's idea! Another thing that we've done is in our actual template HTML is to update:

label[for=YOUR FIELD NAME] { 

float:right!important;

margin-left: 10px!important;

width:316px!important;

}

[JD_Nelson]

just in case anyone comes across this fix in the future, there are a few missing elements that confused me for a while. Here's the full line of code -- thanks Dory, very helpful!

.mktoForm label[for="YOUR FIELD NAME"] {

    float:right!important;

    margin-left: 10px!important;

    width:316px!important;

    }

I also ran into some issues with the field name because it was a field from Salesforce, synced to Marketo, so I had to use the API name, not the field name listed in the form.  I also added a margin-right field to fine-tune to my specific form, so there may be a bit of tweaking still to do for you.

[Colby_Dix]

This isn't really a very good solution overall. The formatting kind of stinks. Even setting the label width to zero doesn't place the checkbox at the same margin as the previous field text and the rich text is aligned above the checkbox and looks sloppy. If anyone has a more elegant and clean solution I'd rather like to hear aboutit. Thanks though, this is a step in the right direction!

[Dory_Viscoglio]

Colby, have you tried the HTML update I posted above? It works great on our forms. 

[Colby_Dix]

where do i access the template html?

[Anonymous]

I know that its been awhile since the last post on this and I'm not sure if anyone is on anylonger, but there is another way to get them on the right without any coding if needed.   - Using the type of Checkboxes vs. Checkbox the label is defaulted to the right and you don't have to have more than one checkbox to make it work.

How to:
Change the Field Type to Checkboxes
Delete the label & set label width to zero
Then change the display value to what ever you want the label to be.
The display value can be accessed by clicking edit under values.
 

[Anonymous]

Great solutions!

Though in cases where you have links in the label name - ie I agree to the T&C(url), the rich text or setting values for checkboxes doesn't seem to work.