Successful form submission - javascript event

Design help Custom code
1

Hey Webflow folks! I’m currently looking for a JS solution to catch successful form submissions to then redirect to a custom link (in this case I’m carrying query params). I’ve seen a couple of threads which skirt around the issue but Webflow’s implementation appears to have changed recently, blocking some of the older methods used.

I’ve been able to get timeouts to work after initial submission by using the following code (please forgive the params bit):

var Webflow = Webflow || [];
Webflow.push(function () {

$('form').submit(function (event) {
setTimeout(function() {
var url = window.location.search;
var $params = url.split("?")[1];
window.location.href = "{URL HERE}"+$params;
}, 1000);
})});

One thread mentions using AjaxComplete, but this doesn’t seem to work (if anybody has a working example with AjaxComplete that would be amazing). I’m specifically looking for a success event here, since with the timeout implementation a user could fail to submit yet still be redirected (I’m imagining that all of my users live in a rainforest with poor internet).

Thanks for the help in advance! (I haven’t included a share link for now since there aren’t any selected elements in it. If anybody would like it anyway please feel free to ask!)

2

@Jack_Howell - I don’t think Webflow provides any default callbacks for successful form submissions. But, you might be able to trigger your code to fire when the default success message block is shown (ie when a css property change is detected on the success block.

I believe the element has the w-form-done class on it.

Does that help at all?

3

The ajaxComplete seems to work fine for me.
btw, you can test a failed case by disconnecting your wifi before submit.

<script>
$(document).ajaxComplete(function( event, xhr, settings ) {
    if(settings.url.includes("https://webflow.com/api/v1/form/")){
        const isSuccessful = xhr.status === 200
        const redirectFormName = "redirect-form-hehexd"
        const isRedirectForm = settings.data.includes(redirectFormName);
        console.log(isSuccessful)           
        console.log(isRedirectForm)        
      	if(isRedirectForm && isSuccessful){
					window.location = 'https://discourse.webflow.com/t/successful-form-submission-javascript-event/179645'
				}else if(!isRedirectForm){
					alert(isSuccessful? "success" : "fail")
				}
        
    }
  });
</script>

Read only
Demo

4

Thanks both so much! I’ve managed to get it running with AjaxComplete now. For whatever reason jQuery had to be loaded async in the head tag rather than before body :thinking:. All fixed now!

5

Why did you load more Jquery? Webflow already has Jquery by default.

I think AjaxComplete is not working previously because you reinitialize a Jquery instance by loading Jquery.

6

Aha! For whatever reason I’d had an issue ages ago where JQuery didn’t seem to load hence I’d been loading it manually since. Removed and it worked! Thank you!

7

Hi, I’m trying to get it to work.
Just to clarify, the only thing to change is the form name and the “location” URL?

Also, the form name is the one from the main form block or the one below?

8 
<script>
    const formSubmitEvent = (function () {
        const init = ({
            onlyWorkOnThisFormName,
            onSuccess,
            onFail
        }) => {
            $(document).ajaxComplete(function (event, xhr, settings) {
                if (settings.url.includes("https://webflow.com/api/v1/form/")) {
                    const isSuccessful = xhr.status === 200
                    const isWorkOnAllForm = onlyWorkOnThisFormName == undefined
                    const isCorrectForm = !isWorkOnAllForm && settings.data.includes(getSanitizedFormName(onlyWorkOnThisFormName));

                    if(isWorkOnAllForm){
                        if(isSuccessful){
                            onSuccess()
                        }else{
                            onFail()
                        }
                    }else if(isCorrectForm ){
                        if(isSuccessful){
                        onSuccess()
                        }else{
                            onFail()
                        }
                    }
                }
            });
        }
        function getSanitizedFormName(name) {
            return name.replaceAll(" ","+")
        }
        return {
            init
        }
    })()


    // Btw you can call this function (formSubmitEvent.init()) multiple time 

    // Example 1
    // 
    formSubmitEvent.init({
        onlyWorkOnThisFormName : "Email Form",
        onSuccess: () => {
            alert("A form with this name 'Email Form' is : Success")
        },
        onFail : ()=>{
            alert("A form with this name 'Email Form' is :  Fail");
        }
    })


    // Example 2
    formSubmitEvent.init({
        onlyWorkOnThisFormName : "SOME FORM NAME",
        onSuccess: () => {
            alert("A form with this name 'SOME FORM NAME' is : Success")

            const redirectURL = 'https://discourse.webflow.com/t/successful-form-submission-javascript-event/179645'
            window.location = redirectURL
        },
        onFail : ()=>{
            alert("A form with this name 'SOME FORM NAME' is : Fail");
        }
    })
    // Example 3
    formSubmitEvent.init({
        onSuccess: () => {
            alert("Work on every form : Success")
        },
        onFail : ()=>{
            alert("Work on every form : FAIL");
        }
    })
</script>

image
image1856×787 62.5 KB

This should be easier to use.

2 Likes
9

Thank you so much. It’s solved my problem.