Trouble Formatting Form Checkbox | Community
Skip to main content
Troy_Larson
Troy_Larson
Level 3
September 28, 2020
Solved

Trouble Formatting Form Checkbox

  • September 28, 2020
  • 3 replies
  • 4672 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Dave_Roberts

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.

3 replies

SanfordWhiteman
SanfordWhiteman
Level 10
September 28, 2020

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

    C
    Community Advisor and Adobe Champion
    ChristianeRo1Community Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    September 28, 2020

    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
      Community Advisor and Adobe Champion
      Katja_KeesomCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      September 30, 2020

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

      Dave_Roberts
      Dave_RobertsAccepted solution
      Level 10
      September 28, 2020

      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.

      Terms & ConditionsAccessibility statement

      Loading footer...