Out of the box, the checkbox field options and the Radio buttons options will be displayed vertically on top of each other.
Using custom CSS, we can change the layout to a horizontal one.
Edit the Contact Form module, and in the Advanced Tab, locate CSS ID & Classes, and enter
divi-cf-horizontal-checkbox-radioas a custom CSS class. This class will be utilized in the CSS code later on.
Make sure that the Contact Form module has at least one Checkbox or Radio Buttons field type added
Add the following CSS code to Divi > Theme Options > General Tab > Custom CSS:
.divi-cf-horizontal-checkbox-radio {
--checkbox-columns: 4;
--radiobutton-columns: 4;
}
.divi-cf-horizontal-checkbox-radio .et_pb_contact_field_options_list {
display: flex;
flex-flow: row wrap;
}
.divi-cf-horizontal-checkbox-radio .et_pb_contact_field_checkbox{
flex-basis: calc(100% / var(--checkbox-columns))
}
.divi-cf-horizontal-checkbox-radio .et_pb_contact_field_radio {
flex-basis: calc(100% / var(--radiobutton-columns))
}Note:
The above CSS code is a CSS variable. The WordPress syntax checker will flag that code as being incorrect. Please ignore that false warning.
The code uses two CSS variables
--checkbox-columns- It determines how many checkboxes option your Contact Form module has. Change the default value (4) to match the number of checkboxes your form has.--radiobutton-columns- It determines how many radio buttons your Contact Form module has. Change the default value (4) to match the number of radio buttons your form has.
