Listen for form submit with status feedback?

Design help General
1

I am listening for on submit with jquery to the form submission to track it with Google universal analytics events.

Is it possible without touching the webflow.js to listen if the submission was successful or got a error?

$(document).on("submit", "form", function(e){
	    var formID = $(this).attr('id');
	    
	    // Got hitCallback with fallback
	    ga('send', 'event', {
		    'eventCategory' : 'form',
		    'eventAction' : 'submission',
		    'eventLabel' : formID,
		    'eventValue' : 1,
		    'hitCallback' : function () {
		        console.log('Google Analytics received data.');
		    },
		    'hitCallbackFail' : function () {
		        alert("Unable to send Google Analytics data");    
		    }
		});

	});
2

Hi, are you trying to listen if the data was received to Webflow, or the event when the user submits the form? If you need a callback that alerts when data has been saved, there no callback for that. If you want to track when a user has submitted a form, then you can try this code to see if it works, I have not tried it yet for this purpose:

$( "#form_id" ).submit(function( event ) {
  
  var formID = $(this).attr('id');

	    // Got hitCallback with fallback
	    ga('send', 'event', {
		    'eventCategory' : 'form',
		    'eventAction' : 'submission',
		    'eventLabel' : formID,
		    'eventValue' : 1,
		    'hitCallback' : function () {
		        console.log('Google Analytics received data.');
		    },
		    'hitCallbackFail' : function () {
		        alert("Unable to send Google Analytics data");    
		    }
		});
  
});

Try that and see if you can track the submit. But default, Webflow handles the form submission, but you should be able to catch on to this event (I have to check it myself too).

I hope that helps. Let me know if this works or not.

As a side note, when a form is submitted to Webflow, the data should always save successfully.

3

I was getting errors with this when I had my tracking ID in the analytics settings in webflow.

I removed it there and then did this:

<script>
$(document).ready(function() {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)
    [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-xxxxxxxxxx-x', 'auto') ; 

    ga('send', 'pageview');

$( "#myformid" ).submit(function( event ) {
    
	    // Got hitCallback with fallback
	    ga('send', 'event', {
		    'eventCategory' : 'form',
		    'eventAction' : 'submission',
		    'eventLabel' : 'Lead Form',
		    'eventValue' : 'Form Submission',
		    'hitCallback' : function () {
		        console.log('Google Analytics received data.');
		    },
		    'hitCallbackFail' : function () {
		        alert("Unable to send Google Analytics data");    
		    }
	     });
    });
});

didn’t give me errors now, and I am checking to see if it registered in GA