See Styling Contact Form for a general explanation of styling CF7 forms using CSS.
There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.
Buzztone,
Thanks for that link and the CSS edit page. I surfed it and could find no mention of applying CSS to achieve a double column layout. Below shows what’s printed from CF7 concerning my six [checkbox] form elements.
<span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Tree Removal</span> <input type="checkbox" name="work-type-checkbox-294[]" value="Tree Removal" /></label></span>
<span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Tree Pruning</span> <input type="checkbox" name="work-type-checkbox-294[]" value="Tree Pruning" /></label></span>
<span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Last & Lot Clearing</span> <input type="checkbox" name="work-type-checkbox-294[]" value="Last & Lot Clearing" /></label></span>
<span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Timber Buying</span> <input type="checkbox" name="work-type-checkbox-294[]" value="Timber Buying" /></label></span>
<span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Hazard Assessment</span> <input type="checkbox" name="work-type-checkbox-294[]" value="Hazard Assessment" /></label></span>
<span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">Commercial Services</span> <input type="checkbox" name="work-type-checkbox-294[]" value="Commercial Services" /></label></span></span></span>
I honestly don’t think its possible to pull this off. Everything is housed in a <span>. If there was a way to define a <div> maybe. I dunno. There’s nothing out there.
I think what I’ll do is create two separate [checkbox] and float them in two <divs>. I think I’m vacating myself up a rope using this approach.
Much respect to anyone who can pull this off.
In honor of the WordPress community I will explain what I did to make it happen. I used the two separate [checkbox] method.
CSS
.parent_div_1, .parent_div_2{width:140px; margin-right:10px; float:left;}
.child_div_1{float:left; margin-right:6px;}
.textsize {font-size: 13px;} /*reduced font size to eliminate text wrap*/
Contact Form 7 Code
<div class="parent_div_1 textsize">[checkbox* checkbox-91 "Box 1" "Box 2" "Box 3"]</div> <!-- left column-->
<div class="parent_div_2 textsize">[checkbox checkbox-92 "Box 4" "Box 5" "Box 6"]</div><!--right column-->
Have a fantastic and delicious day!
