Webflow Integration

Create a bridge between your Webflow forms and Basin's database for a seamless submission experience.

Collecting submissions in Webflow on exported sites

If you’re wanting to use the built-in Webflow form element on a site you’ve exported, you simply need to adjust your Webflow form settings to connect to Basin for submission handling.

There are 3 ways to integrate a webflow form with Basin:

  1. Basic integration
  2. Basin JS: AJAX integration with reCAPTCHA (BETA)
  3. Custom jQuery integration

Basic integration

Copy/paste the Basin endpoint URL you want Webflow to use for submission handling. Then, log in to Webflow and access the form settings page. Paste the endpoint URL into the action field, and make sure that the method is set to POST.

Once you make these changes, you can publish/export your Webflow site code and your form will send all submission data to Basin.

Basin JS AJAX integration with reCAPTCHA v2 (BETA)

Basin has a Javascript script that will:

  1. Submit your form to Basin via AJAX
  2. Display a success or error div. It supports Webflows native form interactions (success and error messages)
  3. Add invisible reCAPTCHA v2

All you need to do is include our script, add the "data-basin-form" attribute to your form, and Basin will take care of the rest.

Step 1: Include the Basin JS script

Paste the following code into your Webflow site's Pages -> Project Settings > Before tag.

HTML
<script src="https://js.usebasin.com/v1.min.js" async></script>

Step 2: Update the form settings

  1. Go to the page with the form.
  2. Select the form you want to point to Basin.
  3. Click on the settings icon in the top right corner.
  4. Change the "Action" to the URL you copied from your Basin form settings.
  5. Change the "Method" to "POST".
  6. Under "Custom Attributes", click the "+" button to add a new attribute. Set the name to "data-basin-form", and the value to "true". This will tell the Basin JS script to handle this form submission.
  7. Save the form settings.
  8. Publish your site and test.

Please see the Basin JS Docs for more configuration options and details.

Custom jQuery integration

If you want more control over the AJAX form submission process and prefer using jQuery, you can use the following code.

Paste the following code into your Webflow site's Project Settings > Custom Code > Footer Code. This code will identify any form on your site posting to Basin and submit it via AJAX instead, including the error and success messages.

HTML + JS
<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>

Big thanks to Joe Hohman for taking the time to put this solution together!