Softr

How to integrate Softr with Webflow

Webflow handles marketing sites and landing pages well but lacks user authentication, database-driven portals, and complex form functionality. Softr fills these gaps with built-in user management, role-based access control, and advanced form features like signature capture and rating fields.

Embed Softr applications in Webflow pages using iframe code snippets to display authenticated portals and dynamic forms. Sync data between platforms using automation tools like Zapier, Make, n8n, and viaSocket to connect form submissions with user accounts and database records. Build custom integrations with the Softr API and Webflow Data API for bidirectional data synchronization and specialized business logic.

Embed Softr applications in Webflow pages

Embed Softr portals, forms, and data displays directly in Webflow using iframe code snippets. This approach requires no backend infrastructure and works with Softr's built-in authentication. Build your application in Softr, get the embed code, and paste it into Webflow's Custom Code Embed element. The embedded content maintains functionality including login blocks, database operations, and form submissions, though Softr and Webflow operate separate authentication systems that don't synchronize.

Some common embedding scenarios using Softr's page and block embed functionality include:

• Client portals that display user-specific data within Webflow marketing sites using authenticated dashboards
• Dynamic forms with advanced features like signature capture, rating fields, and Google Maps autocomplete address fields
• Data displays showing list, grid, and table blocks connected to Airtable or Google Sheets for real-time data visualization
• Member directories that display user profiles and content with filtering, search, and pagination functionality

Softr automatically provides iframe code for any page or block through the Features tab in your page or block settings. The platform handles authentication, session state, and database queries within the embedded iframe. For responsive layouts, wrap the iframe in a container with relative positioning and percentage-based padding to maintain aspect ratios across devices. For dynamic height adjustment, Softr optionally includes the iframeResizer.min.js script within iframe implementations.

Mobile responsiveness requires specific CSS implementation. Fixed-width iframes create horizontal scrolling on smaller screens. Use a responsive wrapper technique with relative positioning and padding-bottom ratio to make iframes scale properly.

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="<https://your-softr-app.softr.app/page-path>"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0">
</iframe>
</div>



Set minimum touch target sizes to 44×44px for iOS and Android compliance. Test embedded forms for horizontal scrolling issues. For larger option sets use dropdowns, but limit to 5-7 options maximum. Use radio buttons for 2-4 options instead.

Performance considerations matter when embedding third-party content. Implement the loading="lazy" attribute for below-the-fold iframes to defer loading until needed. Limit embedded blocks to 3-4 per page maximum to prevent performance degradation. Compress images before uploading to your data source and use WebP format when possible to reduce file sizes.

Sync data with automation platforms

Connect Webflow forms to Softr user accounts and synchronize CMS content with Softr databases using automation platforms. Zapier and viaSocket provide native integrations with pre-built templates for both platforms. Make requires webhook configuration and workflow setup, while n8n offers complete triggers and actions but requires custom workflow building. Configure workflows that trigger when users submit Webflow forms or when records change in Softr databases, then execute actions like creating user accounts or updating CMS items.

Automation platforms connect Webflow and Softr through different capabilities:

• Zapier provides pre-built templates connecting Webflow form submissions to Softr user creation, with "New Form Submission" triggers linking to "Create Softr App User" actions
• Make enables webhook-based connections between Webflow forms and Softr databases through custom webhook configuration and "Send to Make" actions in Softr forms
• n8n supports workflows with "Collection Item Created" triggers from Webflow connecting to Softr database record creation actions
• viaSocket offers native integration similar to Zapier with "New Form Submission" and "New Order" triggers connecting to Softr user and database operations

Set up authentication for both platforms in your chosen automation tool. For Webflow, configure form submission webhooks pointing to your automation platform's endpoint. For Softr, since October 2025 you can use Softr Workflows to trigger actions when data changes. Alternatively, configure "Call API" actions within Softr for scenarios like record creation, updates, or deletions. Map data fields between platforms, verifying data types match exactly. Test workflows with sample data before enabling production sync.

Data synchronization operates on polling intervals rather than real-time updates. When records change in either platform, automation workflows detect changes during the next polling cycle and execute configured actions to keep data synchronized between systems. This eventual consistency model means updates can take several minutes to propagate between platforms.

IFTTT cannot integrate Softr and Webflow since it only supports Webflow, not Softr. Focus on Zapier for simplicity, Make for cost efficiency with high-volume workflows, or n8n for complete control and self-hosting.

User provisioning from Webflow forms

Create Softr user accounts automatically when visitors submit Webflow forms. This workflow reduces manual account creation and enables portal access. Configure a trigger in your automation platform for Webflow's "New Form Submission" event. Add an action to create a Softr user through the Create App User endpoint by sending a POST request to https://studio-api.softr.io/v1/api/users with required authentication headers (Softr-Api-Key and Softr-Domain). Map form fields like email and name to Softr user properties. Enable the generate_magic_link parameter to send passwordless authentication links automatically.

Note that this requires server-side implementation or a third-party automation platform like Zapier or Make, as direct API calls from Webflow custom code blocks will be blocked by CORS restrictions. Softr's user management requires native API endpoints at https://studio-api.softr.io/v1/api/users rather than the REST API, which cannot manage Softr users according to Softr's API documentation.

To create an automated workflow using Zapier, select "New Form Submission" as the trigger, authenticate your Webflow account, then choose "Create Softr App User" as the action. Field mapping happens visually without code. Test submissions verify data flows correctly before enabling the workflow.

Make and n8n require manual webhook configuration but provide more control over data transformation. For Make, set up a custom webhook in Make pointing to your form submission source, then configure a webhook trigger in your Softr form settings to send form data to Make. If using n8n, create workflows with collection item triggers and call the Softr user creation API endpoint (POST <https://studio-api.softr.io/v1/api/users>) in the action node. For all platforms, process the webhook payload to extract user data (email, name), then execute Softr's user creation API with proper authentication headers (Softr-Api-Key, Softr-Domain, Content-Type: application/json).

CMS content synchronization

Sync Webflow CMS collections with Softr databases through automation platforms like Zapier or Make. Configure workflows that trigger when collection items are created or updated in Webflow using the collection_item_created webhook event. Extract field data from the webhook payload and map it to Softr database records through your chosen automation platform. Alternatively, implement a server-side endpoint to receive Webflow webhooks and use Softr's API to create or update corresponding records in your Softr database.

The reverse direction syncs Softr database changes to Webflow through automation platforms and API integration. The recommended approach uses Softr's Call API action configured within workflow automation to send data to Webflow's CMS API. For each data change type (record created, updated, or deleted), configure a separate workflow in Softr that triggers the Call API action to update Webflow items. Alternatively, Zapier offers pre-built templates for this synchronization pattern with its "Database Record Updated" trigger connecting to Webflow's "Update Item" action.

Field type incompatibilities require attention during mapping. Softr supports signature, rating, and Google Maps autocomplete address fields according to advanced form documentation that have no Webflow equivalents. When embedding Softr forms in Webflow pages, these advanced field types function correctly within the Softr interface. However, if syncing data between platforms, rich text formatting may not preserve styling across systems, and file attachments require URL mapping rather than direct file transfer. Handle these incompatibilities by either maintaining form submission entirely within Softr's embedded forms for applications requiring advanced field types, or implementing custom data transformation logic in your automation workflows to convert file references and preserve rich text through alternative storage methods.

SEO metadata fields exist in your underlying data source (Airtable or Google Sheets) but don't appear in Softr's mapping interface. When building automation workflows, access these fields directly through your database rather than through Softr's UI, which has architectural limitations preventing their display in the interface.

Build with Webflow and Softr APIs

Direct API integration enables custom workflows beyond automation platform capabilities. Use Webflow's Data API (base URL https://api.webflow.com/v2) and Softr's API endpoints to build bidirectional data synchronization, implement custom authentication flows, and create specialized business logic. This approach provides complete control over data flow, error handling, and user experience, though it requires development resources to implement properly.

Note that Softr has two distinct API systems. The native API endpoints (https://studio-api.softr.io/v1/api for user management, https://tables-api.softr.io/api/v1 for database operations) handle user accounts and data operations. The REST API cannot manage Softr users and is only for supplemental data requiring existing Airtable or Google Sheets data sources. Use native API endpoints for user provisioning and database synchronization.

Build a middleware layer that receives webhook events from both platforms and orchestrates data operations. Validate webhook signatures using the x-webflow-signature header from Webflow webhooks to prevent unauthorized requests. Store API credentials server-side only. Webflow site tokens expire after 365 days of inactivity according to authentication documentation, requiring rotation every 365 days to maintain API access.

CORS restrictions prevent direct API calls from Webflow to Softr in browser-based JavaScript. To resolve CORS errors, use an automation platform like Zapier, Make, or n8n as middleware to handle API communication. This avoids CORS entirely since the API calls originate from the automation platform's servers rather than the browser. For advanced implementations, build a server-side proxy endpoint that receives requests from your Webflow site and forwards them to Softr's API with proper authentication headers. Deploy this middleware on serverless platforms like Cloudflare Workers or AWS Lambda for automatic scaling.

Create Softr users from Webflow webhooks

Provision Softr user accounts automatically when visitors submit Webflow forms or complete purchases. Configure a webhook in Webflow pointing to your middleware endpoint. Your server receives the webhook payload containing form data or order information. Extract the user's email and any custom fields, then call POST <https://studio-api.softr.io/v1/api/users> with required headers including Softr-Api-Key and Softr-Domain.

Direct API calls from Webflow custom code blocks are blocked by CORS restrictions, so a server-side proxy endpoint is required to bridge the communication between Webflow and Softr's API.

The API endpoint for user authentication requires proper credentials that cannot be exposed client-side. To create users with passwordless authentication, use the Softr User Management API (POST <https://studio-api.softr.io/v1/api/users>) with the required authentication headers (Softr-Api-Key and Softr-Domain). When creating a user, include the user's full name, email, and optionally a password. Set generate_magic_link: true to automatically send a one-time passwordless authentication link, which provides immediate application access without requiring users to remember passwords.

Handle API errors appropriately. User creation fails if the email already exists. Check for HTTP 422 responses indicating validation failures. Implement exponential backoff retry logic for transient failures. Return success to Webflow quickly to prevent webhook timeout, then handle user creation asynchronously if needed.

Sync CMS items to external databases

Configure webhooks for collection_item_created, collection_item_changed, and collection_item_deleted events in Webflow webhook settings. Your middleware receives the event payload containing field data. Map CMS fields to your Softr database schema, then create or update records through the Softr Database API.

The reverse direction requires workflow configuration since Softr doesn't emit webhook events automatically. Developers can create Softr Workflows that execute Call API actions to push data to Webflow. When changes are detected through workflow triggers (record creation, updates, or deletion), configure a Call API action to execute POST requests to POST /v2/collections/:collectionId/items/live to create items in Webflow CMS. Authenticate using a Webflow site token in the Authorization: Bearer header (note that site tokens expire after 365 days of inactivity). Alternatively, implement polling mechanisms through automation platforms like Zapier or Make to periodically check for Softr database changes and trigger corresponding Webflow CMS updates.

Publishing requires a separate API call after item creation. Batch publish operations and implement queuing mechanisms to handle multiple items efficiently. Store unpublished items and process them in batches according to your application's workflow requirements.

Validate user sessions across platforms

Verify Softr user authentication tokens from external systems using POST https://{yourdomain}.softr.app/v1/api/users/validate-token. This enables external services to trust Softr user sessions when building secure integrations. Send the authentication token in the request and check the response for validity. Use validated sessions to gate content in Webflow or authorize API operations in your middleware.

Implement token validation server-side only. Tokens contain sensitive authentication data that should never be exposed in client-side code. Build an endpoint in your middleware that receives token validation requests from Webflow, forwards them to Softr's API using the POST https://{yourdomain}.softr.app/v1/api/users/validate-token endpoint, and returns the result. Cache validation results briefly to reduce API calls while maintaining security.

What you can build

Integrating Softr with Webflow enables marketing sites with functional database-driven applications, authenticated user portals, and automated workflows through iframe embedding and automation platforms.

• Client portals with document management: Build a services website in Webflow that embeds a Softr portal where clients authenticate, view invoices, upload documents, track project status, and communicate with your team through a branded interface
• Membership sites with gated content: Create a course marketing site in Webflow with member portals in Softr that manage user access, display course content, and deliver certificates upon completion (requires developer support for progress tracking across iframe boundaries and certificate delivery automation)
• Healthcare patient portals: Design a clinic website with Webflow pages for clinic information and services, while embedding Softr-powered patient portals via iframe for appointment scheduling, lab result viewing, prescription refills, and secure messaging with providers (verify HIPAA compliance requirements and Business Associate Agreements with both platforms before implementing patient data systems)