Skip to content

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. Basin Webflow App/Designer Extension: The easiest way to integrate Webflow forms with Basin. (recommended)
  2. Manual installation with Basin JS: Javascript library for AJAX form submission, captchas, rendering alerts, and redirects
  3. Basic manual 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.

Basin Webflow App/Designer Extension

Install in Webflow

Install the Basin Webflow App/Designer Extension to easily integrate Webflow forms with Basin.

  1. Install the Extension: Connect your Basin account to Webflow, or create a new Basin account from the extension.
  2. Create or select the Basin form: In the webflow designer, create or select the Basin form you'd like to connect to your Webflow site.
  3. (Optional) Select your captcha solution and successful form submission settings: Basin supports reCAPTCHA and hCaptcha out of the box. You can also use your own custom captcha solution.
  4. Select the Webflow form element: Select the Webflow form element you'd like to connect to your Basin form and click the "Connect to Basin" button. The app will handle the rest.

Form element selection

If your page only has one form, the Basin Webflow App/Designer Extension will automatically select the form element for you. If you have multiple form elements on a page, you must select the form element you'd like to connect, the form must be selected and not the form-wrapper.

App Demo

Manual installation via BasinJS

Manual intallation

This method is not recommended for most users. It requires a bit more setup and is not as user friendly as the Basin Webflow App/Designer Extension.

Basic integration

Manual intallation

This method is not recommended for most users. It requires a bit more setup and is not as user friendly as the Basin Webflow App/Designer Extension.

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.

Step 1: Include the Basin JS script

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

<script src="https://js.usebasin.com/v2.5.0.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.

Additional Configuration Recommended

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

Optional: Support for Webflow Collections

You can now leverage Webflow Collections by adding a placeholder to to your form action.

  1. Make sure to include the latest version of Basin JS (>= 2.1.0) (see Step 1)
  2. Add the data-basin-endpoint as a data attribute to your form, and give it the value of your collection. This can be the endpoint ID of the form, or the entire URL of the endpoint. Recommendation: keep it simple and use the endpoint ID.

Here is an example of the markup that would be generated:

<form action="https://usebasin.com/f/<some_default_form_endpoint_id>" method="POST" data-basin-endpoint="[your.collection.reference_containing_the_form_endpoint_id]">