SOLVED

Switch form label and checkbox position

Go to solution
Benjamin_Ortiz1
Level 4

Switch form label and checkbox position

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?

Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Valerie_Armstro
Level 10 - Champion Alumni

Re: Switch form label and checkbox position

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. 

View solution in original post

10 REPLIES 10
Valerie_Armstro
Level 10 - Champion Alumni

Re: Switch form label and checkbox position

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
Level 4

Re: Switch form label and checkbox position

Wonderful 
Dory_Viscoglio
Level 10

Re: Switch form label and checkbox position

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
Level 10 - Community Advisor

Re: Switch form label and checkbox position

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
Level 5

Re: Switch form label and checkbox position

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!
ooooh shiny.
Dory_Viscoglio
Level 10

Re: Switch form label and checkbox position

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

Re: Switch form label and checkbox position

where do i access the template html?
ooooh shiny.
Anonymous
Not applicable

Re: Switch form label and checkbox position

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
Not applicable

Re: Switch form label and checkbox position

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.