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

Souhaitez-vous afficher un nombre total de mots dans votre champ de formulaire Texte de paragraphe? Par défaut, lorsque vous utilisez la fonction Limiter la longueur des champs de formulaire Texte à une ligne ou Texte à un paragraphe, vous pouvez facilement limiter le nombre de caractères ou de 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 le nombre de mots ou de caractères, mais afficher un nombre total. Dans ce tutoriel, nous allons donc vous guider à travers chaque étape pour y parvenir.

Création du formulaire

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

Ensuite, nous allons ajouter un champ de formulaire HTML au formulaire. Ce champ se remplira dynamiquement avec le nombre de mots au fur et à mesure que vos visiteurs taperont dans le champ Texte du paragraphe. Vous devrez également prendre note de l'identifiant de ce champ.

Afficher le nombre total de mots

Maintenant que le formulaire est créé, il est temps d'ajouter ce snippet à votre site pour l'intégrer à l'ensemble.

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 devez mettre à jour. Dans notre exemple, l'ID du formulaire est 1480, l'ID du champ Texte du 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 à l'ID du champ de votre formulaire.

Pour obtenir de l'aide sur la localisation des ID de formulaire et de champ, veuillez consulter ce tutoriel.

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

Et c'est tout ! Vous avez ajouté avec succès un nombre de mots à afficher sous votre champ de formulaire. Vous souhaitez utiliser des Smart Tags dans un champ de formulaire HTML? Consultez notre tutoriel sur
Comment traiter les Smart Tags dans les champs HTML.

Référence Action

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 : Cela fonctionnera-t-il aussi pour d'autres champs de formulaire ?

R : Oui ! Tout champ de formulaire dans lequel l'utilisateur peut saisir une réponse fonctionnera avec cet extrait de code. N'oubliez pas d'indiquer l'identifiant du champ dans les champs keyup et keydown afin que le code sache quel champ doit être pris en compte.