Basin

Basin Forms gives every form a dedicated server-side endpoint that filters spam, accepts file attachments up to 100MB, and forwards payloads to external tools through webhooks with automatic retry logic. Basin JS, the companion library, targets .w-form-done and .w-form-fail by default, so your existing success and error states keep working without extra configuration.

This fits freelancers managing client contact forms, agencies centralizing form management across dozens of sites, and marketing teams routing leads to Salesforce, Google Sheets, or Slack. For exported Webflow sites, Basin restores full form functionality outside Webflow hosting.

How to integrate Basin with Webflow

What is Basin? Basin is a form backend service that generates unique endpoint URLs for HTML forms, handling submission collection, spam filtering, file storage, email notifications, and outbound integrations. It supports CAPTCHA providers (reCAPTCHA v2/v3, hCaptcha, Cloudflare Turnstile) and connects natively to Slack, Google Sheets, and Mailchimp.

Pair Basin with Webflow when you need form capabilities that go beyond basic submission storage. Common triggers include spam reaching client inboxes at volume, a requirement for file uploads on job application forms, or a need to guarantee that every submission reaches a CRM through retried webhooks. If you've exported a Webflow site to a platform like Netlify or Vercel, Basin is a documented way to restore form handling.

You can connect Basin to Webflow in three ways:

• The Basin Forms app connects Webflow forms to Basin endpoints without code changes. Start here — this is the recommended approach.
• Basin JS with manual configuration lets you add AJAX submission, CAPTCHA injection, and success/error handling through a script and custom attributes.
• Basic manual integration requires no JavaScript. Paste the Basin endpoint URL into the form's Action field and set the method to POST.

Most implementations combine two or more of these methods depending on the complexity of your setup.

Install the Basin Forms app

The Basin Forms app is the recommended starting point for connecting Webflow forms to Basin. Install it directly from the Webflow App Marketplace to handle endpoint configuration, CAPTCHA setup, and submission routing from inside the Designer. You can connect an existing Basin account or create a new one during installation.

To set up the integration:

1. Install the Basin Forms app from the Webflow App Marketplace listing and connect your Basin account.
2. Open the page containing your form, then create or select the form you want to connect.
3. Choose your CAPTCHA solution and configure your submission success settings (both optional).
4. Select the form element and click Connect to Basin.

The app handles these setup tasks inside the Designer:

• Form-to-endpoint routing without manual attribute editing
• CAPTCHA setup for reCAPTCHA or hCaptcha
• Submission routing from the selected form into Basin

Once connected, the app links your form to Basin from inside the Designer. Basin then provides the broader form-processing features:

• Server-side spam filtering after submissions reach the endpoint
• File uploads up to 100MB per submission
• Auto-response emails (Growth plan and above)

These capabilities cover the main reasons teams replace native form handling with Basin.

If you need more control over AJAX behavior, success/error rendering, or CMS-driven dynamic forms, the manual Basin JS method covers those cases.

Add Basin JS with manual configuration

Manual configuration gives you direct control over AJAX submission, CAPTCHA injection, and how success and error states render on the page. This method works on both Webflow-hosted and exported sites, and it supports dynamic forms on CMS-powered pages.

Set up Basin JS on a Webflow site

Basin JS is a client-side library that intercepts form submission and sends data to Basin via AJAX. It toggles .w-form-done or .w-form-fail elements automatically. Add the script once at the site level, then configure individual forms with custom attributes.

To add Basin JS:

1. Go to Site Settings and paste the Basin JS CDN script in the before </body> tag field. Grab the current script URL from the Basin JS documentation.
2. Open the page containing your form and select the form element.
3. Click the settings icon in the top right corner.
4. Set the Action field to the Basin endpoint URL copied from your Basin form dashboard.
5. Set the Method to POST.
6. Under Custom Attributes, click the + button. Set name to data-basin-form and value to true.
7. To enable spam protection, add another custom attribute: set name to data-basin-spam-protection and value to recaptcha, recaptcha-v3, hcaptcha, or turnstile. You'll also need to enable the same CAPTCHA type in Form > Settings > Spam in the Basin dashboard.
8. Publish the site and test.

Basin JS targets .w-form-done and .w-form-fail by default, so the native success and error message elements display without any extra code. Override these defaults with the data-basin-success-id and data-basin-error-id attributes if you need to target custom elements instead.

Connect forms on CMS-powered pages

Forms on dynamic Webflow CMS pages can pull their Basin endpoint from a CMS field, so each Collection List item routes to a different form. You'll need Basin JS version 2.1.0 or later for this.

To connect a CMS-driven form:

1. Add a text field to your CMS collection that stores the Basin endpoint ID or full endpoint URL.
2. On your form element, add a custom attribute with name data-basin-endpoint and bind the value to the CMS field containing the endpoint reference.
3. Keep data-basin-form set to true on the form element.

Each CMS item can now route form submissions to a different Basin endpoint. This pattern works well for directory sites, multi-location landing pages, or template pages where each entry has its own contact form.

Use the basic manual method without JavaScript

For forms that don't need AJAX submission or CAPTCHA injection, point the form's action attribute directly to Basin.

To connect a form without Basin JS:

1. Select the form element and open the Settings panel.
2. Remove any existing Webflow or Email notification destinations by clicking the delete icon next to each.
3. Click the add icon next to Send to and select Custom action.
4. Enter your Basin endpoint URL (format: https://usebasin.com/f/[your-endpoint-id]).
5. Set the Method to POST.
6. Click Save and publish.

Every <input> field in the form must have a name attribute defined, or Basin won't capture that field's data. With this method, the browser follows Basin's redirect response after submission, so users leave the page and land on Basin's default success page. Paid Basin plans support a custom redirect URL instead. The .w-form-done success state doesn't trigger with standard POST submissions, so if you want to keep users on the page and show the native success message, use Basin JS or the Basin Forms app instead.

Add file upload support

Native forms don't support file uploads. Basin accepts file attachments up to 100MB per submission when your form includes the correct encoding attributes.

To enable file uploads, add a Code Embed element inside your form and include the file input HTML directly:

<input type="file" name="resume">

For multiple file uploads from a single input, use:

<input type="file" name="attachments[]" multiple>

The form element itself needs two additional attributes: set enctype to multipart/form-data and accept-charset to UTF-8. Without these, uploads fail silently. Basin offers virus scanning for uploaded files on its Pro and Agency plans.

Build with the Webflow and Basin APIs

If you need to programmatically manage submissions, sync form data into the CMS, or build custom processing pipelines, the API path gives you direct control over each step. You'll need to do server-side development for this approach.

You'll use the Basin REST API, the Webflow Data API v2, and Basin webhooks.

• The Basin REST API handles submission retrieval, form management, and webhook configuration. You'll need a Growth plan or above, and it uses token-based authentication (Authorization: Token YOUR_API_KEY).
• The Webflow Data API v2 handles CMS collection reads and writes, including creating and publishing items.
• Basin webhooks trigger outbound POST requests on every new submission, with automatic retry up to 15 times over 24 to 28 hours.

Together, these three pieces cover form intake, downstream delivery, and CMS updates.

Basin provides two API key types: an Account API Key (scoped to all forms) and a Form API Key (scoped to a single form). Form API Keys come in handy for client projects where you want to limit access. You'll find the Account API Key at your Basin API settings page (usebasin.com/app/api_settings), and Form API Keys on each form's Integrations settings page.

Sync Basin submissions into the Webflow CMS

Basin webhooks can push submission data to a serverless function that creates CMS items automatically. This pattern works well for testimonials, event registrations, or any user-generated content you want to display on your site.

To implement this:

1. Create a webhook in your Basin form dashboard under Integrations > Webhooks. Set the payload format to JSON and point the URL at your serverless function endpoint.
2. In your function, parse the incoming Basin payload. Submitted field values appear as top-level keys in the JSON body (matching the name attributes from your form inputs).
3. Map Basin field names to your CMS collection field slugs. Use GET /v2/collections/{collection_id} from the Webflow CMS API to inspect the collection schema.
4. Create a live CMS item with POST /v2/collections/{collection_id}/items/live, passing the mapped data in the fieldData object. This publishes the item immediately without a separate publish step.

This flow turns each new Basin submission into a live CMS item as soon as your function processes it.

You'll need a Bearer token with CMS:write scope for the Data API. To create items in bulk, send up to 100 items per request via POST /v2/collections/{collection_id}/items/bulk.

Retrieve submissions from the Basin API

For batch processing, reporting, or backfilling data, you can pull submissions directly from Basin's API instead of relying on webhooks.

To retrieve submissions:

1. Send a GET request to https://usebasin.com/api/v1/forms/{FORM_ID}/submissions with your API key in the Authorization: Token YOUR_API_KEY header.
2. Filter by date using the created_after query parameter (ISO 8601 format, for example 2024-01-01T00:00:00Z).
3. Each submission object includes payload_params containing the submitted field values, along with metadata like ip, referrer, user_agent, spam, and attachments.

That gives you both the submitted form fields and the request metadata you need for reporting or downstream processing.

You can re-fire failed webhooks through the API using POST /api/v1/submissions/{id}/refire_webhooks for a single submission, or POST /api/v1/submissions/refire_webhooks with a submission_ids array for bulk re-fires. Both endpoints accept Account or Form API keys.

What can you build with the Basin Webflow integration?

Integrating Basin with Webflow lets you process form submissions through a dedicated backend without managing server infrastructure or writing custom form-handling code.

• Spam-free contact forms across a client portfolio: Replace native form handling on every client site with Basin endpoints that filter spam server-side. Basin's layered defense (CAPTCHA, honeypot, email validation, content filtering, country blocking) catches bot submissions that bypass frontend protections. One agency documented migrating approximately 50 client sites to Basin after native form spam became unmanageable.
• Job application pages with file uploads: Build career pages where applicants attach resumes, cover letters, and portfolios directly through your forms. Basin accepts files up to 100MB per submission, stores them with virus scanning on Pro and Agency plans, and includes secure attachment links in webhook payloads and Google Sheets exports.
• CMS-powered testimonial walls from form submissions: Set up a Basin webhook that fires on each new submission and calls the CMS API to create a live collection item. A visitor submits a testimonial through a form, and it appears on your site automatically without manual CMS entry.
• Multi-step lead qualification funnels: Collect leads across multi-step forms with Basin's Progressive Capture feature (Agency plan), which tracks completion rates, saves incomplete submissions, and sends abandoned form follow-up emails. You'll see step-by-step funnel data in the Basin dashboard, and you can route it through webhooks to your CRM.

If you need more control over submission processing or CMS field mapping, the API integration path covers those cases with full flexibility.

Install the Basin Forms app from the Webflow App Marketplace to connect your forms to Basin endpoints without code changes.