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