Request to disable multiple clicks on send button

Hi everyone,

I’m facing an issue on my Webflow site. When a user clicks the “Contact” button in the header, a contact form opens in a pop-up, and that part works fine. However, after filling out the form and clicking the “Send” button, it’s possible to click the button multiple times before the request is fully processed. The support team then receives several duplicate e-mails.

I would like to disabled the “Send” button after the first click to prevent multiple submissions. Does anyone know how to implement this ?

Here is my site Read-Only: Webflow - SKEZI

Thanks in advance for your help! :blush:

Kelly

Are you doing a custom submit?

With Webflow forms it’s generally pretty fast, you get a “please wait” message while the form is processing.

If you’re submitting directly to a webhook, make scenario, etc, you’ll need to do your own. My typical approach is to build a custom submit button, with a nice animation state, and use JS to handle that pseudobutton-state switch plus trigger the actual form submission.

Hello,

Thank you for your response!

I’m using a standard Webflow form submission with a classic submit button. While I understand that Webflow forms generally process quickly and display a “please wait” message, I am currently experiencing issues with multiple submissions due to delays when submitting to an external URL in a popup.

The webflow support suggested to put some custom JavaScript to disable the “Send” button after the first click. This could involve:

Disabling the “Send” button immediately upon the first click to prevent multiple submissions.
Changing the button text to “Please wait…” to inform users that the form is being processed.
Keeping the button disabled until the submission is complete to avoid duplicate emails.

However, I don’t how to implement JavaScript on a button in Webflow. If you could provide guidance or point me to resources on how to do this, I would greatly appreciate it.

Thanks again for your help!

I build these kinds of solutions often for clients but it’s not quite as simple as tossing some code at you, it requires some testing and some decisions on how you want the button to appear, and re-activate ( if submission fails ).

^ This is the simplest and crudest approach that might work, but it is slightly risky since any form of submission failure, and the user won’t be able to retry without starting over.

Whether it works will depend on how Webflow’s implemented their handlers, i.e. whether it’s click based or form-submit-based.

Chat gpt is a good way to go if you want to try some ideas. Give the button an ID and you can work through some test scenarios fairly easily.