Comment créer un compteur +/- dans un formulaire Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un compteur avec boutons + et - dans un formulaire Webflow avec Finsweet Attributes Form Counter.

1. Ajoutez le script dans le head

2. Créez la structure du compteur

Dans votre formulaire Webflow, ajoutez un Number Input avec l'attribut fs-counter-element="input". Créez deux boutons côte à côte : le bouton "+" avec fs-counter-element="increment" et le bouton "-" avec fs-counter-element="decrement". Groupez ces 3 éléments dans un même Div conteneur.

3. Définissez les limites

Sur le Number Input, ajoutez les attributs de contrôle : fs-counter-min="0" (valeur plancher), fs-counter-max="99" (valeur plafond), fs-counter-step="1" (incrément). Finsweet désactive automatiquement le bouton "-" quand la valeur atteint le minimum et le bouton "+" quand elle atteint le maximum.

4. Masquez le champ natif (optionnel)

Si vous ne voulez pas afficher le champ numérique natif (avec ses flèches de navigateur), masquez-le visuellement tout en le gardant dans le DOM pour la soumission du formulaire. Utilisez opacity: 0 avec position: absolute plutôt que display: none pour que la valeur soit bien soumise.

Conclusion

Le compteur Finsweet améliore l'UX des formulaires avec des champs numériques. Cas d'usage :

• Sélecteur de quantité sur un formulaire de commande
• Nombre de participants à un événement
• Sélecteur de durée (nombre de mois, de jours)