Introdução
Gostaria de contar as selecções de caixas de verificação no seu formulário? Com um pequeno snippet, pode fazer com que o seu formulário apresente automaticamente uma contagem das selecções que aumenta e diminui à medida que cada seleção é feita. Neste tutorial, vamos guiá-lo através de cada passo para o conseguir.
Criar o formulário
Em primeiro lugar, tem de criar um novo formulário e adicionar o campo Checkbox ao formulário. Se precisar de ajuda para criar o seu formulário, consulte esta documentação.
Adicionar um campo para guardar a contagem das selecções da caixa de verificação
Agora vamos adicionar um campo ao seu formulário que conterá a contagem à medida que as selecções forem feitas.
Vamos adicionar um campo de formulário de texto de linha única que irá conter a contagem no seu formulário.
Adicionar o snippet ao seu site
Agora é altura de adicionar o snippet ao seu site que actualizará a contagem à medida que as selecções são marcadas e desmarcadas.
Se precisar de ajuda para adicionar snippets ao seu site, consulte este tutorial.
/*
* 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 );
Este snippet terá de ter o ID do formulário 374 para corresponder ao ID do formulário para o qual irá executar este snippet.
Também no snippet, verá o field_25 e o field_27 que são os IDs de campo que o campo Checkbox e Single Line Text do formulário.
Se precisar de ajuda para encontrar os IDs de formulários e campos, consulte este tutorial.
Depois de seguir todos estes passos, à medida que os seus visitantes selecionam as selecções da caixa de verificação, a contagem será actualizada dinamicamente no campo.
E é tudo o que precisa! Gostaria de utilizar etiquetas inteligentes nas suas etiquetas de caixa de verificação? Consulte o nosso tutorial sobre Como processar etiquetas inteligentes em etiquetas de caixa de verificação.
Relacionadas
Referência da ação: wpforms_wp_footer_end
FAQ
P: Posso obter um total pela etiqueta da caixa de verificação para todos os campos de caixa de verificação num único formulário?
R: Sem dúvida. Neste exemplo, apenas pretendemos obter a contagem da caixa de verificação para o número de vezes que a etiqueta Concordo foi selecionada em todas as caixas de verificação deste formulário. Para conseguir isso, use este snippet. Basta alterar o texto Concordo para corresponder ao texto que procura, bem como atualizar os IDs do formulário e do campo para o seu próprio site. Se precisar de ajuda para encontrar as IDs de formulário e campo, consulte este 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 );