Framer Integration

Route your Framer forms through Basin for robust spam filtering, submission storage, and integrations.

Framer includes basic built-in spam protection, but it can still be bypassed — especially by human spammers or more advanced scripts. Framer doesn't offer native reCAPTCHA or Turnstile support (though third-party marketplace components exist for both). Basin sits in front of your form submissions as a dedicated filtering and routing layer, giving you submission storage, notifications, integrations, and far more spam control without changing your Framer design.

There are two ways to integrate Basin with Framer:

BasinJS (recommended) — add a script tag and a data attribute, no markup changes needed
Plain HTML form — embed a custom HTML form via Framer's Embed component

Option 1: BasinJS (Recommended)

BasinJS handles form submission, spam protection, and success/error states without requiring you to manage raw HTML form markup in Framer.

Step 1: Add the BasinJS script

In your Framer project, go to Site Settings → General → Custom Code and paste the following into the End of <head> tag field:

<script src="https://js.usebasin.com/v2.10.1.min.js" defer></script>

Step 2: Configure your Framer form element

On your form element, set the following attributes (Framer lets you add custom HTML attributes in the element's properties panel):

Attribute	Value
`action`	Your Basin endpoint URL, e.g. `https://usebasin.com/f/YOUR_FORM_ID`
`method`	`POST`
`data-basin-form`	`true`

Step 3: (Optional) Enable spam protection

Add the data-basin-spam-protection attribute to your form element with one of the following values:

Value	CAPTCHA Type
`recaptcha`	Google reCAPTCHA v2
`recaptcha-v3`	Google reCAPTCHA v3 (invisible)
`turnstile`	Cloudflare Turnstile
`hcaptcha`	hCaptcha

Also enable in Basin dashboard

The chosen CAPTCHA must also be enabled in your Basin form settings under Form → Settings → Spam, otherwise it will have no effect.

Tip

See the BasinJS docs for the full list of configuration options, including custom success messages and redirect behaviour.

Option 2: Plain HTML Form (Embed Component)

If you prefer full control over markup, use Framer's Embed component to drop in a raw HTML form.

Step 1: Add an Embed component

In Framer, add an Embed component to your page and switch it to HTML mode.

Step 2: Paste your form

<form action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
  <label>Name</label>
  <input type="text" name="name" required />

  <label>Email</label>
  <input type="email" name="email" required />

  <label>Message</label>
  <textarea name="message" required></textarea>

  <!-- Honeypot field: hidden from users, traps simple bots -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />

  <button type="submit">Submit</button>
</form>

Replace YOUR_FORM_ID with your actual Basin form ID. The _gotcha honeypot field is automatically detected by Basin — no configuration needed.

Styling

The Embed component renders inside an iframe, so Framer's global styles won't apply to the form. Add inline styles or a <style> block within the embed to match your site's design.

Spam Protection

Framer's built-in spam filtering can be bypassed by sophisticated bots and human spammers. Basin provides multiple additional layers:

SpamCheck.ai — runs automatically on every submission with no configuration needed, analysing content and IP reputation
IP blocklists — block known spam IP ranges
Content filters — block submissions containing specific keywords or patterns
Email validation — syntax, domain, and MX record checks
CAPTCHA — reCAPTCHA, Cloudflare Turnstile, or hCaptcha (via BasinJS)

The IP blocklist and SpamCheck.ai run on every submission automatically. The rest are opt-in and configured in your Basin form dashboard under Spam Settings.

Notifications and Integrations

Once Framer forms are routed through Basin, you can connect them to your existing tools:

Email notifications — receive alerts for every new submission
Slack — post submissions to a channel
Google Sheets — append submissions to a spreadsheet automatically
Webhooks — forward submissions to any endpoint
Zapier / Make / Integrately — connect to thousands of other apps

BasinJS — full BasinJS configuration reference
Spam Protection Overview — all available spam controls
Webhooks — forward submissions to other services
HTML Form Backend — how Basin receives plain HTML form submissions