Capturing Form Success/Fail Event

Hey! Oh it’s good to be back here ;)

I have to have a form refreshed after it’s sent. Let’s say after 3 seconds. So the situation looks like this:

  1. user type something on form
  2. user hit submit
  3. user get success/fail message
  4. after 3 seconds form is refreshed (or any of my scripts are run)

I’ve tried using an onclick="setTimeout(function() { refreshform() }, 3000); while the refreshform() function looks like this:

function refreshform() {
	$('#wf-form--2').css('display: block;');
	$('.w-form-done').css('display: none;');
	$('.w-form-fail').css('display: none;');
}

just so I could get back to the form inputs again. It didn’t work, so I tried using $('hitsubmit').click(); to setTimeout once the submit is clicked, but the event ran before the success message appeared causing it to overwrite my function.

Is there any way I could catch the “success/fail” event of the form? I need to have my form refreshed to its original state after a success message. I really need your help guys. Maybe @danro or @callmevlad could help me out with that? ;)

Take care!

Hey man, good to have you back :smile:

At the moment, we don’t generate any events on success/fail when the form AJAX request completes :\

Can you let me know more about your use case? E.g. would us adding a checkbox to the effect of “On success, don’t hide the form” do what you need?

Vlad, hey :)

Here is the situation: I have a website where you choose product from a list and you get a form in which you can order this product. The form is automatically adding a product name when you hit the button on product list. Now, the form popups up, you fill your name and phone number. Once you click the submit button you get the success message and you can close the form. You can then choose another product and you will get the same form popup again, but it contains the success message instead of the form itself…

In the meantime I got an idea which might work. I’ll simply change the form success/fail message and form’s display parameter once the button is clicked. That might work.

But… I still think there should be a way to reset forms or “catch” a success message somehow using my beloved jQuery. (You wish to see things I’ve recently did using Webflow and jQuery ^^). I tried to catch ajax:complete but with no luck.

Take care!

I agree. It would be nice for the form to refresh after it is sent as suggested above.

I use the following code on my Wordpress site running Contact Form 7. It will perform a slow fadeout of the “success” pop-up after 4 seconds then reset and clear the form.

on_sent_ok: “$(‘.wpcf7-mail-sent-ok’).ajaxComplete(function() {$(this).delay(4000).fadeOut(‘slow’);});”

Hope this code may provide you some ideas on how we can implement into Webflow.

Many thanks!!

I’ve used a method to change form display parameter and success/fail message parameter once the open-form button is clicked.

$('#wf-form--7').css('display', 'block');
$('.w-form-done').css('display', 'none');
$('.w-form-fail').css('display', 'none');

You just need to remember to change the form number (#wf-form--X) to the proper one.

Any news on this? I’d also like to disable form states rather than re-building the state for each form.