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

Gostaria de apresentar uma contagem total de palavras no seu campo de formulário Texto de parágrafo? Por predefinição, quando utiliza a opção Limitar comprimento nos campos de formulário Texto de linha única ou Texto de parágrafo, pode limitar facilmente os caracteres ou as palavras destes campos.

No entanto, para efeitos deste tutorial, não queremos limitar as palavras ou os caracteres, mas sim apresentar uma contagem total. Por isso, neste tutorial, vamos orientá-lo em cada passo para conseguir isso.

Criar o seu formulário

Para começar, tem 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 itens, pelo que também adicionaremos um campo de formulário Texto de parágrafo ao formulário para a mensagem gravada. Terá de tomar nota do ID do campo, uma vez que o utilizaremos num passo posterior.

Em seguida, também vamos adicionar um campo de formulário HTML ao formulário. Ele será preenchido dinamicamente com a contagem de palavras à medida que os visitantes digitarem no campo Texto do parágrafo. Também precisa de tomar nota da ID deste campo.

Mostrar a contagem total de palavras

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

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 terá de atualizar. No nosso exemplo, o ID do formulário é 1480, o ID do campo Texto do parágrafo é _6 e o ID do campo HTML é _8. Não se esqueça de atualizar estes três itens para corresponderem ao seu próprio ID do formulário e ao ID do campo do seu formulário.

Para obter assistência na localização dos IDs de formulário e de campo, consulte este tutorial.

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

E já está! Adicionou com êxito uma contagem de palavras para apresentar no seu campo de formulário. Gostaria de processar Smart Tags dentro de um campo de formulário HTML? Consulte 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: Sem dúvida! Para contar apenas 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: Isto também funcionará para outros campos de formulário?

R: Sim! Qualquer campo de formulário que aceite que o usuário digite uma resposta funcionará com este trecho de código. Lembre-se apenas de se certificar de que tem o ID do campo no keyup e keydown para que o código saiba que campo deve contar.