Comment afficher un nombre total de mots sous le champ de votre formulaire

Souhaitez-vous afficher un nombre total de mots sous le champ de formulaire Texte de paragraphe ? Par défaut, lorsque vous utilisez la fonction Limiter la longueur sur les champs de formulaire Texte sur une seule ligne ou Texte de paragraphe, vous pouvez facilement limiter les caractères ou les mots pour ces champs. Si vous souhaitez en savoir plus sur ce paramètre, veuillez consulter cette documentation.

Cependant, dans le cadre de ce tutoriel, nous ne voulons pas limiter les mots ou les caractères, mais plutôt afficher un décompte total. Nous allons donc vous guider étape par étape sur la manière d'y parvenir.

Création de votre formulaire

Pour commencer, vous devrez créer un nouveau formulaire et ajouter vos champs. Dans ce tutoriel, nous créons un formulaire qui acceptera les demandes d'articles à graver, nous ajouterons donc également un champ de formulaire Texte de paragraphe au formulaire pour le message gravé. Vous devrez noter l'ID du champ car nous l'utiliserons dans une étape ultérieure.

Ensuite, nous allons également ajouter un champ de formulaire HTML au formulaire. Celui-ci sera rempli dynamiquement avec le nombre de mots pendant que vos visiteurs tapent dans le champ Texte de paragraphe. Vous devrez également noter l'ID de ce champ.

Affichage du nombre total de mots

Maintenant que le formulaire est créé, il est temps d'ajouter cet extrait à votre site pour tout rassembler.

Si vous avez besoin d'aide pour ajouter des extraits à votre site, veuillez consulter ce tutoriel.

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

Dans l'exemple de code ci-dessus, il y a trois éléments que vous devrez mettre à jour. Dans notre exemple, l'ID de notre formulaire est 1480, l'ID du champ Texte de paragraphe est _6 et l'ID du champ HTML est _8. N'oubliez pas de mettre à jour ces trois éléments pour qu'ils correspondent à votre propre ID de formulaire et ID de champ de votre formulaire.

Pour obtenir de l'aide sur la localisation des ID de vos formulaires et champs, veuillez consulter ce tutoriel.

Avec notre formulaire créé et notre extrait de code en place, vous verrez qu'au fur et à mesure que vous tapez dans le champ, un décompte de mots en direct est mis à jour sous le champ.

Et voilà ! Vous avez ajouté avec succès un compteur de mots à afficher sous votre champ de formulaire. Souhaitez-vous traiter les balises intelligentes dans un champ de formulaire HTML ? Consultez notre tutoriel sur
Comment traiter les balises intelligentes dans les champs HTML.

Action de référence

wpforms_wp_footer_end

FAQ

Q : Puis-je compter les caractères au lieu des mots ?

R : Absolument ! Pour ne compter que les caractères, utilisez plutôt cet extrait de code.

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

Q : Est-ce que cela fonctionnera aussi pour d'autres champs de formulaire ?

R : Oui ! Tout champ de formulaire qui accepte la saisie d'une réponse par l'utilisateur fonctionnera avec cet extrait de code. N'oubliez pas de vous assurer que vous avez l'ID du champ dans les événements keyup et keydown afin que le code sache quel champ il doit compter.