Basin JS

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 thedata-basin-formattribute 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:

HTML
<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>
HTML
<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:

HTML
<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 AttributeDescription
basin-success-idThe 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-idThe 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.