Switch form label and checkbox position | Community
Skip to main content
Benjamin_Ortiz1
Benjamin_Ortiz1
Level 4
September 17, 2014
Solved

Switch form label and checkbox position

  • September 17, 2014
  • 7 replies
  • 11866 views
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?

Best answer by Valerie_Armstro
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. 

7 replies

Valerie_Armstro
Valerie_ArmstroAccepted solution
Level 9
September 17, 2014
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
    Benjamin_Ortiz1Author
    Level 4
    September 17, 2014
    Wonderful 
    Dory_Viscoglio
    Dory_Viscoglio
    Level 10
    September 17, 2014
    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;
    }
    J
    Community Advisor
    JDNelson1Community Advisor
    Community Advisor
    January 27, 2016

    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
      Colby_Dix
      Level 4
      October 20, 2014
      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
      Dory_Viscoglio
      Level 10
      October 20, 2014
      Colby, have you tried the HTML update I posted above? It works great on our forms. 
      Colby_Dix
      Colby_Dix
      Level 4
      October 20, 2014
      where do i access the template html?
      ooooh shiny.
      A
      Anonymous
      December 3, 2014
      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.
       
        A
        Anonymous
        January 4, 2017

        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.

        Terms & ConditionsAccessibility statement

        Loading footer...