Trouble Formatting Form Checkbox

[Troy_Larson]

Hi there,
We're having an issue around formatting a checkbox field in our forms. The form is set up with the field label position sitting above the actual field.

We have a GDPR checkbox field at the bottom of our form. Ideally instead of stacking the field label and therefore have the checkbox sit underneath the field label, we'd like to have the field label sit on the left-hand side and the checkbox on right.

We're struggling with achieving this. Has anyone else successfully created a form where one field is laid out differently from the rest? If so how did you accomplish this? Any help would be much appreciated.

Thanks.

[SanfordWhiteman]

Not exactly clear what you're trying to do. Can you provide a link to your page and a mockup indicating the intended layout?

[Christiane_Rode]

For the individual field, could you change the Field Type to "Checkboxes" instead of "Checkbox" and then use the "Values" area to store your labels -- not the Label area. 

You'll get an option in the Properties area to have the label appear either to the left or to the right. 

Is this what you're looking to do?

[Katja_Keesom]

@Christiane_Rode that was exactly what I was thinking. That should deliver the desired result.

[Dave_Roberts · Accepted solution]

I also think you'll need to use a "checkboxes" field type (even for one checkbox input) and use the "Display Value" to populate the text to the right of the input (regardless of what you've got the form labels set to). The actual field label (label.mktoLabel) for a checkbox and/or checkboxes field type is what moves above/left of the checkbox, the display text is also a label, but doesn't have the ".mktoLabel" class on it. 

Once you've got the field setup that way, you can use some CSS to display the "mktoCheckboxList" as a "flex" element and then add the flex-direction property "row-reverse" to put the checkbox to the right of the text. 

In terms of getting one field to display differently than others, I prefer to use a "fieldset" and put the odd-ball field inside that fieldset so that I can write CSS for all checkbox fields and then write separate CSS for all checkbox fields INSIDE a fieldset. In this way you can carry two "sets" of styles for each input and use fieldsets in the form editor to kinda change how they show up on your form. Another way to go about this would be to write CSS specific to the field's ID value but Im not sure that'd work for this application.

If you're able to share a link to preview a page with this form on it, I'd be happy to dial in some CSS you can just snap into play on your form's Custom CSS to get this working.