Default Webflow form success message from custom endpoint

We have our default webflow form successfully passing data to our own custom endpoint but we cannot figure out how to get it to return the default Webflow success message. We are always redirected to a new page. Has anyone had any luck getting this to work?

+1 on this. Having a similar problem. We keep getting redirected to the return message of our endpoint. Want to show success behavior.

I am no developer but I combined a couple recommendations from different answers I found on the forums and I came up with a solution. I added this to the pages “Before Body Tag” section. I believe it hijacks the forms default behavior without including a redirect - but again - I am by no means a developer.

<script>
makeWebflowFormAjax = function( forms, successCallback, errorCallback ) {
forms.each(function(){
	var form = $(this);
	form.on("submit", function(){
		var container = 	form.parent();
		var doneBlock  =	$(".w-form-done", container);
		var failBlock  =	$(".w-form-fail", container);
	
		var action = 		form.attr("action");
		var method = 		form.attr("method");
		var data = 			form.serialize();
		
		// call via ajax
		$.ajax({
			type: method,
			url: action,
			data: data,
			success: function (resultData) {
				if (typeof successCallback === 'function') {
					// call custom callback
					result = successCallback(resultData);
					if ( ! result ) {
						// show error (fail) block
						form.show();
						doneBlock.hide();
						failBlock.show();
						console.log(e);
						
						return;
					}
				}
				
				// show success (done) block
				form.hide();
				doneBlock.show();
				failBlock.hide();
			},

			error: function (e) {
				// call custom callback
				if (typeof errorCallback === 'function') {
					errorCallback(e)
				}
				
				// show error (fail) block
				form.show();
				doneBlock.hide();
				failBlock.show();
				console.log(e);
			}
		});
		
		// prevent default webdlow action
		return false;
	});
});
}

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

 // === Custom Form Handling ===

  // unbind webflow form handling
  $(document).off('submit');
  makeWebflowFormAjax( $("form") );

  // new form handling
  $('form').submit(function(evt) {
    evt.preventDefault();
  });
});
</script>
3 Likes