How to Create a +/- Counter in a Webflow Form with Finsweet

In this tutorial, Sandro, co-founder of Gemeos Webflow agency, shows you how to create a counter with + and - buttons in a Webflow form using Finsweet Attributes Form Counter.

1. Add the script to the head

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

2. Build the counter structure

In your Webflow form, add a Number Input with the fs-counter-element="input" attribute. Create two buttons side by side: the "+" button with fs-counter-element="increment" and the "-" button with fs-counter-element="decrement". Group these 3 elements inside the same Div container.

3. Set the limits

On the Number Input, add the control attributes: fs-counter-min="0" (minimum value), fs-counter-max="99" (maximum value), fs-counter-step="1" (increment). Finsweet automatically disables the "-" button when the value reaches the minimum and the "+" button when it reaches the maximum.

4. Hide the native field (optional)

If you don't want to display the native number field (with its browser arrows), hide it visually while keeping it in the DOM for form submission. Use opacity: 0 with position: absolute instead of display: none so the value is properly submitted.

Conclusion

Finsweet Counter improves form UX for numeric fields. Use cases:

• Quantity selector on an order form
• Number of event attendees
• Duration selector (number of months, days)