Align Checkbox to the left in Forms 2.0

Colby_Dix
Level 5

Align Checkbox to the left in Forms 2.0

This has come up rather recently here:
https://community.marketo.com/marketodiscussiondetail?id=90650000000PwFKAA0

And it's marked solved, but I say that it's not solved. 🙂

The thread above provides a workaround, but not one that is aesthetically acceptable in my opinion. Even when setting the label width to zero, it doesn't place the checkbox at the same margin as the previous field text and the rich text inserted after it has a different top margin, that places it 'above' the checkbox and looks sloppy. If anyone has a more elegant and clean solution I'd rather like to hear about it. Thanks!

Colby
ooooh shiny.
Tags (1)
7 REPLIES 7
Colby_Dix
Level 5

Re: Align Checkbox to the left in Forms 2.0

One possible, yet still inelegant fix to at least a part of the issue is to put the text in your rich text box into a table. just a 1 col 1 row table ends up padding it just enough to look a bit better, but that's a pretty wonky fix as well and still doesn't solve the left side edge looking shabby.
ooooh shiny.
Dory_Viscoglio
Level 10

Re: Align Checkbox to the left in Forms 2.0

label[for=YOUR FIELD NAME] { 
float:right!important;
margin-left: 10px!important;
width:316px!important;
}

You can add this to your template HTML, which can be found under Design Studio > Landing Pages > Templates > Your Specific Landing Page Template 
Colby_Dix
Level 5

Re: Align Checkbox to the left in Forms 2.0

I'm not following this completely. In terms of 'Your Field Name' can I assume that you are referring to the field with the checkbox? (in my case the checkbox is for a mailing list and the field is aptly titled 'Mailing List') and then do I go ahead and use the 'Label' in Forms 2.0 as usual and hope it floats said info to the right?

So with that logic, i can just paste that code into my landing page template where exactly? I popped it into the <style> section with no luck and I'm just not seeing how this is to work. 
 

label[for=Mailing List] { 
float:right!important;
margin-left: 10px!important;
width:316px!important;
}
ooooh shiny.
Grégoire_Miche2
Level 10

Re: Align Checkbox to the left in Forms 2.0

For anyone searching the community, there is a very simple fix.

Instead of using a "checkbox", you can use a "checkboxes" type of form field. You clean the label and set the label width to 0, then you set only 1 value for the field (unlike Checkbox, Checkboxes enables the user to set values for the field, as radio buttons and picklists).

If the underlying field is a boolean, just make sure you are setting the stored value to 1 or Yes

-Greg

Dan_Stevens_
Level 10 - Champion Alumni

Re: Align Checkbox to the left in Forms 2.0

Great tip and thanks for sharing, Greg.  We've been using this approach since the deployment of Forms 2.0.  However, we use "TRUE" as the stored value and that works as well.

Grant_Booth
Level 10

Re: Align Checkbox to the left in Forms 2.0

We've been scoping the work to replace our drupal forms with Forms 2.0 and this workaround helped!

Grégoire_Miche2
Level 10

Re: Align Checkbox to the left in Forms 2.0

You are welcome

-Greg