# Forms - multiple columns for check boxes

**URL:** <https://community.hubspot.com/t/forms-multiple-columns-for-check-boxes/1297>\
**Category:** Lead Capture Tools\
**Tags:** forms\
**Created:** [March 15, 2017, 9:59pm UTC](https://community.hubspot.com/t/forms-multiple-columns-for-check-boxes/1297 "2017-03-15T21:59:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [March 15, 2017, 9:59pm UTC](https://community.hubspot.com/t/forms-multiple-columns-for-check-boxes/1297/1 "2017-03-15T21:59:00Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![DaniellePeters](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/daniellepeters/32/6115_2.png) [@DaniellePeters](https://community.hubspot.com/u/DaniellePeters)\
**Post date:** [March 20, 2017, 6:09pm UTC](https://community.hubspot.com/t/forms-multiple-columns-for-check-boxes/1297/2 "2017-03-20T18:09:15Z")

</div>

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):

```auto
<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

---

<div class="post-metadata">

**Author:** ![gil100](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/gil100/32/26012_2.png) [@gil100](https://community.hubspot.com/u/gil100)\
**Post date:** [August 17, 2017, 2:17pm UTC](https://community.hubspot.com/t/forms-multiple-columns-for-check-boxes/1297/3 "2017-08-17T14:17:46Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![DaniellePeters](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/daniellepeters/32/6115_2.png) [@DaniellePeters](https://community.hubspot.com/u/DaniellePeters)\
**Post date:** [August 17, 2017, 4:11pm UTC](https://community.hubspot.com/t/forms-multiple-columns-for-check-boxes/1297/4 "2017-08-17T16:11:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TTreeCare](https://avatars.discourse-cdn.com/v4/letter/t/5f8ce5/32.png) [@TTreeCare](https://community.hubspot.com/u/TTreeCare)\
**Post date:** [November 3, 2021, 12:59am UTC](https://community.hubspot.com/t/forms-multiple-columns-for-check-boxes/1297/5 "2021-11-03T00:59:37Z")

</div>

It is not working