Comment créer un compteur +/- dans un formulaire Webflow avec Finsweet ?
Apprenez à créer un compteur avec boutons + et - dans un formulaire Webflow avec Finsweet Attributes Form Counter.
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.
| Attribut | Élément | Valeur |
|---|---|---|
| fs-counter-element | Number Input | input |
| fs-counter-element | Bouton incrément (+) | increment |
| fs-counter-element | Bouton décrément (-) | decrement |
| fs-counter-min | Number Input | Valeur minimum (ex: 0) |
| fs-counter-max | Number Input | Valeur maximum (ex: 99) |
| fs-counter-step | Number Input | Pas d'incrément (ex: 1) |
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)
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
