Lead Capture Tools

GDFred
Miembro

Forms - multiple columns for check boxes

resolver

If I have 8 items in a check box list in a form, how do I change the configuration from a single column of 8 choices (which takes up vertical space) to 2 columns of 4 items each which is more horizontal?

1 Soluciones aceptada
DaniellePeters
Solución
Colaborador líder

Forms - multiple columns for check boxes

resolver

A simple change you could make is to add this to the Head HTML of your page (so that you don't affect forms on any other pages):

 

 

<style>
    li.hs-form-checkbox {
        display: inline-block;
        width: 50%;
    }
</style>

The display line lets the checkboxes sit on the same line and the width 50% ensures that there will be two columns as each one will take up half the width.

 

You can make this more specific to your page/form if needed with additional CSS selectors

Ver la solución en mensaje original publicado

4 Respuestas 4
DaniellePeters
Solución
Colaborador líder

Forms - multiple columns for check boxes

resolver

A simple change you could make is to add this to the Head HTML of your page (so that you don't affect forms on any other pages):

 

 

<style>
    li.hs-form-checkbox {
        display: inline-block;
        width: 50%;
    }
</style>

The display line lets the checkboxes sit on the same line and the width 50% ensures that there will be two columns as each one will take up half the width.

 

You can make this more specific to your page/form if needed with additional CSS selectors

TTreeCare
Miembro

Forms - multiple columns for check boxes

resolver

It is not working

0 Me gusta
gil100
Colaborador líder

Forms - multiple columns for check boxes

resolver

From some odd reason it removes the background from the page I'm working on, it there a way to apply formatting just to the form itself (I'm using Hubspot CMS)

 

 

0 Me gusta
DaniellePeters
Colaborador líder

Forms - multiple columns for check boxes

resolver

I noticed there was an error in my original post which I have now fixed with the closing style tag being a regular style tag (<style> instead of </style>). So if you copied it directly, that may be causing issues.

0 Me gusta