Cómo mostrar un recuento total de palabras debajo de tu campo de formulario

¿Desea mostrar un recuento total de palabras debajo de su campo de formulario Texto de Párrafo? Por defecto, cuando utiliza Limitar longitud en los campos de formulario Texto de una línea o Texto de Párrafo, puede limitar fácilmente los caracteres o palabras para estos campos y si desea obtener más información sobre esta configuración, revise esta documentación.

Sin embargo, para el propósito de este tutorial, no queremos limitar las palabras o caracteres, sino mostrar un recuento total en su lugar. Así que en este tutorial, le guiaremos paso a paso sobre cómo lograr esto.

Creación de su formulario

Para empezar, necesitará crear un nuevo formulario y agregar sus campos. En este tutorial, estamos creando un formulario que aceptará solicitudes para grabar artículos, por lo que también agregaremos un campo de formulario Texto de Párrafo al formulario para el mensaje grabado. Deberá tomar nota del ID del campo, ya que lo usaremos en un paso posterior.

A continuación, agregaremos también un campo de formulario HTML. Este se completará dinámicamente con el recuento de palabras a medida que sus visitantes escriban en el campo Texto de Párrafo. También deberá tomar nota de este ID de campo.

Mostrar el recuento total de palabras

Ahora que el formulario está creado, es hora de agregar este fragmento a su sitio para unirlo todo.

Si necesita ayuda sobre cómo agregar fragmentos a su sitio, revise 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 );

En el ejemplo de código anterior, hay tres elementos que deberá actualizar. En nuestro ejemplo, el ID de nuestro formulario es 1480, el ID del campo Texto de Párrafo es _6 y el ID del campo HTML es _8, recuerde actualizar estos tres elementos para que coincidan con su propio ID de formulario e ID de campo de su formulario.

Para obtener ayuda sobre cómo localizar los IDs de su formulario y campos, revise este tutorial.

Con nuestro formulario creado y nuestro fragmento de código en su lugar, verá que a medida que escribe en el campo, se actualiza un recuento de palabras en vivo debajo del campo.

¡Y eso es todo! Ha agregado con éxito un recuento de palabras para mostrar debajo de su campo de formulario. ¿Desea procesar Smart Tags dentro de un campo de formulario HTML? Consulte nuestro tutorial sobre
Cómo procesar Smart Tags en campos HTML.

Acción de referencia

wpforms_wp_footer_end

Preguntas frecuentes

P: ¿Puedo contar los caracteres en lugar de las palabras?

R: ¡Absolutamente! Para contar solo caracteres, use este fragmento de código en su lugar.

/**
 * 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: ¿Funcionará esto también para otros campos de formulario?

R: ¡Sí! Cualquier campo de formulario que acepte que el usuario escriba una respuesta funcionará con este fragmento de código. Solo recuerde asegurarse de tener el ID del campo en keyup y keydown para que el código sepa qué campo debe contar.