Formstack
Connect Formstack, a data capture and workflow automation platform, with Webflow to embed advanced forms and sync submissions using Code Embed, Zapier, or APIs.
Formstack picks up where native forms leave off: conditional logic, payment fields, file uploads, and BAA-backed HIPAA compliance, all embedded directly into your page. Push submissions into the CMS through Zapier, Make, or the API, and Formstack becomes the data layer behind your marketing site.
That makes it a fit for lead capture campaigns, patient intake, client work at agencies, and document or e-signature workflows in finance and operations. If your site collects sensitive data or routes submissions to different teams, this pairing handles what native forms can't.
How to integrate Formstack with Webflow
What is Formstack? Formstack is a data capture and workflow automation platform. The Formstack Suite includes Formstack Forms for drag-and-drop form building, plus tools for document generation and eSignatures. Forms support conditional logic and payment processing. They also support file uploads and HIPAA compliance as an add-on, with over 300 integrations available.
Pair Formstack with your site when native forms fall short. A healthcare provider embeds a HIPAA-compliant intake form, or a marketing site collects leads with branching questions and payment fields. Formstack handles the form logic and data capture; your site handles the design and hosting.
The Formstack integration supports three approaches:
- Embedding with Code Embed adds a Formstack form to any page without writing custom logic.
- Zapier and Make sync Formstack submissions into your CMS without code.
- The Data API and Formstack APIs give you full control over CMS sync and submission routing, but you need server-side development.
Most implementations combine two or more of these methods depending on the complexity of the setup.
Add Formstack forms with Code Embed elements
To place a Formstack form on a page, copy an embed snippet from Formstack, then paste it into a Code Embed element. This method needs no middleware or server. Formstack offers embed types from the Share tab, each suited to a different situation.
Use JavaScript for the standard embed method. It updates automatically when you edit the form, so you never replace the code. iFrame suits ASP.NET sites or cases where your site's JavaScript conflicts with the form. Note that iFrame embeds aren't mobile responsive. Lightbox dims the surrounding page and presents the form as a modal.
Pick the method that matches your page, then embed it.
Embed a form with the Code Embed element
The Code Embed element places custom HTML, CSS, and JavaScript directly in your page layout. Use it for a single Formstack form on a static page. The form renders only on the published site, not inside the Designer.
To embed a form on a page:
- In Formstack, open your published form and go to the Share tab, then the Website Embed section.
- Copy the JavaScript embed code. Optionally remove the Formstack theme first so the form inherits your site styles.
- Open the Add panel and drag a Code Embed element onto the canvas.
- Paste the code into the modal, then click Save & Close.
- Publish your site to render the live form.
The Code Embed element caps out at 50,000 characters. It supports HTML plus CSS in <style> tags and JS in <script> tags. Server-side languages like PHP, Python, and Ruby won't run here.
Inject a form site-wide or per page
When a form needs to load across multiple pages, or you want the script in the <head> or <body>, use the custom code settings instead of a canvas element. This applies the script globally through Site Settings or to a single page through Page Settings.
To inject a form script:
- Copy the JavaScript embed code from Formstack's Share tab.
- Go to Custom code in head and body tags under Site Settings or Page Settings.
- Paste the code into the
<head>or before the</body>tag, then save and publish.
For CMS Collection pages, add the embed inside a rich text field. Open the CMS and select a Collection item. Create a new line, click the plus icon, and choose HTML embed or Code block. This lets each CMS item carry its own embedded form.
Connect with Zapier or Make
Embedding places a form on a page. Use an automation platform to move submission data into your CMS. Both Zapier and Make offer direct connections to Formstack and the CMS, so you can turn a form submission into a CMS item without writing code. If you want CMS sync but don't have server-side resources, use this path.
The Zapier Webflow and Formstack integration can turn a Formstack New Form Submission trigger into a Create Live Item action, which adds each submission as a live CMS collection item. The same Formstack trigger can update an existing CMS record with Update Item. A New Form Submission trigger can also relay native form data into Formstack with Formstack Create Form Submission.
Make offers a similar direct connection with 42 combined modules across triggers and actions, plus searches. In Make, build custom scenarios with modules like Formstack Submit a Form and Create an Item. Either platform removes manual data entry between the two systems.
Build with the Data API and Formstack APIs
For real-time CMS sync or submission routing, use the APIs directly. Batch imports also fit this path. You need server-side development and a middleware layer to connect the platforms directly. You get full control over how Formstack data maps to CMS fields and when items publish.
The sync workflow uses the Formstack API for form submissions and webhook registration. It authenticates with a Bearer token at https://www.formstack.com/api/v2025. The Data API handles CMS collection items and form submissions at https://api.webflow.com/v2. Webhooks trigger real-time events, with a limit of 75 registrations per trigger type per site.
Use these endpoints to create, update, unpublish, or batch-sync CMS items from Formstack submissions.
Sync Formstack submissions to the CMS via webhook
This flow pushes each new submission into your CMS the moment a form is submitted. Your middleware receives the Formstack payload, verifies it, then creates a CMS item. Use this pattern for real-time content sync.
To build this sync:
- Register a Formstack webhook with
POST https://www.formstack.com/api/v2025/forms/{formId}/webhooks. Seturlto your middleware,contentType: json, andpostDataFieldKeys: api_friendly_field_namesto avoid duplicate field title issues. - On submission, Formstack fires an HTTP POST to your middleware. Verify the payload by checking the
X-FS-Signatureheader against an HMAC generated from yourhmacSecret. - Create the CMS item with
POST https://api.webflow.com/v2/collections/{collection_id}/items/live(scopeCMS:write). Map Formstack field values tofieldData.
To retrieve the exact payload schema for a form, call GET /forms/{formId}/webhooks/openapi, which returns a generated OpenAPI definition. The Zapier route above covers the same use case without code.
Update or remove CMS items from a submission
Beyond creating items, you can update or unpublish CMS records based on a submission. Include a hidden field in your Formstack form to carry the target item ID, then act on that ID in your middleware.
To update an existing item:
- Register the Formstack webhook as above. Capture the target item ID from a hidden field.
- Call
PATCH https://api.webflow.com/v2/collections/{collection_id}/itemswith the item ID and updatedfieldData. This endpoint accepts up to 100 items per request. - Push the change live with
POST https://api.webflow.com/v2/collections/{collection_id}/items/publish.
To unpublish an item instead, call DELETE https://api.webflow.com/v2/collections/{collection_id}/items/live with the target item ID. These endpoints let a form submission drive live content changes on your site.
Batch sync submissions on a schedule
When you don't need real-time sync, run a scheduled job to pull submissions in bulk and write them to the CMS. This suits nightly imports or backfilling historical data.
To run a batch sync:
- Call
GET https://www.formstack.com/api/v2025/forms/{formId}/submissionswithminTimeandmaxTimeto scope the window,pageSizeup to 100 for pagination, anddataFormat: standardizedfor structured field objects. - For each submission, call
POST https://api.webflow.com/v2/collections/{collection_id}/items/liveto create a live item. - Track the last processed timestamp so the next run picks up where this one ended.
The standardized data format returns displayValue, parsedValue, and internalLabel per field, which makes mapping to CMS fields predictable.
What can you build with the Formstack integration?
Integrating Formstack with your site lets you collect complex, compliant form data without hitting the limits of native forms.
- HIPAA-compliant patient intake: Embed a BAA-backed Formstack form on a healthcare page so PHI routes through Formstack, never native forms. A hospital can publish a patient registration portal that cuts onboarding time while keeping data compliant.
- Lead capture with conditional logic: Build a multi-step form that shows or hides questions based on prior answers, then embed it on a landing page. A software company can qualify leads with branching questions that go beyond native forms.
- Payment collection through forms: Add Stripe or PayPal fields to a Formstack form and embed it on a donation or checkout page. Authorize.net fields are another option. A nonprofit can accept donations directly without building a separate payment flow.
- CMS-synced submissions: Route form submissions into a CMS collection through Zapier or the API so each entry becomes a published page. An agency can turn client intake forms into live directory listings without manual data entry.
If you need more control over real-time sync and submission routing, the API integration path covers those cases with full flexibility.
Frequently asked questions
Use JavaScript. Formstack recommends it because the embed code updates automatically when you edit the form, so you never replace the snippet. Copy the code from the Share tab, then paste it into a Webflow Code Embed element on the canvas. Switch to iFrame only for ASP.NET sites or when your site's JavaScript conflicts with the form.
Use one JavaScript embed per page. Formstack does not support embedding two forms on one page when both use the JavaScript embed script. To run two forms on the same page, use an iFrame for one and the JavaScript embed for the other.
Forms with a
<script>tag render only on the live site. Any time a<script></script>tag appears in the code editor, Webflow shows a placeholder for that element. The script renders once you preview, publish, or export the site. See Webflow's Code Embed documentation for details on this behavior.Yes. If your Webflow site has CSP enabled, you need to allow the resources Forms V4 requires. Configure the CSP directives Formstack requires, including script, style, and frame permissions.
Use an automation tool or the API. For a no-code path, connect the Zapier Webflow and Formstack integration and map the Formstack New Form Submission trigger to the Webflow Create Live Item action. For real-time control, register a Formstack webhook with POST /webhooks and have your middleware call the Webflow create live item endpoint.
Description
Formstack is a data capture and workflow automation platform. On a Webflow page, its forms add conditional logic, payments, file uploads, and HIPAA compliance.
This integration page is provided for informational and convenience purposes only.
Typeform
SurveyMonkey
Connect SurveyMonkey with Webflow to collect structured feedback for lead qualification and on-site survey displays.
POWr
Embed POWr forms, popups, countdown timers, and much more. No coding necessary!
POWR
Transform your Webflow site with powerful no-code widgets. Add forms, popups, galleries, and 60+ interactive apps to boost engagement, capture leads, and increase conversions — all without writing a single line of code.
Paperform
Connect Paperform, a design-first form builder, with Webflow to embed payment forms, conditional intake flows, and booking pages directly on any page with inline, popup, or full-screen layouts.
MightyForms
Connect MightyForms, a no-code form builder with conditional logic and payments, with Webflow to embed advanced forms on any page using a Code Embed element.
Mailchimp Forms
Connect Mailchimp Forms with Webflow to capture leads and grow your email list through native form integration.
Jotform
Connect Jotform, an online form builder with conditional logic, payments, and e-signatures, with Webflow to embed advanced forms and sync submissions to the CMS.
Jinglebell
Jinglebell brings you an intuitive module to fully integrate your Webflow-designed forms.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
