11 Replies Latest reply on Oct 29, 2018 12:08 PM by Dave Roberts

    Label positioning in form

    Casler Nancy (Nancy)

      I'm having an issue positioning a couple of things on a form. My checkbox labels are conditioned on the selection of Canada as a country (or not), so those are stored the visibility rules for my checkbox field. I was able to find a way to move the checkbox to the left and position it where I want it, but now my textarea label is inset from the left. I think this may be because both fields are not required. I tried a number of things to try to move that "questions/comments" field to the left, but nothing is working. Can anyone suggest a way to target that one label? My current code is below. Any suggestions would be appreciated!

       

      .mktoButton {

        background-color: #005eb8 !important;

        border: 1px solid #005eb8 !important;

      }

       

      .mktoForm .mktoButtonWrap.mktoBluePill .mktoButton {

        text-shadow: none !important;

      }

       

      .contactForm input[style] {

        height:30px;

      }

       

      .mktoForm textarea.mktoField {

          width: 100% !important;

      }

       

      .mktoForm label {

        padding: 0px 0px 3px 0px;

      }

       

      .mktoForm .mktoCheckboxList {

          padding: .2em 0em 0em 0em;

          float: left;

          width: 8px !important;

      }

       

      .mktoForm label {

          padding: 0px 0px 3px 0px;

          float: right !important;

          width: 90% !important;

      }

       

      TEXTAREA#Comments (L) {clear:none;}

        • Re: Label positioning in form
          Grégoire Michel

          Provide us with a URL to the landing page. it will much easier to test and debug than an image

           

          -Greg

          • Re: Label positioning in form
            Dave Roberts

            Hey Nancy,

             

            Try using the "Checkboxes" field instead of the "Checkbox" field, even if you only need one.

             

            Here's the difference:

            The checkbox field will show up with a label to the left of it (or above, depending on the form settings). In either case, the label is before the input and that's usually not what you want w/ a checkbox.

            The checkboxes field allows multiple inputs, so it also has a label for the field, but each of the inputs (checkboxes) can be assigned a "Display Value" in the "Value" settings for the checkboxes field type. When you set the display value for a "checkboxes" field, it'll show up (like a label) to the right of that input. You can just delete the actual label for the checkboxes field and leave that blank, unless you wanted to add a kind of "header" blurb above the checkbox(es).

             

            I think it's a little counter-intuitive to use checkboxes for a single checkbox, but unless you'll need to add some html (like a link) into the "label" (display value) for the checkbox, this method is probably the easiest without having to fuss too much with the custom css.

             

            -Dave

              • Re: Label positioning in form
                Casler Nancy (Nancy)

                Hi Dave, yes, I was doing that, but the team decided to use visibility rules to display the label, which changes depending on the choice of country. Now I'm back to trying to find a way to move the label over, because what I'm doing to move the checkbox to the left of the label is causing issues with that comments label...

                  • Re: Label positioning in form
                    Dave Roberts

                    If you're not already using a fieldset on your form, that'd be something you could take advantage of to style "this label" differently from "that label".

                     

                    For example, you could write CSS that's specific to a field inside a fieldset to override the CSS for "any field". In this case, it sounds like you'd like to draw a line between the label styles for your Comments input and your Checkbox. You could put the checkbox field inside a fieldset and target that specifically by adding it into the CSS selector like this:

                     

                    form.mktoForm label.mktoLabel { ... } /* normal (all, not inside a fieldset) label styles here */
                    form.mktoForm fieldset label.mktoLabel {...} /* special styles for the label, but just inside a fieldset element */
                    
                    

                     

                    Order is important here, you'll want the styles that modify the fieldset to come after the normal styles to make it easier to manage.

                    Inside the form editor, you can add a new fieldset on the first page (with all your inputs) by clicking the purple plus sign in the top right and choosing "fieldset" (the same place you'd go to add a new field or rich text). From there, just drag and drop your checkbox field inside the fieldset and then use the CSS above (replace ... with your styles) and that should allow you to style the label for the fields inside a fieldset differently from the labels for fields outside of a fieldset (normal).

                     

                    Let me know if you've got any questions or if you're already using fieldsets, maybe there's another way to go about this.

                     

                    Thanks,
                    Dave