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 v2
    • ReCAPTCHA v3
    • 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.

Note: The main difference between ReCAPTCHA v2 and v3 is that v3 will never prompt or interrupt the user. For more information, visit the ReCAPTCHA versions documentation.

Adapt your form

1. Include the Basin JS script:

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

<script src="https://js.usebasin.com/v2.1.0.min.js" async></script>

Note

This script is the only script you need to include in your page to use Basin JS. It will automatically include the necessary scripts for the spam protection option you choose.

2. Add data attributes to your form as follows:

  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:

GIF showing how to enable Google Recaptcha on your form

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 Default Description
data-basin-success-action 'render', 'redirect' 'render' 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', 'recaptcha-v3', 'hcaptcha', 'turnstile', 'none' '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 '.w-form-done' 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 '.w-form-fail' 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 N/A 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"). This is to support Webflow out of the box but can be overridden to support any other platform.
  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. Additionally, all forms on the same page must use the same spam protection option.
  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).

Changelog

Version 2.1.0

Added

  • Added support for Webflow Collections
  • Added helpful console.log if data-basin-form is added outside of a <form> tag.

Version 2.0.3

Fixed

  • Gracefully handle scenarios where forms are not present on a page.

Version 2.0.2

Added

  • Recaptcha v3 support has been added.

Version 2.0.1

Fixed

  • Redirects now utilize Basin's JSON api. Previously, the system was trying to catch the redirect header response from the server, which is not feasible with CORS.

Version 2.0.0

Added

  • Support for recaptcha v2, hCaptcha, and Cloudflare Turnstile has been added.
  • Support for multiple forms on the same page has been added.
  • Support for custom success and error div IDs has been added.
  • Support for redirecting after form submission has been added.

Version 1.0.0

Added

  • This version supports invisible ReCAPTCHA v2, ajax form submission, and success/error divs.