Come visualizzare un conteggio totale di parole sotto il tuo campo modulo

Vuoi visualizzare un conteggio totale delle parole sotto il tuo campo modulo Testo del paragrafo? Per impostazione predefinita, quando utilizzi Limita lunghezza sui campi modulo Testo a riga singola o Testo del paragrafo, puoi facilmente limitare i caratteri o le parole per questi campi e se desideri saperne di più su questa impostazione, consulta questa documentazione.

Tuttavia, ai fini di questo tutorial, non vogliamo limitare le parole o i caratteri, ma visualizzare un conteggio totale. Quindi, in questo tutorial, ti guideremo passo dopo passo su come ottenere questo risultato.

Creazione del tuo modulo

Per iniziare, dovrai creare un nuovo modulo e aggiungere i tuoi campi. In questo tutorial, stiamo creando un modulo che accetterà richieste per l'incisione di articoli, quindi aggiungeremo anche un campo modulo Testo del paragrafo al modulo per il messaggio inciso. Dovrai prendere nota dell'ID del campo poiché lo utilizzeremo in un passaggio successivo.

Successivamente, aggiungeremo anche un campo modulo HTML. Questo si popolerà dinamicamente con il conteggio delle parole mentre i tuoi visitatori digitano nel campo Testo del paragrafo. Dovrai anche prendere nota dell'ID di questo campo.

Visualizzazione del conteggio totale delle parole

Ora che il modulo è stato creato, è ora di aggiungere questo snippet al tuo sito per metterlo tutto insieme.

Se hai bisogno di assistenza su come aggiungere snippet al tuo sito, consulta questo 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 );

Nell'esempio di codice sopra, ci sono tre elementi che dovrai aggiornare. Nel nostro esempio, l'ID del nostro modulo è 1480, l'ID del campo Testo del paragrafo è _6 e l'ID del campo HTML è _8, ricorda di aggiornare questi tre elementi per farli corrispondere al tuo ID modulo e ID campo dal tuo modulo.

Per assistenza nell'individuazione degli ID dei tuoi moduli e campi, consulta questo tutorial.

Con il nostro modulo creato e il nostro snippet di codice in atto, vedrai che mentre digiti nel campo, un conteggio delle parole in tempo reale viene aggiornato sotto il campo.

E questo è tutto! Hai aggiunto con successo un conteggio delle parole da visualizzare sotto il tuo campo modulo. Vuoi elaborare Smart Tag all'interno di un campo modulo HTML? Dai un'occhiata al nostro tutorial su
Come elaborare Smart Tag nei campi HTML.

Azione di riferimento

wpforms_wp_footer_end

FAQ

D: Posso contare i caratteri invece delle parole?

R: Assolutamente! Per contare solo i caratteri, usa invece questo snippet di codice.

/**
 * 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 );

D: Funzionerà anche per altri campi modulo?

R: Sì! Qualsiasi campo modulo che accetta l'input dell'utente funzionerà con questo snippet di codice. Ricorda solo di assicurarti di avere l'ID del campo in keyup e keydown in modo che il codice sappia quale campo deve contare.