Como exibir uma contagem total de palavras no campo do formulário

Você gostaria de exibir uma contagem total de palavras no campo de formulário Texto de parágrafo? Por padrão, ao usar a opção Limit Length (Limitar comprimento) nos campos de formulário Texto de linha única ou Texto de parágrafo, você pode limitar facilmente os caracteres ou as palavras desses campos e, se quiser saber mais sobre essa configuração, consulte esta documentação.

Entretanto, para o propósito deste tutorial, não queremos limitar as palavras ou os caracteres, mas exibir uma contagem total. Portanto, neste tutorial, vamos orientá-lo em cada etapa de como fazer isso.

Criação de 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 Paragraph Text ao formulário para a mensagem gravada. Você precisará anotar o ID do campo, pois o usaremos em uma etapa posterior.

Em seguida, também adicionaremos um campo de formulário HTML ao formulário. Ele será preenchido dinamicamente com a contagem de palavras à medida que seus visitantes digitarem no campo Texto do parágrafo. Você também precisará anotar a ID desse campo.

Exibindo a contagem total de palavras

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

Se precisar de ajuda sobre como adicionar snippets ao seu site, consulte 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, o ID do formulário é 1480, o ID do campo Paragraph Text é _6 e o ID do campo HTML é _8. Lembre-se de atualizar esses três itens para que correspondam ao ID do seu próprio formulário e ao ID do campo do seu formulário.

Para obter ajuda na localização de seus IDs de formulário e campo, consulte este tutorial.

Com o formulário criado e o snippet de código instalado, você verá que, à medida que digita no campo, uma contagem de palavras ativa é atualizada abaixo do campo.

E é isso! Você adicionou com êxito uma contagem de palavras para exibir no campo do formulário. Gostaria de processar as Smart Tags em 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 os caracteres, use este trecho de código.

/**
 * 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 também funcionará em outros campos de formulário?

R: Sim! Qualquer campo de formulário que aceite a digitação de uma resposta pelo usuário funcionará com esse trecho de código. Lembre-se apenas de se certificar de que você tenha o ID do campo em keyup e keydown para que o código saiba qual campo deve ser contado.