Forms - multiple columns for check boxes

SOLVE
New Contributor

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?

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Solution
Top Contributor

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

View solution in original post

3 Replies 3
Solution
Top Contributor

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

View solution in original post

Top Contributor

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)

 

 

Reply
0 Upvotes
Top Contributor

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.

Reply
0 Upvotes