Cómo mostrar un recuento total de palabras bajo el campo de formulario

¿Le gustaría mostrar un recuento total de palabras bajo su campo de formulario Texto de párrafo? Por defecto, al utilizar la opción 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 de estos campos. Si desea obtener más información sobre esta opción, consulte esta documentación.

Sin embargo, para el propósito de este tutorial, no queremos limitar las palabras o caracteres, sino mostrar un recuento total. Así que en este tutorial, vamos a caminar a través de cada paso sobre cómo lograr esto.

Creación del formulario

Para empezar, tendrá que crear un nuevo formulario y añadir sus campos. En este tutorial, estamos creando un formulario que aceptará solicitudes de grabado de artículos, por lo que también añadiremos un campo de texto de párrafo al formulario para el mensaje grabado. Deberá tomar nota del ID del campo, ya que lo utilizaremos en un paso posterior.

A continuación, vamos a añadir un campo HTML al formulario. Éste se rellenará dinámicamente con el recuento de palabras a medida que sus visitantes escriban en el campo Texto de párrafo. También tendrá que tomar nota de este campo ID.

Mostrar el recuento total de palabras

Ahora que el formulario está creado es el momento de añadir este fragmento a su sitio para tirar de todo junto.

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

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, por favor recuerde actualizar estos tres elementos para que coincidan con su propio ID de formulario e ID de campo de su formulario.

Si necesita ayuda para localizar sus ID de formulario y campo, consulte este tutorial.

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

Y ya está. Ha añadido con éxito un recuento de palabras para mostrar bajo su campo de formulario. ¿Desea procesar etiquetas inteligentes dentro de un campo de formulario HTML? Consulte nuestro tutorial sobre
Cómo procesar etiquetas inteligentes en campos HTML.

Acción de referencia

wpforms_wp_footer_end

PREGUNTAS FRECUENTES

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

R: ¡Por supuesto! Para contar sólo caracteres, utilice este fragmento 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: ¿Funcionará también con 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. Sólo recuerde asegurarse de que tiene el ID de campo en el keyup y keydown para que el código sepa qué campo debe contar.