Como Exibir uma Contagem Total de Palavras Abaixo do Campo do seu Formulário

Você gostaria de exibir uma contagem total de palavras sob o seu campo de formulário Texto de Parágrafo? Por padrão, ao usar o Limite de Comprimento nos campos de formulário Texto de Linha Única ou Texto de Parágrafo, você pode facilmente limitar os caracteres ou palavras para esses campos e, se desejar saber mais sobre essa configuração, revise esta documentação.

No entanto, para fins deste tutorial, não queremos limitar as palavras ou caracteres, mas sim exibir uma contagem total. Portanto, neste tutorial, vamos guiá-lo por cada etapa de como conseguir isso.

Configurando seu formulário

Para começar, você precisará criar um novo formulário e adicionar seus campos. Neste tutorial, estamos criando um formulário que aceitará solicitações de gravação de itens, portanto, também adicionaremos um campo de formulário Texto de Parágrafo ao formulário para a mensagem gravada. Você precisará anotar o ID do campo, pois o usaremos em uma etapa posterior.

Em seguida, adicionaremos também um campo de formulário HTML ao formulário. Ele será preenchido dinamicamente com a contagem de palavras conforme seus visitantes digitam no campo Texto de Parágrafo. Você também precisará anotar o ID deste campo.

Exibindo a contagem total de palavras

Agora que o formulário foi criado, é hora de adicionar este snippet ao seu site para juntar tudo.

Se precisar de assistência sobre como adicionar snippets ao seu site, revise este tutorial.

/**
 * Add a word count under the form field.
 *
 * @link  https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/
 */

function wpf_dev_count_words_only() {
?>

<script type="text/javascript">
    
    // Look at the form ID 1480 only and the count each keyup or keydown on field ID 6
    jQuery( '#wpforms-1480-field_6' ).keyup(updateCount);
    jQuery( '#wpforms-1480-field_6' ).keydown(updateCount);

    function updateCount() {
        var cs = jQuery.trim(this.value).length ? this.value.match(/\S+/g).length + " words total" : 0;
        // Update the word count inside the HTML form field (field ID 8)
        jQuery( '#wpforms-1480-field_8' ).text(cs);
    }
    
</script>

<?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_count_words_only', 30 );

No exemplo de código acima, há três itens que você precisará atualizar. Em nosso exemplo, nosso ID de formulário é 1480, o ID do campo Texto de Parágrafo é _6 e o ID do campo HTML é _8, lembre-se de atualizar esses três itens para corresponder ao seu próprio ID de formulário e ID de campo do seu formulário.

Para obter assistência sobre como localizar seus IDs de formulário e campo, revise este tutorial.

Com nosso formulário criado e nosso snippet de código no lugar, você verá que, ao digitar no campo, uma contagem de palavras ao vivo é atualizada abaixo do campo.

E é isso! Você adicionou com sucesso uma contagem de palavras para exibir abaixo do seu campo de formulário. Você gostaria de processar Smart Tags dentro de um campo de formulário HTML? Confira nosso tutorial sobre
Como Processar Smart Tags em Campos HTML.

Ação de Referência

wpforms_wp_footer_end

Perguntas Frequentes

P: Posso contar os caracteres em vez das palavras?

R: Com certeza! Para contar apenas caracteres, use este snippet de código em vez disso.

/**
 * Add a character count under the form field.
 *
 * @link  https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/
 */

function wpf_dev_count_characters_only() {
?>

<script type="text/javascript">
    
    // Look at the form ID 1480 only and the count each keyup or keydown on field ID 6
    jQuery('#wpforms-1480-field_6').keyup(updateCount);
    jQuery('#wpforms-1480-field_6').keydown(updateCount);

    function updateCount() {
        var cs = jQuery(this).val().length + " Characters";
        // Update the word count inside the HTML form field (field ID 9)
        jQuery('#wpforms-1480-field_9').text(cs);
    }
    
</script>

<?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_count_characters_only', 30 );

P: Isso funcionará para outros campos de formulário também?

R: Sim! Qualquer campo de formulário que aceite a digitação de uma resposta pelo usuário funcionará com este snippet de código. Apenas lembre-se de garantir que você tenha o ID do campo em keyup e keydown para que o código saiba qual campo ele deve contar.