Dividing multi-checkbox form field into multiple columns

[JaySvoboda]

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

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

<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;
}

[PamCotton]

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

[JaySvoboda]

Thank you Pam.

Any ideas @thesnappingdog @ConnorSlivensky @StjepanGrcic ??

[Niharika]

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.

Thanks

Niharika Goyal