Inputflow
Connect Inputflow with Webflow to turn native forms into multi-step forms with branching and calculations. Add validation in the same setup.
Native Webflow forms submit on a single page with no step logic. Native Webflow forms cannot branch questions based on earlier answers or calculate a price mid-form. They also lack per-field error messages. Teams building quote builders or quizzes often embed an external form tool or write custom JavaScript; configurators create the same need. Inputflow adds branching and calculations inside Webflow, along with per-field error messages.
Inputflow adds a multi-step layer on top of forms you design entirely in Webflow. You keep full control over every step, input, and button. Inputflow's Form Editor then handles step connections, branching, calculations, validation, and redirects. Submissions still land in the native form system by default.
Agencies ship client forms with the integration. It also supports marketers' lead funnels and SaaS onboarding flows. Non-technical builders configure everything visually after a one-time script embed. Developers extend the same forms through webhooks and the Webflow Data API.
How to integrate Inputflow with Webflow
What is Inputflow? Inputflow is a multi-step form builder that runs as a Webflow App and works only with Webflow. You build every form step inside Webflow, then use Inputflow to connect steps and add logic. Its Form Editor covers conditional branching, calculations and variables, input validation with custom error messages, and conditional success messages.
Teams use this integration when a single-page form cannot carry the interaction. Teams use the integration for onboarding forms, pricing calculators, quizzes, lead generation forms, get-a-quote forms, order forms, signup forms, and product configurators. A free UI component library at inputflow.com/library adds range sliders, radio buttons, checkboxes, input counters, and custom form buttons.
The Inputflow-Webflow integration supports five approaches:
- The Inputflow app handles form connection, steps, buttons, and logic configuration inside Webflow without writing code.
- The Inputflow script loads the multi-step functionality on published pages through one script tag.
- Custom webhooks send submissions straight to Zapier or Make, where you route the data on to other tools.
- The Webflow MCP server lets an AI agent read those submissions and write the Inputflow script into a page head block.
- The Webflow Data API gives you full programmatic control over submission data, but requires server-side development.
Every setup uses the app and the script together; webhooks, MCP, and the API extend the base install.
Install the Inputflow app
The Inputflow app on the Webflow Marketplace is the starting point for every setup. It runs without limits on .webflow.io staging domains. Forms on a custom domain need a paid Inputflow plan. You also need an Inputflow account, which is separate from your Webflow account. All form logic then lives in two panels, the Elements Manager for structure and the Form Editor for behavior.
To set up the integration:
- Open the Inputflow listing on the Webflow Marketplace, install the app, refresh Webflow, and launch Inputflow.
- Create an Inputflow account inside the app.
- Add
<script src="https://script.inputflow.io/i.js" type="module" defer></script>to the page<head>using custom code in the head and body tags. - Select your form in the Navigator, then click Connect in the Elements Manager.
- Select a Div Block, click Step in the Elements Manager, name the step, and click Create step.
- Select button elements and click Next button or Back button in the Elements Manager.
- Publish to your
.webflow.iostaging domain, then click the Load elements icon in the Form Editor. - Drag steps and action blocks onto the Form Editor canvas and connect them in sequence.
Once connected, the Form Editor configures these capabilities without code:
- Conditional steps and branching: Rules on each step decide which question comes next, so different answers send visitors down different paths.
- Calculations and variables: Inputflow computes prices, costs, and scores from what the visitor enters and displays the result later in the form.
- Input validation: Each field carries its own conditions and its own error message rather than one generic failure notice.
- Personalization: Typing
@[Field Name]anywhere in the form prints the value the visitor entered in that field earlier. - Conditional success messages: The message shown after submission changes with the visitor's input or with a calculated value.
Repeat the publish-and-load cycle whenever you add or change steps and inputs, or the Form Editor will not see the new elements.
Add the Inputflow script with custom code
Every Inputflow form needs a script tag on its page. Without it, the form does not work at all. Adding code to a page <head> requires a paid Site plan or a paid Workspace plan.
To add the script:
- Copy the tag:
<script src="https://script.inputflow.io/i.js" type="module" defer></script> - In Webflow, open Page settings > Custom code, paste the tag into the Inside
<head>tag section, and click Save. - Publish the site. Custom code shows effects in preview but only goes live after publishing.
The tag above comes from the Adding the Script guide, which includes defer. Use that version.
Connect with Zapier, Make, and other automation tools
Two direct paths connect Inputflow with Zapier, Make, n8n, IFTTT, or viaSocket. Because every default Inputflow form is a Webflow form, the Webflow app on each platform triggers on its submissions. Alternatively, Inputflow sends submissions straight to a destination webhook, configured through its UI per the Zapier & Make webhooks guide. Inputflow has no native connector on these platforms. Visitors still experience a normal Webflow form either way. Five platforms cover the native trigger path:
- Zapier: Its New Form Submission trigger fires on native Webflow submissions, and actions like Create Item and Update Live Item write the results into Webflow CMS collections.
- Make: Its Watch Events trigger receives Webflow webhook events, and an Inputflow custom webhook can also POST directly into a scenario where Webflow action modules handle the follow-up.
- n8n: Its Webflow Trigger node includes a Form Submission event, and its generic Webhook node receives Inputflow custom webhook payloads.
- IFTTT and viaSocket: Both carry a form submission trigger for the native path, and viaSocket documents the setup in its Webflow integration listing.
When a custom webhook is configured, the submission is not recorded as a native form submission. And Inputflow does not document its outbound payload schema, so trigger a test submission and inspect the actual fields before mapping them.
Manage forms and submissions with the Webflow MCP server
The Webflow MCP server gives an AI agent direct access to the same form data Inputflow writes into, so you can pull submissions or check a form schema from a chat window instead of building an API client. Nothing in the Inputflow setup has to change for this to work, because Inputflow submissions are ordinary Webflow submissions. The server also reaches the page-level custom code blocks, which is where the Inputflow script tag lives.
Four of its tools cover most Inputflow work:
- List forms:
list_formsreturns a site's forms and their metadata, which is how an agent finds the form ID that every other call needs. - Read submissions:
list_form_submissionsandlist_site_form_submissionspull submissions for one form or across an entire site. - Inspect a schema:
get_formreturns a single form's fields and metadata, which helps when a multi-step form has grown past what you remember building. - Place the script:
set_page_freeform_codewrites a page head block, so an agent can add the Inputflow tag across a set of pages. It replaces the block's contents, so read the block first.
Claude Code, Claude Desktop, Cursor, Windsurf, and Postman all have documented install paths in the MCP getting started guide.
Build with the Webflow Data API
Anything the MCP server does not cover runs through the Webflow Data API v2 at https://api.webflow.com/v2, because default Inputflow submissions are standard Webflow form submissions. Inputflow exposes no public API. This path suits developers syncing form data to CRMs and databases; it also supports CMS collection syncs and requires server-side development. Every request needs an Authorization: Bearer <token> header.
- Forms API: The Forms API handles form schemas and submission reads with the
forms:readscope. - Webhooks: Webflow webhooks push
form_submissionevents to any endpoint in real time. - CMS API: The CMS API writes submission data to collections with the
cms:writescope. - Authentication: App integrations authenticate with OAuth 2.0, while a server-side script can use a site token.
The sections below walk each path in turn, starting with the read side.
Read submissions with the Forms API
Polling the Forms API suits scheduled syncs and reporting, including exports. You need a form ID first, which comes from the site's form list. Polling beats webhooks when you want data on a fixed schedule rather than at the moment each visitor submits.
To pull submission data:
- Call
GET /v2/sites/{site_id}/formsto list form schemas and find your form ID. - Call
GET /v2/sites/{site_id}/forms/{form_id}/submissionsto fetch that form's submissions. - Page through results with the
offsetandlimitquery parameters.
For a site-wide view, GET /v2/sites/{site_id}/form_submissions returns submissions across every form on the site.
React to submissions with webhooks
Webhooks replace polling when you need each submission the moment it arrives. Registration happens through the API, and each delivery arrives as a POST your endpoint has to verify and acknowledge. Dashboard-created webhooks skip the signature headers, so the API route is the one to use when validation matters.
To receive real-time events:
- Register a webhook with
POST /v2/sites/{site_id}/webhooksand settriggerTypetoform_submissionalong with your destination URL. - Verify each delivery by concatenating
timestamp + ":" + JSON.stringify(request_body), computing a SHA-256 HMAC, and comparing it to thex-webflow-signatureheader. - Reject requests where the
x-webflow-timestampis more than 5 minutes old, then respond with HTTP 200.
Failed deliveries retry automatically.
Write submissions to CMS collections
Writing form data to the CMS turns submissions into content, for example quote records or directory entries built from an intake form. You can stage items first and publish them later, or create them live in a single call. Either route needs the cms:write scope.
To create items from submission data:
- Create a staged item with
POST /v2/collections/{collection_id}/items;fieldDatamust includenameandslug. - Publish it with
POST /v2/collections/{collection_id}/items/publish, or skip staging withPOST /v2/collections/{collection_id}/items/live. - For batches,
POST /v2/collections/{collection_id}/items/bulkcreates multiple items in one request.
If the request omits cmsLocaleIds, items land only in the primary locale.
What you can build with the Inputflow Webflow integration
Integrating Inputflow with Webflow lets you ship multi-step forms with logic, calculations, and validation without embedding a third-party form widget or writing custom JavaScript. Every example below is a public Made in Webflow project the vendor built with the app.
Four patterns account for most of what teams ship:
- Pricing and quote calculators: The Solar Investment Calculator works out solar panel investment ROI across several steps, using the same variable system that prices any quote form you build.
- Product configurators: The Tiny House Configurator combines conditional logic, calculations, and conditional visibility, while the Food Delivery Form branches steps and recalculates as a visitor builds an order.
- Lead generation quizzes: The Fitness Type Quiz scores answers with variables behind a progress bar, then returns the result in a custom success message.
- Onboarding and signup flows: The Business Onboarding Form mixes logic, validation, branching, and animations, while the User Signup Form adds custom radio buttons, a range slider, and conditional visibility.
Once submissions start arriving, customize the notification emails your team receives, then connect the Webflow MCP server so an agent can read and export that submission data for you.
Frequently asked questions
For production, yes on both sides. Adding custom code to a page head requires a paid Site plan or a paid Workspace plan, so a free Webflow account cannot run the Inputflow script on a published site. On the Inputflow side, the free trial runs without limits on
.webflow.iodomains, and a paid Inputflow plan is required once the form goes on a custom domain.The most common cause is a missing Inputflow script on the page. If the form runs on
.webflow.iobut not on your production domain, your Inputflow account lacks the paid plan production domains require. The common errors and mistakes guide covers both cases.By default, yes. Every Inputflow form is a Webflow form, so one visitor submission counts once in each system. Submission allowances differ by Site plan (Form submissions). Routing submissions to a custom webhook bypasses the native submission count entirely.
Yes. Configure a destination webhook in Inputflow's settings and the submission posts straight to your automation platform. Visitors still experience a normal Webflow form, but the data is no longer recorded as a native Webflow form submission.
Through the Webflow Data API, since Inputflow has no public API and default submissions land in the native form system. Start with the List Form Submissions endpoint using a token that carries the
forms:readscope, then paginate through results.
Description
Turns native Webflow forms into multi-step forms with branching and calculations. It also adds validation. Set up through the Inputflow app and one script tag, then route submissions natively or to Zapier and Make via webhooks.
This integration page is provided for informational and convenience purposes only.
flowstar-polls-post-purchase-survey-nps
Formly
Connect Formly, an attribute-driven multistep form library by VI Designs, with Webflow to add multistep flows, conditional logic, and progress indicators to native form blocks without custom JavaScript.
Flowstar: Contact Form Builder
Connect Flowstar: Contact Form Builder with Webflow to add multi-step booking, order, registration, and pre-order forms with embedded, popup, and targeted widget display modes.
Flowstar Form Connectors
Flowstar Form Connectors syncs Webflow form submissions to Mailchimp, SendGrid, MailerLite, or GetResponse. Check current app availability and the native webhook route before you build.
Growform
Connect Growform with Webflow to handle complex lead qualification with multi-step flows and conditional logic.
Flowstar Polls
Add interactive polls and surveys to a Webflow site with the Flowstar Polls app.
Formester
Connect Formester, a form builder platform, with Webflow to capture form submissions and route data to CMS collections.
Documentero
Connect Documentero, a cloud-based document generation platform, with Webflow to create Word, Excel, and PDF documents from form submissions and CMS data.
Gravity Forms
Gravity Forms runs on WordPress, so connecting it to Webflow means embedding the hosted form or routing entries into the Webflow CMS.
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.
