topic Re: Dividing multi-checkbox form field into multiple columns in Lead Capture Tools

Dividing multi-checkbox form field into multiple columns

JaySvoboda — Wed, 05 Apr 2023 20:33:53 GMT

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 =

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

$(".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 — Thu, 06 Apr 2023 14:37:25 GMT

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 — Fri, 07 Apr 2023 18:27:27 GMT

Thank you Pam.

Niharika — Tue, 11 Apr 2023 10:42:05 GMT

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