# Dividing multi-checkbox form field into multiple columns

**URL:** <https://community.hubspot.com/t/dividing-multi-checkbox-form-field-into-multiple-columns/78813>\
**Category:** Lead Capture Tools\
**Tags:** forms\
**Created:** [April 5, 2023, 8:33pm UTC](https://community.hubspot.com/t/dividing-multi-checkbox-form-field-into-multiple-columns/78813 "2023-04-05T20:33:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![JaySvoboda](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@JaySvoboda](https://community.hubspot.com/u/JaySvoboda)\
**Post date:** [April 5, 2023, 8:33pm UTC](https://community.hubspot.com/t/dividing-multi-checkbox-form-field-into-multiple-columns/78813/1 "2023-04-05T20:33:53Z")

</div>

[https://piersondev.wpengine.com/contact-us-hubspot-form-test/](https://piersondev.wpengine.com/contact-us-hubspot-form-test/)

I’m trying to break out that single column multi-checkboxes into 2 or 3 columns.

I’ve found other similar posts here in the Hubspot Community, but none of these are working on my form for some reason.

Please help.

here’s what I’ve tried that hasn’t worked =

[https://community.hubspot.com/t5/CRM/Making-Checkbox-and-Form-Fields-into-Two-Column/m-p/375867](https://community.hubspot.com/t5/CRM/Making-Checkbox-and-Form-Fields-into-Two-Column/m-p/375867)

```auto
ul.inputs-list.multi-container li {
 width: 40%;
 display: inline-block;
 min-width: 300px;
}

```

[https://community.hubspot.com/t5/Lead-Capture-Tools/dividing-multi-checkbox-form-field-into-three-columns/m-p/723014](https://community.hubspot.com/t5/Lead-Capture-Tools/dividing-multi-checkbox-form-field-into-three-columns/m-p/723014)

\<script\>  
$(window).load(function(){  
var counter=0;

$(“.hs-form\_\_row”).each(function(){  
counter++;  
var self=$(this);  
self.addClass(“row\_”+counter);  
});  
});

\</script\>

And, then use this CSS -

.row5 .hs-form\_\_field\_\_options\_\_container {  
column-count: 3;  
}

---

<div class="post-metadata">

**Author:** ![PamCotton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pamcotton/32/47916_2.png) [@PamCotton](https://community.hubspot.com/u/PamCotton)\
**Post date:** [April 6, 2023, 2:37pm UTC](https://community.hubspot.com/t/dividing-multi-checkbox-form-field-into-multiple-columns/78813/2 "2023-04-06T14:37:25Z")

</div>

Hello @JaySvoboda, thank you for posting in our Community!

I wanted to invite our top experts to this conversation @thesnappingdog @ConnorSlivensky @StjepanGrcic any recommendations to @JaySvoboda matter?

Thank you,

Pam

---

<div class="post-metadata">

**Author:** ![JaySvoboda](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@JaySvoboda](https://community.hubspot.com/u/JaySvoboda)\
**Post date:** [April 7, 2023, 6:27pm UTC](https://community.hubspot.com/t/dividing-multi-checkbox-form-field-into-multiple-columns/78813/3 "2023-04-07T18:27:27Z")

</div>

Thank you Pam.

Any ideas @thesnappingdog @ConnorSlivensky @StjepanGrcic ??

---

<div class="post-metadata">

**Author:** ![Niharika](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/niharika/32/30293_2.png) [@Niharika](https://community.hubspot.com/u/Niharika)\
**Post date:** [April 11, 2023, 10:42am UTC](https://community.hubspot.com/t/dividing-multi-checkbox-form-field-into-multiple-columns/78813/4 "2023-04-11T10:42:05Z")

</div>

Hi @JaySvoboda

Trust you are doing great.

You can add below CSS to achieve 3 column chekcboxes.

**.multi-container li.hs-form-checkbox {**  
**width: 33% !important;**  
**display: inline-block;**  
**}**

**Below is the screenshot for your reference how that would appear after adding CSS.**

 ![Niharika_0-1681209771490.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/d/fdb9f132d7c1af7ac346a338876c2ae5bcb1ad1f.png)

Thanks

Niharika Goyal