Come visualizzare il conteggio totale delle parole sotto il campo del modulo

Si desidera visualizzare il conteggio totale delle parole nel campo del modulo Testo del paragrafo? Per impostazione predefinita, quando si utilizza l'opzione Limita lunghezza nei campi del modulo Testo a riga singola o Testo a capoverso, è possibile limitare facilmente i caratteri o le parole per questi campi; per ulteriori informazioni su questa impostazione, consultare la documentazione.

Tuttavia, per lo scopo di questa esercitazione, non vogliamo limitare le parole o i caratteri, ma visualizzare un conteggio totale. In questo tutorial, quindi, vi illustreremo i singoli passaggi per ottenere questo risultato.

Creare il modulo

Per iniziare, è necessario creare un nuovo modulo e aggiungere i campi. In questa esercitazione, stiamo creando un modulo che accetterà richieste di incisione di oggetti, quindi aggiungeremo al modulo anche un campo Paragraph Text per il messaggio inciso. È necessario prendere nota dell'ID del campo, poiché lo utilizzeremo in una fase successiva.

Successivamente, aggiungeremo al modulo anche un campo HTML. Questo si popolerà dinamicamente con il conteggio delle parole man mano che i visitatori digitano nel campo Testo del paragrafo. È necessario prendere nota anche dell'ID di questo campo.

Visualizzazione del conteggio totale delle parole

Ora che il modulo è stato creato, è il momento di aggiungere questo snippet al sito per mettere insieme il tutto.

Se avete bisogno di assistenza per aggiungere gli snippet al vostro sito, consultate 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 qui sopra, ci sono tre elementi da aggiornare. Nel nostro esempio, l'ID del modulo è 1480, l'ID del campo Paragraph Text è _6 e l'ID del campo HTML è _8. Ricordarsi di aggiornare questi tre elementi in modo che corrispondano all'ID del modulo e all'ID del campo del proprio modulo.

Per assistenza nell'individuazione degli ID dei moduli e dei campi, consultare questa esercitazione.

Una volta creato il modulo e inserito lo snippet di codice, si noterà che, man mano che si digita nel campo, il conteggio delle parole viene aggiornato sotto il campo stesso.

Ed ecco fatto! Avete aggiunto con successo un conteggio delle parole da visualizzare sotto il vostro campo modulo. Volete elaborare gli Smart Tag all'interno di un campo modulo HTML? Consultate il nostro tutorial su
Come elaborare gli Smart Tag nei campi HTML.

Azione di riferimento

wpforms_wp_footer_end

FAQ

D: Posso contare i caratteri invece delle parole?

R: Assolutamente sì! Per contare solo i caratteri, utilizzare invece questo frammento 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 del modulo che accetti la digitazione di una risposta da parte dell'utente funzionerà con questo frammento di codice. Basta ricordarsi di assicurarsi di avere l'ID del campo nei tasti keyup e keydown, in modo che il codice sappia quale campo deve contare.