Checkbox 2 column

Hi @sak86,

It’s not currently possible out-of-the-box, it’s been on my to-do list for a while and may eventually be added as a feature.

Depending on how long the text is for each checkbox, you might be able to do it with some custom CSS. (Longer text often makes it harder to align the columns nicely)

In Customise > Material Design Forms > Custom CSS, try adding something like the following:

@media (min-width: 768px) {
    #cf7md-form .cf7md-checkbox-item {
        width: calc(50% - 20px);
        padding-right: 20px;
    }
}

The above would apply to all of your checkbox fields. If you only want it to apply to one, replace #cf7md-form .cf7md-checkbox-item { with #cf7md-form .[[checkbox-name]] .cf7md-checkbox-item {, where [[checkbox-name]] is the name that you use in your email template to display the field.

Thanks,
Angus

Thank you Angus

I modify it a bit and it’s working like a charm!

@media (min-width: 768px) { 
#cf7md-form .cf7md-checkbox-item { 
width: calc(33% - 0px); 
padding-right: 0px; 
} 

No now i have 3 columns

Also for some reason the styling of the checkbox, radio buttons is not the same as the other text label

Is there a quick fix so all are unified color-wise

Thank you

Hi @sak86,

I’m not sure why that would change the colours. Do you have a live link where I can have a look?

Thanks,
Angus