Input Counter

A customizable and fully accessible input counter element for your Webflow forms. Works with native HTML number input attributes (min, max, step)
1. Copy & Paste Elements
2. Instructions
3. Accessibility
4. FAQ

Copy & Paste Elements

Input Counter

-
+
Copy
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Instructions

a. Copy & paste the Inputflow Library script
IMPORTANT: You only have to paste this once. If you have pasted this to your page before (because you used another element of the Inputflow Library) you do not need to add it again.
<script type="module" src="https://cdn.jsdelivr.net/gh/inputflow-tools/library@1/i.js"></script>
Copy Script
b. Add/modify the required attributes
MPORTANT: If you copied one of the elements above, the necessary attributes are already added. You can simply modify or change them as needed.

IMPORTANT: If you are uncertain about the structure of the elements, we recommend copying one of the elements from above and using it as a reference/starting point.
Input Counter Wrapper
I want this element to be the input counter wrapper
Attribute name
=
Attribute value

The input counter wrapper contains all elements of the input counter (plus button, minus button and number input).

Correct on blur
Correct the input value when input loses focus
Attribute name
=
Attribute value

Add this settings attribute to the if-lib="inputcounter" element.

HTML number inputs allow setting minimum and maximum values using 'min' and 'max' attributes.

However, users can still manually enter values outside these limits. This feature activates when the number input of the input counter loses focus (blur).

It checks if the entered value is within the specified range. If the entered value is higher than the maximum, it automatically sets the value to the maximum allowed.

If the entered value is below the minimum, it automatically sets the value to the minimum allowed. This ensures that the final value in the input always falls within the specified range, even after manual user entry.

Plus Button
I want this DIV block to be the plus button
Attribute name
=
Attribute value

This element must be nested inside the if-lib="inputcounter" element.

Minus Button
I want this DIV block to be the minus button
Attribute name
=
Attribute value

This element must be nested inside the if-lib="inputcounter" element.

Number Input
I want this input element to be the number input
No additional attribute required

This element must be nested inside the if-lib="inputcounter" element, and the input type must be set to "Number" in Webflow:

Min
Set the mimimum possible value
Attribute name
=
Attribute value

This attribute is optional

Add this attribute to the number input element.

Max
Set the maximum possible value
Attribute name
=
Attribute value

This attribute is optional

Add this attribute to the number input element.

Stepsize
Set the stepsize of the input counter
Attribute name
=
Attribute value

This attribute is optional

Add this attribute to the number input element.

Accessibility

Screen Reader
The slider component uses the button role on the plus and minus buttons in addition to the aria-controls and aria-label attributes.

Keyboard Support

The following keyboard controls are availble for this component:
Key
Function
tab
Moves focus to the next button / input element
shift + tab
Moves focus to the previous button / input element
space
enter
Clicks the button, if the button is focused
home
pos1
Sets the number input value value to the minimum value, if the input element is focused
end
Sets the number input value value to the maximum value, if the input element is focused

Frequent Questions

Is Inputflow free to use?

Inputflow has an unlimited free trial version, which you can use on your .webflow.io domains completely for free.

The idea is, that you can test out Inputflow with all its features, as long as you want, to see if it is a good fit for your project requirements.

Only once you want to use Inputflow on a custom domain, we ask you to upgrade to a paid plan.

I want to build XYZ. Can Inputflow do this?

If you are not sure, whether Inputflow covers your use-case or not, send your project details to hey@inputflow.io and we'll respond with a Loom video within 24 hours.

Where can I learn more about how Inputflow works?

We recommend that you check out the documentation, the 2-minute quick-start guide, and the video tutorial.

Can I really get my money back for any reason?

Yes. Any reason. We won't even ask why. Everyone on our team has done freelance or agency work in the past, so we get it. Whatever your reason, contact us within 30 days after your purchase and we'll give you a full refund, no questions asked.

Can I use Inputflow on client sites?

Yes, you can use it on your client projects or your own projects.

I have a problem and I need help!

Send an email to support@inputflow.io. Include the following: a read-only link and the link to the live website where the form is displayed. We take support very seriously and will make sure to resolve your issue quickly.

What if I exceed my submission limit? Will my form stop working?

Your forms will continue to work. We are definitely not shutting down your forms just because you get a lot of unexpected submissions. We will send you a friendly email, that it is time to upgrade to a higher plan.

Does Inputflow work with Wordpress?

No. Inputflow only works with Webflow.

How are submissions counted?

Whenever a form that you built with Inputflow is submitted, it counts as one submission. Submissions are counted at the account level. For example, if you have four different websites that each receive 200 submissions per month through Inputflow forms connected with your account, this counts as 800 submissions (4 * 200).

Does Inputflow bypass the Webflow submission limit?

Not by default. Every Inputflow form is a Webflow form. This means that when an Inputflow form is submitted, a standard Webflow form submission occurs in the background. This would count as one Inputflow submission and one Webflow submission.

However, with Inputflow, you have the option to submit your forms to custom webhooks (e.g., Zapier, Make, etc.). In that case, no native Webflow submission occurs, and it counts as only one Inputflow submission.

Is Inputflow free to use?

Inputflow has an unlimited free trial version, which you can use on your .webflow.io domains completely for free.

The idea is, that you can test out Inputflow with all its features, as long as you want, to see if it is a good fit for your project requirements.

Only once you want to use Inputflow on a custom domain, we ask you to upgrade to a paid plan.

I want to build XYZ. Can Inputflow do this?

If you are not sure, whether Inputflow covers your use-case or not, send your project details to hey@inputflow.io and we'll respond with a Loom video within 24 hours.

Where can I learn more about how Inputflow works?

We recommend that you check out the documentation, the 2-minute quick-start guide, and the video tutorial.

Can I really get my money back for any reason?

Yes. Any reason. We won't even ask why. Everyone on our team has done freelance or agency work in the past, so we get it. Whatever your reason, contact us within 30 days after your purchase and we'll give you a full refund, no questions asked.

Can I use Inputflow on client sites?

Yes, you can use it on your client projects or your own projects.

I have a problem and I need help!

Send an email to support@inputflow.io. Include the following: a read-only link and the link to the live website where the form is displayed. We take support very seriously and will make sure to resolve your issue quickly.

What if I exceed my submission limit? Will my form stop working?

Your forms will continue to work. We are definitely not shutting down your forms just because you get a lot of unexpected submissions. We will send you a friendly email, that it is time to upgrade to a higher plan.

Does Inputflow work with Wordpress?

No. Inputflow only works with Webflow.

How are submissions counted?

Whenever a form that you built with Inputflow is submitted, it counts as one submission. Submissions are counted at the account level. For example, if you have four different websites that each receive 200 submissions per month through Inputflow forms connected with your account, this counts as 800 submissions (4 * 200).

Does Inputflow bypass the Webflow submission limit?

Not by default. Every Inputflow form is a Webflow form. This means that when an Inputflow form is submitted, a standard Webflow form submission occurs in the background. This would count as one Inputflow submission and one Webflow submission.

However, with Inputflow, you have the option to submit your forms to custom webhooks (e.g., Zapier, Make, etc.). In that case, no native Webflow submission occurs, and it counts as only one Inputflow submission.

Start building your own multi-step form!

By clicking the button down below, you can start the form editor, and create a beautiful muli-step form in Webflow!
Install Webflow App