Third Party Form Service - Disable Submit Button & Show Waiting Text

Community resources Webflow Tips
1

Below is the code to disable the submit button while the form is submitting to prevent multiple submissions when using a third party service (i.e. NOT Webflow - as these can sometimes be slow to load)

It also gets the “Waiting Text” - i.e. “Sending…” from the Submit Button in Webflow and displays it while the form is submitting.

image

<script>
  // DISABLE THE SUBMIT BUTTON ONCE A FORM HAS BEEN SUBMITTED
  $("#wf-form-Job-Application").submit(function (e) {
    $(e.target).find('input[type=submit]').attr("disabled", true);
    var dataWait = $(e.target).find('input[type=submit]').attr("data-wait");	
    $(e.target).find('input[type=submit]').attr("value", dataWait);	
    return true;
  });
</script>
2 Likes
2

Thanks @Diarmuid_Sexton ! Works like a charm. Great solution that works with Usebasin and redirect page. :smile: :clap:

3

Hey @Diarmuid_Sexton I must be a complete noob because I can’t get your script to work. Mind taking a look and tell me what I’m doing wrong? https://readtldr.gg/home-v2

4

Try follow the guides here.

Have you a UseBasin account set up?

5

Thanks for sharing the guide.

I’ve integrated with a form from ActiveCampaign (email service provider). I swapped the UseBasin URL to ActiveCampaign in your script but unfortunately I still cannot seem to make it work.

Here’s my form: https://preview.webflow.com/preview/tldr?utm_medium=preview_link&utm_source=designer&utm_content=tldr&preview=5e1f24e27f00450d17825efce6e8a223&pageId=61367dec8d9826066b807dd3&workflow=preview

6

Sorry man, I don’t have time to look into your issue.

Keep playing around with it - you’ll figure it out.

And good luck.

1 Like
7

no problem man, appreciate your contribution so far!

8

Hey Jacob - This is coming in a bit late (3 years later) but I had the same problem and fixed it by defining the submit button id and embedding it in the code shared by OP.

My button id is “submit-button” so I added that to the original code shared. Hope this helps!

<script>
$(document).ready(function() {
    $("#wf-form-Job-Application").submit(function(e) {
        var submitButton = $('#submit-button');
        var dataWait = submitButton.attr("data-wait");
        
        submitButton.attr("disabled", true);
        
        if(dataWait) {
            submitButton.val(dataWait);
        } else {
            submitButton.val("Please wait...");
        }
        
        return true;
    });
});
</script>
1 Like
9

Thank you this code worked for me!

I’m using FormSpark as my third-party and this was driving me nuts