How To Display The Divi Contact Form Checkboxes And Radio Buttons Inline Horizontal Or In Columns

This tutorial will show you how to display the Divi Contact Form checkboxes and radio buttons inline or in columns.

Categories: Divi Contact Form Divi CSS Tutorials

No More Single Vertical Column

The Divi Contact Form checkboxes and radio buttons show in single, vertical, stacked layout. This takes up valuable space and is not helpful if more than a few options are added. So in this tutorial I am going to solve the problem and to show you how to make the checkboxes and radio buttons in the Divi Contact Form module either inline horizontal or how to display them in columns!

FYI: You can do this with a setting directly in the Divi Contact Form module with our popular Divi Contact Form Helper plugin! Take a look, it is so easy!

Divi Contact Form Helper by Pee Aye Creative

How To make The Divi Contact Form Checkbox Or Radio Buttons Inline

1. Add A Custom CSS Class To The Divi Contact Form

The first step in the tutorial is to add a custom CSS class to the Contact Form module. This is used to target the correct module with the code in order to only make the checkboxes and radio buttons inline on a specific module. If you want to affect all Contact Form modules on your site, you can skip this step and also remember to remove all custom class prefixes from the code.

To add the custom class, open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-checkboxes-radio-buttons-inline” in the CSS Class input field of the Contact Form module.

Add a custom CSS class To make The Divi Contact Form Checkboxes Or Radio Buttons Inline

2. Add The Custom CSS

The second step is to add the custom CSS code to your website. This variation of the tutorial requires only a few lines of CSS, so it is very easy and straighforward.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*Make The Divi Contact Form Checkbox Or Radio Buttons Inline*/

.pa-checkboxes-radio-buttons-inline .et_pb_contact_field_options_list span {
	display: inline-block;
	margin-right: 30px;
}

The code is targeting the options list, which is the parent container of the checkboxes and radio button. The display inline-block affects how the child items within that parent display. In this case, the child items are the checkboxes and radio buttons, and they will now display inline horizontally instead of stacked vertically. We also add the 30px of margin to the right to help with spacing, but you can adjust that as needed.

How To Display The Divi Contact Form Checkbox Or Radio Buttons In Columns

1. Add A Custom CSS Class To The Divi Contact Form

The first step in this variation of the tutorial is also to add a custom CSS class to the Contact Form module. This is used to target the correct module with the code in order to only make the checkboxes and radio buttons display in columns on a specific module. If you want to affect all Contact Form modules on your site, you can skip this step and also remember to remove all custom class prefixes from the code.

NOTE: Keep in mind if you want to use a different number of columns on different forms, you will need to create a separate custom class and snippet.

To add the custom class, open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-checkboxes-radio-buttons-columns” in the CSS Class input field of the Contact Form module.

Add a custom class to display The Divi Contact Form Checkboxed Or Radio Buttons in columns

2. Add The Custom CSS

The second step is to add the custom CSS code to your website. There are two parts to this snippet, but overall it is very simple and will be easy to follow.

/*Display The Divi Contact Form Checkbox Or Radio Buttons In Columns*/

.pa-checkboxes-radio-buttons-columns .et_pb_contact_field_options_list {
	display: flex;
	flex-flow: row wrap;
}

.pa-checkboxes-radio-buttons-columns .et_pb_contact_field_checkbox,
.pa-checkboxes-radio-buttons-columns .et_pb_contact_field_radio {
	flex-basis: 33%;
}

The first part of the code is changing the display of the parent options list to flex, which lays the foundation for us to then easily set the number of columns using flex basis. We also set the flex-flow to row wrap, which means the items will stack and display horizontal in columns and wrap to the next column as needed. The second part of the snippet is the width of each column, so this obviously is meant to be adjusted however you want. For 4 columns use 25%, for 3 columns use 33%, for 2 columns use 50%, etc.

Do It With A Setting!

Make life easier and use the Divi Contact Form Helper plugin instead, the ultimate Divi Contact Form upgrade with awesome features and settings!

checkbox layout options in the Divi Contact Form Helper plugin

checkbox layout column options in the Divi Contact Form Helper plugin

The Divi Contact Form Helper plugin has the option to choose to show the checkboxes and radio buttons inline or in columns with a simple selection setting! If you choose columns, the next setting appears to select the number of columns. Couldn’t be easier than that!

Learn More About The Plugin

Last updated Apr 19, 2022 @ 3:31 am

That's it!

I hope you have enjoyed learning How To Display The Divi Contact Form Checkboxes And Radio Buttons Inline Horizontal Or In Columns. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.