This code allows you to use your own Ajax form actions instaed of webflow default actions.
This code shows webflow Success and Fail Blocks after action. Also provides custom callbacks for Success response and Error response.
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;
});
});
}
To use this ajax action on all forms on the page:
makeWebflowFormAjax( $("forms") );
To use this ajax action on specific form with id formID:
makeWebflowFormAjax( $("#formID") );
URL should me set in Form “Action” parameter in Webdlow page editor.