Code by Day | Explore By Weekend

Last updated Dec 8, 2020 @ 11:23 pm
Contributors:

How To Make Divi Contact Form Checkboxes and Radio Buttons Inline Horizontal

One thing that many people ask is how to make the Divi Contact Form checkboxes and radio buttons inline horizontal instead of stacked vertical. I agree that it is rather ugly to have a list of options and a big white space to the right, so this solution solves that. I also included a few other style adjustments that are option in the second part of the snippet.

To get this effect, just copy and paste the CSS snippet into the Divi>Theme Options>Custom CSS box.

/*make Divi contact form check boxes and radio buttons inline*/
.et_pb_contact_field_checkbox, .et_pb_contact_field_radio {
  display: inline-block!important;
  margin-right: 30px;
}
/*add some adjustments to the check boxes and radio buttons*/
.et_pb_contact p input[type="checkbox"] + label i, .et_pb_contact p input[type="radio"] + label i, .et_pb_subscribe .et_pb_contact_field input[type="checkbox"] + label i, .et_pb_subscribe .et_pb_contact_field input[type="radio"] + label i {
    width: 22px;
    height: 22px;
    margin-right: 6px;
  margin-top: -4px;
    background-color: #ffffff;
    border: 2px solid #666666!important;
}

Now your checkboxes and radio button in the Divi Contact form will be horizontal inline instead of stacked! No more awkward white space to the side!

Pin It on Pinterest

0

Your Cart