Einführung
Möchten Sie die Auswahl von Kontrollkästchen in Ihrem Formular zählen? Mit einem kleinen Snippet können Sie Ihr Formular automatisch eine Zählung der Markierungen anzeigen lassen, die mit jeder Markierung steigt und sinkt. In diesem Tutorial führen wir Sie durch die einzelnen Schritte, wie Sie dies erreichen können.
Erstellen des Formulars
Zunächst müssen Sie ein neues Formular erstellen und das Kontrollkästchenfeld zum Formular hinzufügen. Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, lesen Sie bitte diese Dokumentation.
Hinzufügen eines Feldes für die Zählung der Markierungen in den Kontrollkästchen
Jetzt fügen wir ein Feld zu Ihrem Formular hinzu, das die Anzahl der getroffenen Auswahlen enthalten wird.
Wir fügen ein einzeiliges Textformularfeld hinzu, das die Zählung in Ihrem Formular enthalten wird.
Hinzufügen des Snippets zu Ihrer Website
Jetzt ist es an der Zeit, das Snippet in Ihre Website einzufügen, das die Zählung aktualisiert, wenn die Markierungen aktiviert und deaktiviert werden.
Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, schauen Sie sich bitte dieses Tutorial an.
/*
* 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 );
Dieses Snippet muss die Formular-ID 374 haben, um mit der Formular-ID übereinzustimmen, für die Sie dieses Snippet ausführen werden.
Auch in der Schnipsel, sehen Sie die field_25 und field_27, die die Feld-IDs, dass die Checkbox und Single Line Text Feld aus dem Formular sind.
Wenn Sie Hilfe bei der Suche nach Ihren Formular- und Feld-IDs benötigen, lesen Sie bitte diesen Leitfaden.
Wenn Sie all diese Schritte befolgt haben und Ihre Besucher die Kontrollkästchen auswählen, wird die Anzahl im Feld dynamisch aktualisiert.
Und das ist alles, was Sie brauchen! Möchten Sie Smart Tags für Ihre Kontrollkästchen-Etiketten verwenden? Werfen Sie einen Blick auf unser Tutorial über die Verarbeitung von Smart Tags in Kontrollkästchenetiketten.
Verwandte Seiten
Referenz der Aktion: wpforms_wp_footer_end
FAQ
F: Kann ich eine Gesamtsumme anhand der Beschriftung des Kontrollkästchens für alle Kontrollkästchenfelder in einem einzigen Formular ermitteln?
A: Auf jeden Fall. In diesem Beispiel wollen wir nur die Anzahl der Checkboxen abfragen, wie oft das Label Agree in allen Checkboxen dieses Formulars ausgewählt wurde. Um dies zu erreichen, verwenden Sie stattdessen dieses Snippet. Ändern Sie einfach den Text Zustimmen so, dass er mit dem gesuchten Text übereinstimmt, und aktualisieren Sie Ihre Formular- und Feld-IDs für Ihre eigene Website. Wenn Sie Hilfe bei der Suche nach Ihren Formular- und Feld-IDs benötigen, lesen Sie bitte dieses Tutorial.
/*
* 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 );