Forms - multiple columns for check boxes

[GDFred]

If I have 8 items in a check box list in a form, how do I change the configuration from a single column of 8 choices (which takes up vertical space) to 2 columns of 4 items each which is more horizontal?

[DaniellePeters · Accepted solution]

A simple change you could make is to add this to the Head HTML of your page (so that you don't affect forms on any other pages):

<style>
    li.hs-form-checkbox {
        display: inline-block;
        width: 50%;
    }
</style>

The display line lets the checkboxes sit on the same line and the width 50% ensures that there will be two columns as each one will take up half the width.

You can make this more specific to your page/form if needed with additional CSS selectors

[gil100]

From some odd reason it removes the background from the page I'm working on, it there a way to apply formatting just to the form itself (I'm using Hubspot CMS)

[DaniellePeters]

I noticed there was an error in my original post which I have now fixed with the closing style tag being a regular style tag (<style> instead of </style>). So if you copied it directly, that may be causing issues.