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

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

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-counter@1/counter.js" defer>script>

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)