Formstack

How to integrate Formstack with Webflow

Content teams need to update form fields without developer intervention, but native Webflow forms lack conditional logic, HIPAA compliance, and payment processing with PCI considerations. Marketing requests changes to form routing, developers implement them, and deployment cycles slow everything down.

You can embed Formstack forms directly on Webflow pages using JavaScript, iFrame, or Lightbox methods. You can sync data between platforms using automation tools like Zapier or Make. Or you can build custom integrations using the Formstack REST API and Webflow CMS API.

Use Webflow’s Code Embed element

Formstack offers three ways to embed forms:

1. JavaScript embed
2. iFrame embed
3. Lightbox embed

Copy the script Formstack generates and paste that script in a Webflow Code Embed element on your site. Or in your site’s custom code settings.

JavaScript embed for single forms

JavaScript embedding places Formstack forms directly in Webflow pages with automatic updates when you modify forms in Formstack. The form inherits your Webflow site's responsive container behavior and loads field validation, conditional logic, and payment processing without additional configuration.

To connect the two platforms, go to your published form in Formstack. Then, click the Share tab, and toggle JavaScript in the Website Embed section. Copy the script snippet and add a Code Embed element to your Webflow page. Paste the code into the Embed element and publish your site.

Only one Formstack form can be embedded using JavaScript on the same page due to script conflicts. Additional forms on the same page require iFrame embedding instead.

This method supports conditional logic that shows or hides fields based on user input, payment processing through Stripe, PayPal, or Authorize.net integrations, file uploads with Formstack storage, and custom CSS styling defined in Formstack's theme editor.

iFrame embed for multiple forms

iFrame embedding isolates forms in separate containers, preventing JavaScript conflicts when displaying multiple forms on one page. This method creates a boundary between Formstack's code and your Webflow site's existing scripts, making it the recommended approach when embedding multiple forms or when JavaScript conflicts with existing site functionality.

Toggle iFrame in the Website Embed section in Formstack, under your form's Share tab. Copy the iFrame code with customizable width and height parameters. Add a Code Embed element in Webflow and paste the code.

Use iFrames when embedding multiple Formstack forms on the same Webflow page, avoiding conflicts with existing jQuery versions, creating isolated containers for payment forms to limit PCI compliance scope, or displaying one-question-at-a-time survey formats.

Wrap iFrames in responsive containers using padding-bottom techniques. Add this structure to Webflow's custom code section or use a Code Embed element to maintain proper aspect ratios across device sizes.

Lightbox popup forms

Lightbox embedding creates popup overlays that appear when users click designated elements on your Webflow site. This approach keeps visitors on the current page while collecting information through modal windows.

Lightbox embeds can be customized through data attributes like data-theme and data-auto-open-delay, and can be bound to Webflow interactions using class selectors for advanced control.

Toggle Lightbox in the Share tab to generate the embed code. Add the code to Webflow's custom code section in page or site settings. The script includes data attributes like data-theme and data-auto-open-delay for customization.

Configuration options include binding lightbox triggers to Webflow buttons using class selectors, configuring auto-open delays for time-based displays using the data-auto-open-delay attribute, customizing overlay themes matching your site design using the data-theme attribute, and setting exit intent triggers for user retention.

Automated data sync with automation platforms

Use Zapier or Make to bridge Formstack and Webflow to get no-code automation that transfers data between platforms.

For example, Zapier makes it so Formstack form submissions trigger actions in Webflow, such as creating or updating CMS items.

First, connect your Formstack and Webflow accounts through Zapier. Then, select New Form Submission as the trigger. And choose Create Live Item or Update Item as the Webflow action. Finally, map form fields to Webflow collection fields through the automation platform's visual interface.

Some common workflows using Zapier include:

• Form submission to CMS item creation where new Formstack submissions automatically create Webflow CMS items for testimonials, case studies, or user-generated content
• CMS updates from external data where existing Webflow collection items update when Formstack receives new information through webhook-triggered automation
• Multi-system distribution that sends form data simultaneously to Webflow CMS, CRM platforms, and notification channels
• Order processing automation that routes Webflow e-commerce orders through Formstack workflows for fulfillment processing

Formstack includes formatting tools for date conversion, text manipulation, and conditional routing based on form field values.

You can set up similar and more complext workflows using Make as the bridge between Webflow and Formstack. Make supports more complex workflows than Zapier's linear approach.

To connect Formstack submission triggers to Webflow CMS actions, you need to configure Formstack webhooks to send data to Make's webhook module, then use Make's HTTP Request module to call the Webflow API.

Make lets you:

• Watch form submissions with instant webhook triggers
• Create, update, or delete Webflow collection items
• Retrieve Webflow form submissions and collections
• Build conditional branches that route data based on submission values
• Execute parallel actions across multiple systems simultaneously

Make's visual editor displays workflow logic as connected modules. Each module represents an action or decision point.

Build with Webflow and Formstack APIs

API integration creates custom synchronization logic between Formstack forms and Webflow CMS. This approach enables real-time data updates via webhooks, complex business rules through conditional logic, and integration with additional systems.

The Formstack REST API uses OAuth 2.0 Bearer token authentication with Personal Access Tokens. The Webflow CMS API requires Bearer tokens with cms:read and cms:write scopes.

Real-time submission sync with webhooks

Formstack webhooks send HTTP POST requests to your endpoint immediately when users submit forms. Configure webhooks through the Form UI under Form Settings → Emails & Actions → Advanced Settings → Add Webhook.

Set your publicly accessible endpoint URL and choose JSON payload format. Formstack includes HMAC signature verification (a cryptographic method that confirms webhook requests authentically come from Formstack) through custom headers for security.

Your middleware endpoint receives submission data, transforms field names to match Webflow's collection schema, and calls the Webflow CMS create items endpoint. Webflow uses a two-step publish process. Items are first created in a draft staged state, then published to become live. After creating the item in staged state, you must call the Webflow publish items endpoint to make the item visible on your live site.

Implementation pattern:

app.post('/formstack-webhook', async (req, res) => {
  // Verify Formstack signature
  const signature = req.headers['x-fs-signature'];
  if (!validateSignature(signature, req.body, handshakeKey)) {
    return res.status(401).send('Invalid signature');
  }

  // Extract submission data from Formstack webhook payload
  const { fields, merge_id, file_name } = req.body;

  // Transform Formstack fields to Webflow schema
  const webflowData = transformFields(fields);

  // Create Webflow CMS item in staged state
  const createdItem = await createWebflowItem(collectionId, webflowData);

  // Publish item to live site
  await publishWebflowItem(collectionId, createdItem.id);

  res.sendStatus(200);
});

Configure webhook authentication using custom headers for shared secrets according to Formstack's WebHook Submit Actions documentation. Formstack deactivates webhooks after repeated failures, so implement proper error handling and logging.

Batch submission retrieval

The Formstack submissions endpoint retrieves historical data with pagination and filtering. Use GET https://www.formstack.com/api/v2/forms/{formId}/submission.json with query parameters for date ranges, sorting, and page size.

This method works for initial data imports or scheduled synchronization when real-time updates aren't required. Implement pagination using page and per_page parameters to retrieve all submissions without hitting rate limits.

Query parameters include page for page number in pagination, per_page for results per page (maximum varies by plan), sort for field to sort by, and data=true to include full submission data in response.

Create and publish Webflow CMS items from Formstack submissions

The Webflow CMS API uses a two-step process for publishing content. First create staged items using the create items endpoint, then publish them to make content visible on live sites using the publish items endpoint.

Create staged item:

curl --request POST \
  --url https://api.webflow.com/v2/collections/{collection_id}/items \
  --header 'Authorization: Bearer YOUR_TOKEN' \
  --header 'Content-Type: application/json' \
  --data '{
    "fieldData": {
      "name": "Customer Testimonial",
      "slug": "testimonial-john-smith",
      "testimonial-text": "Formstack integration saved us hours weekly",
      "customer-name": "John Smith"
    }
  }'

The API returns the created item's ID. Use this ID in the publish endpoint to make content live by calling POST /collections/{collection_id}/items/publish with the item ID in the request body.

curl --request POST \
  --url https://api.webflow.com/v2/collections/{collection_id}/items/publish \
  --header 'Authorization: Bearer YOUR_TOKEN' \
  --header 'Content-Type: application/json' \
  --data '{
    "itemIds": ["item-id-from-create-response"]
  }'

Required fields for Webflow CMS API item creation include name and slug. When publishing items, the endpoint accepts arrays of item IDs in the request body for bulk operations.

UTM parameter tracking

Formstack forms don't automatically capture URL parameters from Webflow pages. According to a verified Webflow community solution, you need custom JavaScript that extracts URL parameters using jQuery and the js-cookie library, stores them in cookies, and populates hidden form fields in the Formstack form before submission.

Add jQuery and js-cookie libraries to your Webflow page. Create hidden fields in Formstack for each UTM parameter you want to track. Add JavaScript to Webflow's custom code settings that reads URL parameters, sets cookies with 30-day expiration, and populates hidden fields before form submission.

The community forum provides complete code examples for parameter extraction, cookie storage, and automatic field population that enable UTM parameter tracking when embedding Formstack forms in Webflow.

What you can build

Integrating Formstack with Webflow brings conditional logic, payment processing, and compliance features to your sites.

• HIPAA-compliant patient portals: Build patient intake portals combining Webflow's design with Formstack's Business Associate Agreements and encryption while automatically routing submissions to Electronic Health Record systems
• Nonprofit donation systems: Create multi-step donation forms with payment processing that route donations to CRM platforms and trigger automated thank-you sequences with tax documentation
• Agency onboarding portals: Design branded portal pages that collect client information through embedded Formstack forms and automatically create project management tasks when onboarding completes
• Educational enrollment systems: Build student application portals with Section 508 accessible forms that process background checks and route data to student information systems