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

Pretende apresentar uma contagem total de palavras por baixo do seu campo de formulário Texto de Parágrafo? Por defeito, quando utiliza o Limite de Comprimento nos campos de formulário Texto de Linha Única ou Texto de Parágrafo, pode facilmente limitar os caracteres ou palavras para estes campos e, se pretender saber mais sobre esta definição, reveja esta documentação.

No entanto, para efeitos deste tutorial, não queremos limitar as palavras ou caracteres, mas sim apresentar uma contagem total. Assim, neste tutorial, vamos guiá-lo passo a passo sobre como conseguir isto.

Configurar o seu formulário

Para começar, terá de criar um novo formulário e adicionar os seus campos. Neste tutorial, estamos a criar um formulário que aceitará pedidos de gravação de artigos, pelo que também adicionaremos um campo de formulário Texto de Parágrafo ao formulário para a mensagem gravada. Terá de anotar o ID do campo, pois utilizaremos este num passo posterior.

Em seguida, vamos adicionar também um campo de formulário HTML ao formulário. Este será preenchido dinamicamente com a contagem de palavras à medida que os seus visitantes escrevem no campo Texto de Parágrafo. Também terá de anotar este ID de campo.

Apresentar a contagem total de palavras

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

Se precisar de assistência sobre como adicionar trechos ao seu site, reveja 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, existem três itens que terá de atualizar. No nosso exemplo, o ID do nosso formulário é 1480, o ID do campo Texto de Parágrafo é _6 e o ID do campo HTML é _8, por favor, lembre-se de atualizar estes 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 na localização dos IDs do seu formulário e campos, reveja este tutorial.

Com o nosso formulário criado e o nosso trecho de código no lugar, verá que, à medida que escreve no campo, uma contagem de palavras em tempo real é atualizada por baixo do campo.

E é tudo! Adicionou com sucesso uma contagem de palavras para apresentar por baixo do seu campo de formulário. Pretende processar Smart Tags dentro de um campo de formulário HTML? Veja o nosso tutorial sobre
Como Processar Smart Tags em Campos HTML.

Ação de Referência

wpforms_wp_footer_end

FAQ

P: Posso contar os caracteres em vez das palavras?

R: Absolutamente! Para contar apenas caracteres, utilize este trecho 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: Isto 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 utilizador funcionará com este trecho de código. Apenas se lembre de garantir que tem o ID do campo em keyup e keydown para que o código saiba qual o campo que deve contar.