How do I change the position of the check box in forms 2.0

[Anonymous]

In the new forms 2.0, how do I get the check box to be to the left of the label?   When I uncheck the "label to the right" box, the label remains to the left of the box, but the check box is now right justified.   
 

[Rafael_Santoni1]

Sandy,

Can you post a link to a page that has this? I can take a quick look and possibly make some suggestions. I am almost positive that if this is not a feature on the form designer, you will probably have to include some custom CSS on your form if at all possible. It all depends on how the code is being rendered by Marketo.

Rafael

[Anonymous]

It's still a work in progress, but I approved the Landing Page so that you can see it:  http://info.digitalriver.com/DRPreferenceCenter-landingpage.html

I unchecked the "label to right" box for Events so you could see the right justified version. 

I know in the setup that I can put the box below the label, but  I hope I don't need to do custom programming to put the box to the left of the label.  It seems like a likely choice to me. 

thanks for the help.

[Anonymous]

Hi Sandy,

Forms 2.0 has completely changed the way checkboxes are displayed. Your label is "Events" but now you can have multiple checkboxes for the same field. In this case, you have only one value for each checkbox, in this case "Yes."

When you say say "display label to right", that only affects the "Yes" label, not the "Events" label. I came across this same issue recently. My workaround was to make the label "Events" completely empty, and then to change the "Yes" to say "Events." Then you'll be left with a checkbox on the left, "Events" on the right.

You can find the "Yes" value in the "Value" link on the right. Put "Events" as the "Display Value" and "Yes" as the "Marketo Value."

After you do this, the alignment of the checkboxes may be less than ideal. You might need some HTML/CSS help to fix that.

Hope that helps!

[Rafael_Santoni1]

Update: see my last entry

Sandy,

I was able to create a page with the same configuration you have on that checkbox and the only way I was able to do what you want was by adding a CSS override on the page.

Because there is no way to specify the width of the "Yes" label on the UI, I changed its width to 40px like this:

<style>

  .mktoLogicalField.mktoCheckboxList.mktoLabelToLeft.mktoHasWidth { width: 40px !important;}

</style>

I have attached a screenshot of what it looks like once you place the overriding CSS on the page. Look at the Events Yes label and checkbox.

[Rafael_Santoni1]

Sandy,

I actually have a suggestion. Why don't you remove the Yes label and only leave the checkbox there. Since each checkbox would be on the same line as the Descriptive label, it seems to me like it would be obvious to the user that the checkbox is for that line/subscription. Makes sense?

It would look something like this:


Or you could streamline it even further, by changing the wording on the long one like this if it makes sense:

[Rafael_Santoni1]

I just realized that there is indeed a way to do what you want using native Forms 2.0 designer features.

The option is there on the field editor. Do exactly what you did for the Events option and play with different values on the "field width" and it will look exactly how you want it. 

Like this:


I also realized that Marketo is forcing us to put a checkbox label option and I don't see how to not have the "Yes" next to the checkbox without using custom code. So you might just have to leave it.

We can submit an "idea" and see if Marketo includes the ability to make the checkbox label optional.

Let me know how it goes.

Good luck!

Rafael

[Anonymous]

Change Label width to 0, and empty out the Label.

Then edit values and put "Events" as the display value, "Yes" as the store value.

[Rafael_Santoni1]

Hmm. Sounds like a plan. Did you try it?