topic Re: dividing multi-checkbox form field into three columns in Lead Capture Tools

dividing multi-checkbox form field into three columns

DJohnson4 — Fri, 25 Nov 2022 10:27:24 GMT

Hi,

I have a new form that we are hoping to publish soon. However, we have a very long single-column list for one of the form fields. What I would like to do is break this into 3 columns, so it takes up less room. From speaking to Hubspot support I understand that this isn't something that can be done within Hubspot but requires custom CSS to be applied in our CMS.

I'm not a developer and I don't have access to one, so I was hoping somebody would be able to help me with what CSS we need to apply to make this happen.

For reference, I only want to apply it to one of the form fields, not the entire form. The form can be viewed here: https://share.hsforms.com/1WZPlpSOKRPeJG4oYB6-oOg41c9l. I have also attached some images of how it currently looks and how I want it to look.

Single columnMulti-column

Any help would be greatly appreciated.

Thanks,

David

Re: dividing multi-checkbox form field into three columns

Jasbir_Kaur — Fri, 25 Nov 2022 11:28:15 GMT

Hi @DJohnson4,

Yes, you can do this by adding a simple CSS - column-count: 3

You just need to target the specific field where you want to add this.

Let me know in case of any concerns.

Thanks!

Jasbir

Re: dividing multi-checkbox form field into three columns

DJohnson4 — Mon, 28 Nov 2022 12:30:07 GMT

Hi @Jasbir_Kaur,

How would I target the specific field? Apologies, my knowledge of CSS is minimal.

thanks,

David

Re: dividing multi-checkbox form field into three columns

Jasbir_Kaur — Tue, 29 Nov 2022 07:56:36 GMT

Hi David,

Please add the below JS in your template or Form through rich text -

$(".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;
}

Please refer to the attached screenshot -

Thanks!

Jasbir