Custom Form Button

A fully styleable Webflow form submit button with custom loading state animation or content.
1. Copy & Paste Elements
2. Instructions
3. Accessibility
4. FAQ

Copy & Paste Elements

Form Submit Button 1

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

Form Submit Button 2

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
Important: 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.
Form Button
I want this Custom Element to be the form button
Attribute name
=
Attribute value

The formbutton element must be a "Custom Element" with the tag set to "button" and the type attribute set to "submit":

Freeze width
This attribute freezes the min-width of the button
Attribute name
=
Attribute value

This attribute is optional

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

By default, the Inputflow Library freezes the minimum width of all custom form buttons after page load. This prevents the button width from changing if the loading state is narrower than the normal state.

To disable this functionality, set the attribute to "false". If you want to keep this functionality, you don't need to add the attribute, as it is enabled by default.

Important: If you are unsure whether or not you need this setting, you most likely do not need it.

Waiting state
I want these elements to be shown during form submission
Attribute name
=
Attribute value

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

Elements with this attribute (and their children) will only be shown during form submission, after the submit button is clicked. For example, you could add this attribute to a loading animation or loading text element.

Display property
When showing the element set this display property
Attribute name
=
Attribute value

This attribute is optional

Add this settings attribute to any of the if-lib="formbutton-waiting-state" elements.

If your waiting state(s) are set to "display: none" on page load, they will change to "display: block" during form submission. To use a different display value, specify it with this attribute.

If your waiting state(s) are visible on page load, the Inputflow Library will automatically detect and store the display value before hiding the element. Then, during form submission, it will use the stored display value to show it.

Normal state
I want these elements to be shown before / after form submission
Attribute name
=
Attribute value

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

All elements inside the custom form button with this attribute (and their children) will be shown before and after form submission. This is the normal state and how the button will look most of the time, except during form submission, until the submission is finished.

Always state
I want these elements to always be shown
No additional attribute required

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

"If you do not add the if-lib="formbutton-normal-state" or if-lib="formbutton-waiting-state" attributes to an element inside of the button, then this element will always be visible—before, during, and after form submission.

Accessibility

Screen Reader
The slider component uses slider role on the handle in addition to the aria-valuemin, aria-valuemax, aria-valuenow and aria-label attributes.

Keyboard Support

The following keyboard controls are availble for this component:
Key
Function
tab
Moves focus to the next input / button
shift + tab
Moves focus to the previous input / button
space
enter
Clicks the button, if the button 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 [email protected] 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 [email protected]. 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 [email protected] 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 [email protected]. 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