Skip to content

Basin JS (v2)

v1 docs

The easiest way to add spam protection and redirect or render alerts on your forms

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 div or redirecting after the form has been submitted and displaying an error div if submission fails. It supports Webflow\'s native form interactions (success and error messages) out of the box.

  3. Adding an invisible captcha of your choice to prevent spam

    • ReCAPTCHA
    • hCaptcha
    • Cloudflare Turnstile

All you need to do is include the Basin JS script, add the data-basin-form attribute to your form element, and choose your spam protection option. 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/v2.0.1.min.js" async></script>
Basic example:
  1. Add <data-basin-form> to your form element as well as data-basin-success-action="render" to render a div on success.
  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. Choose a spam protection option with "data-basin-spam-protection" in your form element. Eg. data-basin-spam-protection='recaptcha'
  5. Enable spam protection in your form spam settings by going to your form -> Settings -> Spam. Eg for ReCAPTCHA:

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 data-basin-success-action='render' data-basin-spam-protection='recaptcha'>
    <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 data-basin-success-id="form1-success" data-basin-error-id="form1-error" data-basin-success-action='render' data-basin-spam-protection='recaptcha'>
    <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 Values Description
data-basin-success-action 'render', 'redirect' The action to take after a successful form submission, can be 'render' to render a success div or 'redirect ' to follow the redirect url specified in the form settings. (form -> Settings -> General -> Custom Redirect). By default, 'render' is chosen and a div will be rendered.
data-basin-spam-protection 'recaptcha', 'hcaptcha', 'turnstile', 'none' The spam protection option Basin will use for the form. By default, 'none' is selected. The chosen spam protection option must be enabled in your form's settings (form -> Settings -> Spam). For more information on setting up your desired spam protection option see our docs on Spam Filtering
data-basin-success-id Any valid HTML 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.
data-basin-error-id Any valid HTML 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.
data-basin-turnstile-sitekey Your turnstile sitekey The sitekey provided by cloudflare during turnstile setup. This should also be configured in your form's settings (form -> Settings -> Spam). For more information on setting up turnstile, see our docs on Spam Filtering

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 your spam protection option in your form spam settings (see above).