Hey guys! Today I figured out a way to send form submissions to Basin (a 3rd-party form hosting service) using Webflow’s built-in tools without the need to redirect people to a thank you page. I thought I’d share this for anyone else trying to cope with Webflow no longer accepting form submissions from forms hosted outside of their environment.
If you follow these steps, your forms will work with Basin exactly as they did using the native Webflow form system, including the error and success messages.
Tip: Be sure the “Custom Redirect URL” setting is empty in Basin. If this option is on, the script breaks because Basin will redirect the script to the URL you set.
In Webflow, set the form’s Action parameter to the URL you got in step 1 and set the Method to POST.
Paste the code below into Project Settings > Custom Code > Footer Code. This code will identify any form on your site posting to Basin and submit it via AJAX instead.
<script type="text/javascript">
//apply only to forms with the action pointing to Basin
$('form[action^="https://usebasin.com"]').each(function(i,el){
form = $(el);
form.submit(function(e){
//stop the form from submitting
e.preventDefault();
form = $(e.target);
//get the form's action parameter and add ".json" to the end
action = form.attr('action') + '.json';
//submit the form via ajax
$.ajax({
url: action,
method: "POST",
data: form.serialize(),
dataType: "json",
success: function(data){
if(data.success){
//successful submission - hide the form and show the success message
parent = $(form.parent());
parent.children('form').css('display','none');
parent.children('.w-form-done').css('display','block');
} else {
//failed submission - log the output to the console and show the failure message
console.log(data);
parent.find('.w-form-fail').css('display','block');
}
},
error: function(){
//failed submission - show the failure message
parent.find('.w-form-fail').css('display','block');
}
});
});
});
</script>
Thanks! This is really helpful. Everything worked flawlessly.
I needed to add recaptcha as well. I followed the Webflow University steps. The form appeared to send out and it gave the success message but I didn’t receive anything. Next, I read through the Basin Steps for recaptcha integration. They list their own site key for use. So you have to go back into Webflow’s form settings and swap out the site key for theirs, then it works. I kept the original secret key.
@Joe_Hohman Hi , it seems that this mostly works for me. I have a name, email and message field in my form. It appears that the email and message data is passed into basin but not the name field . Can you help me understand your script so that i can pass that data ?
The code ought to just send all of the fields on your form. The “form.serialize()” line is what tells jQuery to package up all of your form fields into the request that gets sent to Basin. Here’s some info on the serialize() function that might be helpful in determining what’s going on: .serialize() | jQuery API Documentation
I tried following these directions, for a while my contact form was working, and then my form stopped working.
I started again:
Redirect line is blank, Action is set to my Basin endpoint, method is set to POST, I pasted the code into my Footer code.
When I publish the site and test the link, nothing happens when I click submit. I get neither the success nor error message.
I have a second form I had created in a project when I was testing Basin. It has also stopped working, so I am not sure if there was a change in Webflow or Basin that I missed, but I am stuck.
Thanks so much for this code - it seems to be working a dream for people. And I’m pretty sure I used it once before and it worked. However, (similar to @ARGSurveyService) I have done exactly as described and it’s not working.
If there’s any chance you could take a look, it’d be great. There are some errors showing in the console but I’m not quite sure what they mean.
I took a quick look at the page you provided (and sent over a few test submissions ). It looks like your Basin endpoint is redirecting to a success page. I think if you disable that feature in Basin, the script should work.
Me gain! I am trying to get this to work with a single file upload but no joy as of yet. It works when the regular redirect is setup but not with the script you wrote and the native Webflow form interactions.
Do you know how to get it working like this? Or have you tried before?
Do you guys have an experience with DATA-WAIT feature on submit button? Native solution from webflow does not work when submitting to 3rd party service. Does anybody know some workaround to get this little feature work?
Well the big issue is when the form is submitting data, it takes a lot of time (2-3 seconds) and when the data-wait option is not possible on the submit button, people are submitting more times because they dont even see that the form is doing something Thank you for any suggestion!
I think you could modify the code a bit to disable the submit button before the AJAX call. Maybe something like this. Note the $(e.target).find(‘button’).attr(“disabled”, true); and $(e.target).find(‘button’).attr(“disabled”, false); lines.
<script type="text/javascript">
//apply only to forms with the action pointing to Basin
$('form[action^="https://usebasin.com"]').each(function(i,el){
form = $(el);
form.submit(function(e){
//stop the form from submitting
e.preventDefault();
form = $(e.target);
//get the form's action parameter and add ".json" to the end
action = form.attr('action') + '.json';
//disable all buttons in form
$(e.target).find('button').attr("disabled", true);
//submit the form via ajax
$.ajax({
url: action,
method: "POST",
data: form.serialize(),
dataType: "json",
success: function(data){
if(data.success){
//successful submission - hide the form and show the success message
parent = $(form.parent());
parent.children('form').css('display','none');
parent.children('.w-form-done').css('display','block');
//enable all buttons in form
$(e.target).find('button').attr("disabled", false);
} else {
//failed submission - log the output to the console and show the failure message
console.log(data);
parent.find('.w-form-fail').css('display','block');
//enable all buttons in form
$(e.target).find('button').attr("disabled", false);
}
},
error: function(){
//failed submission - show the failure message
parent.find('.w-form-fail').css('display','block');
//enable all buttons in form
$(e.target).find('button').attr("disabled", false);
}
});
});
});
</script>
Hey guys, I have a question kind of unrelated to Webflow, but what are the limitations of the free plan in Basin? Its kind of frustrating as I can’t seem to find what the free plan includes until you need it and is half forced to upgrade the plan. I’d rather know if I need to upgrade or not before I decide on it.
The correct button in Webflow forms is ‘input[type=button]’ - so I’ve used @Joe_Hohman’s code and amended that to disable the submit button once the form is submitted.
I’ve also changed the value of the button to “Sending…” once the form is submitted - as there seems to be a second or two of lag when submitting to an external form handler.
<script>
//apply only to forms with the action pointing to Basin
$('form[action^="https://usebasin.com"]').each(function(i,el){
form = $(el);
form.submit(function(e){
//stop the form from submitting
e.preventDefault();
form = $(e.target);
//get the form's action parameter and add ".json" to the end
action = form.attr('action') + '.json';
//disable all buttons in form
$(e.target).find('input[type=submit]').attr("disabled", true);
$(e.target).find('input[type=submit]').attr("value", "Sending...");
//submit the form via ajax
$.ajax({
url: action,
method: "POST",
data: form.serialize(),
dataType: "json",
success: function(data){
if(data.success){
//successful submission - hide the form and show the success message
parent = $(form.parent());
parent.children('form').css('display','none');
parent.children('.w-form-done').css('display','block');
//enable all buttons in form
$(e.target).find('input[type=submit]').attr("disabled", false);
} else {
//failed submission - log the output to the console and show the failure message
console.log(data);
parent.find('.w-form-fail').css('display','block');
//enable all buttons in form
$(e.target).find('input[type=submit]').attr("disabled", false);
}
},
error: function(){
//failed submission - show the failure message
parent.find('.w-form-fail').css('display','block');
//enable all buttons in form
$(e.target).find('input[type=submit]').attr("disabled", false);
}
});
});
});
</script>
). It looks like your Basin endpoint is redirecting to a success page. I think if you disable that feature in Basin, the script should work.
Thank you for any suggestion!