topic Formatting Checkboxes in Tips, Tricks & Best Practices

Formatting Checkboxes

kburnett — Mon, 01 Apr 2024 21:30:56 GMT

I've created a custom property comprised of four checkboxes. These checkboxes are displayed vertically, but I'd rather display them horizontally.

How can I display those checkboxes horizontally?

Re: Formatting Checkboxes

Ben_M — Tue, 02 Apr 2024 00:31:08 GMT

Hard to say from a screenshot. We would need to see the page in question to examine the CSS on page to be able to advise what needs to be updated.

Re: Formatting Checkboxes

kburnett — Tue, 02 Apr 2024 13:25:04 GMT

The page in question?

https://valleypl.com/

But I can't provide CSS from my end due to cross-domain restrictions.

It's easy to turn a vertical column of checkboxes into a horizontal row of checkboxes using CSS, so if I could do it that way, I would have already done so.

Re: Formatting Checkboxes

Ben_M — Tue, 02 Apr 2024 15:22:11 GMT

While the checkboxes are in a flex container, they are inheriting a display:block override from a parent container. If you set the "hs-form__field__options__container" class to display:flex instead of display:block the options should go horizontally instead of vertically.

Re: Formatting Checkboxes

kburnett — Tue, 02 Apr 2024 15:32:55 GMT

I can't find any place in Hubspot to apply custom css to a Hubspot CTA or Form.

Re: Formatting Checkboxes

Ben_M — Tue, 02 Apr 2024 15:39:08 GMT

@kburnett wrote:

I can't find any place in Hubspot to apply custom css to a Hubspot CTA or Form.

Custom CSS can only be applied from your page on the website, not from within Hubspot. For advanced CSS customizations of forms you should be setting all of your forms as raw html from from the style tab and then performing all customizations from your website where those options are available. If you don't do this, unfortunately your forms will be constrained by the editing limitations within the Hubspot editor.