Lead Capture Tools

GDFred
Member

Forms - multiple columns for check boxes

SOLVE

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?

1 Accepted solution
DaniellePeters
Solution
Top Contributor

Forms - multiple columns for check boxes

SOLVE

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

4 Replies 4
DaniellePeters
Solution
Top Contributor

Forms - multiple columns for check boxes

SOLVE

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

TTreeCare
Member

Forms - multiple columns for check boxes

SOLVE

It is not working

0 Upvotes
gil100
Top Contributor

Forms - multiple columns for check boxes

SOLVE

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)

 

 

0 Upvotes
DaniellePeters
Top Contributor

Forms - multiple columns for check boxes

SOLVE

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.

0 Upvotes