Contact Form 7 – Give each checkbox a class?

by

I’m using Contact Form 7 and have a group of checkboxes in my form.
I want to give each checkbox a class.
CF7 lets us add a class, but this only applies to the parent object.
I want my custom class on the inner divs.

I want to add a custom class because I am using Bootstrap 4, and I want to have 3 checkboxes per row (for example), by giving the class ‘col-4’.

Picture of html to help explain

Am I missing something?
Will I need to use javascript?

1 Answer
1

with jquery in footer.php 

jQuery(document).ready(function($){
  $('.wpcft-form-control div.checkbox').addClass('col-4');
}

or via css (you will have to adjust for various screen resolution and make some test)

<style>
.wpcft-form-control div.checkbox{width:33%;max-width:33%;float:left}
</style>

But I think you can create separate n separate checkboxes and wrap them in a 

<div class="col-4">[checkbox checkbox-x  "option1"]</div>
<div class="col-4">[checkbox checkbox-x  "option2"]</div>
<div class="col-4">[checkbox checkbox-x  "option3"]</div>

in the form editor

Leave a Comment