Pardot has many challenges. Today's challenge is the inflexibility of checkboxes in Pardot.
Pardot gives you two choices when dealing with checkboxes: Horizontal and Stacked. This is fine if you have just a few fields. However, if you have a large number of checkbox fields, it becomes pretty disappointing.
If you set the checkbox alignment to horizontal, you get an unattractive word-wrap:
If you set the checkbox alignment to stacked, you get a ridiculously long list:
My solution is a work in progress. I think it can be improved on, but it's a good start. If anyone has improvements, please leave a comment on this post.
Pardot wraps each checkbox element in a <span> element, so this is what we are targeting. Here is the css code I added to the layout template:
This includes the ability to use 1, 2, 3 or 4 rows. I found the formatting of the 3 and 4 columns to not do well with the longer inline label names, so I stuck with 2 columns. Like I said, this solution has room for improvement.
Now these styles can be applied to the checkbox fields as appropriate. On the form I created this for, I used both the 3-col and 2-col options. I used the 3-col on the checkboxes with shorter inline labels, and the 2-col option on the bigger form. Add the CSS class to the CSS Classes field under the Advanced tab on the form field.
Below is the result as applied to this form:
