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.
Main code (with function declare) can be place anywhere on the page. If you plan to use this code on all pages the best way is to put it in Embed element and include this block into symbol that is part of all pages (like header or footer). If you plan to use it on specific page you can put it into “Before tag” on page settings panel.
Second code (call of makeWebdflowFormAjax() function) should be anywhere too. But, it uses jQuery library which is loaded after all page content. This code should be after that, but it is imposible in Webflow. So the best way is to include it into “Before tag” on page setting panel. But if you plan to use this code for all pages (for example for contact form) you can place this code into Embed object too with a trick: call function in setTimeout. So this code will work even it is placed before jQuery declaration.
Thanks @victornikitin. The code works great. I do have one follow-up question.
After the ajax post, is there a way to call the “normal/default” Webflow action for a form so that the form is also inserted into the “Forms” section of the Editor? We are posting our form to our own external API but would like for the form submission and fields to also flow into the normal Webflow forms section so the end user can see the form submissions.
Hi @manrysj, that is not yet possible if you are using POST as the form method with a custom Action URL.
It is possible to save forms in Webflow and a third party service if you use Zapier: Zapier Integration | Webflow University, however I am not sure how that will work with your custom code.
This is really cool! I’ve always just created my own form elements to get around the Webflow form success and error blocks because I don’t like how they persist and the form doesn’t reset.
It had never really occurred to me to target those success and failure elements by class name and manipulate them to do what I want. I’m all inspired to give this a go now. Great post!
Thanks for this great post!
After trying to get the forms working (and looking good) on exported sites I think this thread is the closest to the solution I am looking for.
So I placed this code in head code (under custom code for whole project):
<script type="text/javascript">
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;
});
});
}
</script>
And this I placed in the before section of the specific page with the form (index.html):
makeWebflowFormAjax( $(“forms”) );
Tried both with and without - both don’t work (it should be in right?)
In the form setting I do a post request to a webhook on Zapier. The request works and I get the reply from Zapier.
This reply is what I wish to avoid with this solution you suggested. Meaning I send the stuff to Zapier and then change the state of the form to Successful.
One issue I am still troubleshooting is the Recaptcha and the script.
Whether recaptcha is selected or not - the script will switch to Thank you message.
Hi
I have been trying to achieve the same thing. I’m using the same tektite method as you have used from another post and the posting works to a success page. Now I am trying to achieve the same without the redirection to the success page as you have in this post. However I still just get sent the success page!
I have pasted the main code into the head of the page via settings:
<script type="text/javascript">
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;
});
});
}
</script>
and then pasted the rest into the before body tag via settings:
So I added this script to my forms and it worked great! I went in and added Google’s invisible recaptcha v2 and the ajax inline message doesn’t work anymore. Forms are located here and here (at the end of the page).
Wow this looks great - is it possible to combine this functionality (sending data to aws lambda api) and this example of depicting data returned from a third party? Meaning - I’d love to post data to my api on aws, and return the data to webflow, styled using the technique like the one in the link?
I tried to follow this but the posted form is empty? I’m new to Javascript so not sure what might be going on. The form works fine if I don’t use this script and stick to the default Webflow behaviour.
