Comment compter les sélections de cases à cocher dans votre formulaire

Introduction

Souhaitez-vous compter les sélections de cases à cocher dans votre formulaire ? Avec un petit extrait de code, vous pouvez faire en sorte que votre formulaire affiche automatiquement un décompte des sélections qui augmente et diminue à mesure que chaque sélection est effectuée. Dans ce tutoriel, nous allons vous guider étape par étape sur la façon d'y parvenir.

Création du formulaire

Tout d'abord, vous devrez créer un nouveau formulaire et ajouter votre champ Case à cocher au formulaire. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

Ajout d'un champ pour contenir le décompte des sélections de cases à cocher

Nous allons maintenant ajouter un champ à votre formulaire qui contiendra le décompte au fur et à mesure des sélections.

Nous allons ajouter un champ de formulaire Texte sur une seule ligne qui contiendra le décompte dans votre formulaire.

Ajout de l'extrait de code à votre site

Il est maintenant temps d'ajouter l'extrait de code à votre site qui mettra à jour le décompte à mesure que les sélections sont cochées et décochées.

Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

/*
 * Count checkbox selections
 *
 * @link  https://wpforms.com/developers/how-to-count-checkbox-selections-inside-your-form/
 */

function wpf_dev_checkbox_count() {
    ?>
    <script type="text/javascript">
		(function($) {
			
			//Count the checkbox selections on field ID 25 for the form ID 374
			var $checkboxes = $( '#wpforms-374-field_25 input[type="checkbox"]' );
			
			$checkboxes.change(function(){
				
				var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
				
				//Add the count to the field ID 27 for the form ID 374
				$( '#wpforms-374-field_27' ).val(countCheckedCheckboxes);
				
			});
		})(jQuery);	
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_checkbox_count', 10 );

Cet extrait de code devra avoir l'ID de formulaire 374 pour correspondre à l'ID de formulaire pour lequel vous exécuterez cet extrait de code.

Également dans l'extrait de code, vous verrez field_25 et field_27 qui sont les ID de champ pour les champs Case à cocher et Texte sur une seule ligne du formulaire.

Si vous avez besoin d'aide pour trouver les ID de vos formulaires et champs, veuillez consulter ce tutoriel.

Après avoir suivi toutes ces étapes, à mesure que vos visiteurs sélectionnent les cases à cocher, le décompte se mettra à jour dynamiquement dans le champ.

Et c'est tout ce dont vous avez besoin ! Souhaitez-vous utiliser des balises intelligentes pour vos étiquettes de cases à cocher ? Consultez notre tutoriel sur Comment traiter les balises intelligentes dans les étiquettes de cases à cocher.

Articles associés

Référence d’action : wpforms_wp_footer_end

FAQ

Q : Puis-je récupérer un total par étiquette de case à cocher pour tous les champs de cases à cocher d'un même formulaire ?

R : Absolument. Dans cet exemple, nous voulons seulement récupérer le décompte des cases à cocher pour le nombre de fois où l'étiquette Accepter a été sélectionnée dans toutes les cases à cocher de ce formulaire. Pour ce faire, utilisez plutôt cet extrait de code. Changez simplement le texte Accepter pour qu'il corresponde au texte que vous recherchez, tout en mettant à jour les ID de vos formulaires et champs pour votre propre site. Si vous avez besoin d'aide pour trouver les ID de vos formulaires et champs, veuillez consulter ce tutoriel.

/*
 * Count checkbox selections with the label Agree
 *
 * @link  https://wpforms.com/developers/wpforms_frontend_output_success/ 
 */
 
function wpf_dev_checkbox_count() {
    ?>
    <script type="text/javascript">
        (function($) {
			
			//Count all the checkbox selections in the form ID 374
            var $checkboxes = $( '#wpforms-form-374 input[type="checkbox"]' );
             
            $checkboxes.change(function(){
                
				let total = 0;
				$checkboxes.each( function( index ) {
					
					// Look for any checkboxes on this form field that are checked and also match the word Agree and count them
					if( $(this).is(":checked") && $(this).next().text() == "Agree" ) {
					   total ++;
					}
					
				});
				
                //Add the count to the field ID 27 for the form ID 374
                $( '#wpforms-374-field_27' ).val(total);
                 
            });
        })(jQuery); 
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_checkbox_count', 10 );