Skip to content

Basin JS (v1)

v2 docs

A no code way to collect form submissions data (leads) with ease while taking full control of the front-end experience.

Why Basin JS?

  1. Allow customers to submit multiple forms without leaving the page
  2. Protect your form submission data from spam
  3. No code required

Basin JS automates the process by:

  1. Submitting your form to Basin via AJAX
  2. Displaying a success or error div after the form has been submitted. It supports Webflow\'s native form interactions (success and error messages) out of the box.
  3. Adding invisible reCAPTCHA v2 to prevent spam

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

Adapt your form

Include the Basin JS script:

Paste the example code below anywhere before the </body> tag:

<script src="https://js.usebasin.com/v1.min.js" async></script>
Basic example:
  1. Add <data-basin-form> to your form element
  2. Add a div with a class of "w-form-done" somewhere on your page. <div class="w-form-done">Success content here</div>
  3. Add a div with a class of \"w-form-fail\" somewhere on your page. <div class="w-form-fail">Failure content here</div>
  4. Enable Google reCAPTCHA in your form spam settings by going to your form -> Settings -> Spam:

GIF showing how to enable Google reCAPTCHA in your form spam settings

Your form should look similar to this:

<div class="container">
  <form action="https://usebasin.com/f/YOUR-FORM-ID" method="POST" enctype="multipart/form-data" data-basin-form>
    <label for="email">Email</label>
    <input type="text" id="email" name="email" placeholder="email.." required>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
    <label for="theFile">file data:</label>
    <input id="theFile" name="myFile" type="file">
    <input type="submit" value="Submit">
  </form>
  <div class="w-form-done" style="display: none;">Thank you for your submission! 🚀🚀🚀</div>
  <div class="w-form-fail" style="display: none;">Oops, something went wrong 🚨🚨🚨</div>
</div>
Advanced Basin JS example:

Here is an advanced form example using Basin JS where you can specify the success and fail div IDs:

<div class="container">
  <form action="https://usebasin.com/f/YOUR-FORM-ID" method="POST" enctype="multipart/form-data" data-basin-form basin-success-id="form1-success" basin-error-id="form1-error">
    <label for="email">Email</label>
    <input type="text" id="email" name="email" placeholder="email.." required>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
    <label for="theFile">file data:</label>
    <input id="theFile" name="myFile" type="file">
    <input type="submit" value="Submit">
  </form>
  <div id="form1-success" style="display: none;">Thank you for your submission! 🚀🚀🚀</div>
  <div id="form1-error" style="display: none;">Oops, something went wrong 🚨🚨🚨</div>
</div>

Configuration options

The Basin JS helper script can be provided the following options as attributes on the form:

Form Attribute Description
basin-success-id The ID of the element that should be displayed when the form submission is successful. This div should be hidden by default. If no ID is provided, the default success message will be displayed in the first div with a class of ".w-form-done" to support Webflow out of the box.
basin-error-id The ID of the element to display on error. This div should be hidden by default. If no ID is provided, the default success message will be displayed in the first div with a class of ".w-form-fail" to support Webflow out of the box.

Other special notes:

  1. If no basin-success-id or basin-error-id is provided, the script will look for the default Webflow success (a div with a class of ".w-form-done") and error divs (with a class of ".w-form-fail").
  2. This script supports multiple forms on the same page. However, you should then specify the "basin-success-id" and "basin-error-id" for each form.
  3. Basin JS allows you to style the Google reCAPTCHA logo container by adding a class of "basin-recaptcha-v2-container" to the div.
  4. Make sure to enable Google reCAPTCHA in your form spam settings (see above).