web-dev-qa-db-fra.com

Formulaire de contact 7 - Donnez à chaque case à cocher une classe?

J'utilise le formulaire de contact 7 et j'ai un groupe de cases à cocher dans mon formulaire. Je veux donner à chaque case à cocher une classe. CF7 nous permet d'ajouter une classe, mais cela ne s'applique qu'à l'objet parent. Je veux ma classe personnalisée sur les divs intérieurs.

Je veux ajouter une classe personnalisée parce que j'utilise Bootstrap 4 et que je veux avoir 3 cases à cocher par ligne (par exemple), en donnant la classe 'col-4'.

 Picture of html to help explain 

Est-ce que je manque quelque chose? Devrai-je utiliser javascript?

javascripthtmlplugin-contact-form-7
1
Ben Kailon

avec jquery dans footer.php

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

ou via css (vous devrez vous adapter à différentes résolutions d'écran et faire des tests)

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

Mais je pense que vous pouvez créer n cases à cocher distinctes et les envelopper dans un

<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>

dans l'éditeur de formulaire

0
Andrea Somovigo