Label positioning in form

Go to solution
Level 3

Re: Label positioning in form

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...

Level 10

Re: Label positioning in form

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.