Afficher un décompte en direct des champs répéteurs dans votre formulaire

Souhaitez-vous afficher un décompte en direct du nombre de lignes de champs répéteurs ajoutées à votre formulaire ? Cela peut être utile lorsque vous souhaitez que les utilisateurs voient le nombre d'éléments qu'ils ont saisis, en particulier dans des scénarios tels que l'ajout de noms, de tâches ou d'articles de produits.

Dans ce tutoriel, nous vous expliquerons comment mettre à jour automatiquement un champ "Compteur" en temps réel à l'aide d'un simple extrait de code PHP.

Création de votre formulaire

Pour commencer, créez votre formulaire et incluez un champ Répéteur ainsi qu'un champ Texte sur une seule ligne étiqueté quelque chose comme "Compteur". Ce champ sera mis à jour automatiquement et ne doit pas être rempli manuellement par l'utilisateur.

Si vous avez besoin d'aide pour créer un formulaire, consultez notre tutoriel sur la création de votre premier formulaire.

Ajout de l’extrait de code

Utilisez l'extrait de code suivant pour activer la fonctionnalité de décompte en direct sur votre formulaire.

Personnalisation de l'extrait de code

Vous devrez mettre à jour les ID suivants dans l'extrait de code pour qu'ils correspondent à votre propre formulaire :

• wpforms-5410-field_1-container : Remplacez 5410 par l'ID réel de votre formulaire et field_1 par l'ID de votre champ répéteur.
• wpforms-5410-field_3 : Remplacez field_3 par l'ID de votre champ compteur.

Pour localiser les ID de votre formulaire et de vos champs, consultez ce tutoriel.

Une fois cet extrait de code ajouté et les ID mis à jour, le champ Compteur se mettra à jour automatiquement à mesure que les utilisateurs ajouteront ou supprimeront des lignes du répéteur.

Et voilà ! Vous avez maintenant ajouté un compteur dynamique à votre champ répéteur, offrant aux utilisateurs un aperçu clair du nombre d'entrées qu'ils ont effectuées.