Streaming live at 10am (PST)

Form submissions to third-party service with native interactions

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.

  1. Set-up a Basin (usebasin.com) account and make a form. Get the form’s URL endpoint from Basin’s site. It will look something like this: https://usebasin.com/f/xxxxxxxxxxxxx

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.

  1. In Webflow, set the form’s Action parameter to the URL you got in step 1 and set the Method to POST.

  2. 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>
    

Hope you find this helpful!

23 Likes

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.

3 Likes

Thank you so much! This is very nice and easy to setup.

1 Like

Thanks~!!! This is definitely a life saver! :grin::grin::grin:

1 Like

Thanks so much!
It works on the webflow publish.
I’ll try it on the exported site in a mo.

:-))

1 Like

@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 ?

thanks for sharing with the community.

1 Like

Hi @Richard_Hennessey_II,

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: https://api.jquery.com/serialize/

Thanks,
Joe

1 Like

Thank you @Joe_Hohman!! works like a charm! high 5 :raised_hand_with_fingers_splayed:

1 Like

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.

This is the preview site:
https://argweb.webflow.io/contact

This is my sandbox that consists of just a web form:
http://argshowcase.webflow.io/

1 Like

@ARGSurveyService - Looks like you are running the custom code twice. Are you loading it on the page, and in site settings?

1 Like

How about getform.io?
I couldn’t disable the redirection.
Any help, please?

1 Like

Hi @Joe_Hohman

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.

This is the form - https://ronanconway.webflow.io/form#get-in-touch

Thanks in advance (whether you do or don’t help!)

Diarmuid

1 Like

Hi Diarmuid,

I took a quick look at the page you provided (and sent over a few test submissions :grimacing:). 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.

Thanks,
Joe

1 Like

Nice - it worked! :grinning:

Thank you very very much @Joe_Hohman for your time and help - it’s very generous of you.

And sorry for not getting back to you sooner - I was on holidays!

1 Like

Hi @Joe_Hohman ,

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?

Thanks in advance,

Diarmuid

1 Like

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 :smile: Thank you for any suggestion!

1 Like

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>
1 Like

Ok, cool! Thanks for the tip!
Well, I am using a redirect page, so there should be a different workaround maybe to get the data-wait feature work? :slight_smile:

1 Like

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.

Thanks

1 Like

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.

@jellybear This might be relevant to you

Jsfiddle with script - https://jsfiddle.net/diarmuids/w4ve3zsa/ (this is the same as below)

 <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>
1 Like