dividing multi-checkbox form field into three columns

[DJohnson4]

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

[Jasbir_Kaur]

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

[DJohnson4]

Hi @Jasbir_Kaur,

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

thanks,

David

[Jasbir_Kaur]

Hi David,

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

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

Please refer to the attached screenshot -

Thanks!

Jasbir