Flodesk

Flodesk pairs embeddable signup forms with automated email workflows and subscriber segmentation, exactly the email marketing layer your Webflow site doesn't ship with out of the box.

Connecting the two turns static form submissions into active subscriber records that can trigger welcome sequences, lead magnet deliveries, or segment-based campaigns automatically.

Freelance designers, newsletter-driven creators, e-commerce store owners running post-purchase sequences, and agencies that need email capture live on day one all reach for this integration. Content creators embedding forms in blog templates and service providers automating client follow-ups benefit too.

How to integrate Flodesk with Webflow

What is Flodesk? Flodesk is an email marketing platform with built-in e-commerce checkout, landing pages, and workflow automations. It targets small businesses, creators, and solo entrepreneurs who want visual email design tools alongside subscriber management. API access comes with the Pro and Everything plans.

Reach for this integration when you need site visitors to join segmented email lists automatically. A photographer's portfolio site might capture inquiries through a popup form and route them into a post-inquiry nurture sequence. An e-commerce store might add customers to a purchase segment after checkout to trigger follow-up emails. Use embed codes for on-page signup forms, an automation platform for routing form submissions into Flodesk, or the API for custom server-side sync.

You can connect Flodesk to your site in three ways:

• Flodesk embed codes let you add popup, inline, or full-page signup forms to any page without writing custom logic.
• Automation platforms connect specific triggers like New Form Submission, New Order, Form submitted, New product added, and New collection item to Flodesk actions such as creating or updating a subscriber, assigning a segment, or adding a subscriber to a workflow.
• The Webflow and Flodesk APIs give you full control over bidirectional data sync between subscriber records and CMS collections, but you'll need server-side development.

Most implementations combine embed codes for form display with an automation platform for data routing, or take the API path when the project calls for real-time webhook-based sync.

Embed Flodesk forms on your site

Flodesk generates embed code snippets you can paste directly into your project to display signup forms. This method works for popup forms triggered by scroll or timing, inline forms rendered inside the page layout, and full-page forms hosted by Flodesk. Popup and inline embeds need a paid site plan. They rely on custom code in head and body tags and Code Embed elements. Full-page forms work on any plan since they only need a URL added to a link element. You control all form styling inside Flodesk's form builder, not the Designer's Style panel, because embedded forms use iframe isolation.

Flodesk offers four form types, each with different setup requirements:

• Popup forms need one code snippet added to the site's head code
• Inline forms need two snippets: one in the head code and one in a Code Embed element on the page
• Full-page forms need no code at all, just a link to the Flodesk-hosted URL
• Link in Bio forms also need no code and ship as direct URLs

Use popup or inline forms when you want the signup experience on your site. Use full-page or Link in Bio forms when a hosted signup page works better.

Embedded forms don't render in the Designer canvas or preview mode. You need to publish the site to see them on the live URL.

Add a popup form site-wide

Popup forms appear as overlays across your entire site, triggered by timing or scroll depth you configure in Flodesk. You only need one snippet placed in the site's head code.

To add a popup form:

1. In Flodesk, go to the Forms tab and open or create a popup form.
2. Click Embed in the top-right corner of the form editor, or hover over the form card on the dashboard and select the three-dot menu, then Embed.
3. Copy the header code snippet.
4. Open Site settings (gear icon in the left panel) and go to the Custom Code tab.
5. Paste the snippet into the Head Code field (labeled "Before </head> tag").
6. Click Save Changes and publish your site.

To scope the popup to a single page instead of the full site, paste the header code in the page's custom code section. Open the Pages panel, click the gear icon next to the target page, go to Page Settings, scroll to Custom Code, and paste in the Head Code field.

Embed an inline form in a page section

Inline forms render as visible elements inside your page layout — within a blog post, a footer section, or a sidebar. They need two code snippets. Miss either one and the form won't display.

To embed an inline form:

1. In Flodesk, open or create an inline form and click Embed. The panel shows two separate snippets: header code and inline code. Copy both.
2. Add the header code to your site-wide head code (in Site settings > Custom Code > Head Code) or to a specific page's head code section.
3. Navigate to the page where the form should appear.
4. Open the Add panel (the + icon) and search for "Embed."
5. Drag the Code Embed element onto the canvas at the desired position.
6. Click the element to open its code editor, paste the Flodesk inline code snippet, and click Save & Close.
7. A gray placeholder block appears on the canvas. That's expected.
8. Publish the site and visit the live URL to confirm the form renders.

If you need the same inline form in multiple locations on one page, create separate <div> containers with unique IDs and modify each embed snippet's data-flodesk-target attribute to match the corresponding div. Use a separate Code Embed element for each placement.

Link to a full-page form

Full-page forms are hosted by Flodesk and need no embed code at all. Clicking the link takes visitors to a Flodesk-hosted signup page. This approach works on any plan, including free Starter plans.

To link a full-page form:

1. In Flodesk, go to the Forms dashboard, hover over the full-page form card, click the three-dot menu, and select Get form link. Copy the URL.
2. Select any button, text link, or nav link element in the Designer.
3. In the Settings panel, set the link type to URL and paste the Flodesk form URL.
4. Optionally enable Open in new tab.
5. Publish the site.

Collecting subscribers this way works well when you can't use custom code or don't have a paid site plan.

Connect native forms to Flodesk with Zapier or viaSocket

If you'd rather use native form elements (styled with the Designer) instead of Flodesk's embedded forms, automation platforms bridge the gap. Zapier supports triggers like New Form Submission and New Order alongside Flodesk actions for subscriber creation, segment assignment, and workflow enrollment. viaSocket supports triggers including New Form Submission, New Order, Updated Order, Site Published, Page Created, Page Deleted, and collection item events, plus Flodesk actions for creating or updating subscribers, managing segments, and adding subscribers to workflows. IFTTT supports triggers such as Form submitted, New order, New product added, and New collection item, along with actions like Publish site, Create collection item, Create live collection item, and Fulfill order, paired with Flodesk's Create or update subscriber action. IFTTT uses polling triggers (not instant) and requires a paid IFTTT Pro subscription.

Zapier ships the most complete pre-built template library for this connection. It offers instant triggers for form submissions and orders, with Flodesk actions for subscriber creation, segment assignment, and workflow enrollment. You can toggle double opt-in directly in the Zap configuration.

Route form submissions through Zapier

Zapier's "New Form Submission" trigger fires instantly when someone submits a native form. You can map individual form fields to Flodesk subscriber fields during setup.

To connect forms to Flodesk via Zapier:

1. Create a new Zap in Zapier. Select Webflow as the trigger app and choose New Form Submission as the trigger event.
2. Connect your Webflow account and pick the site and form to monitor.
3. Select Flodesk as the action app and choose Create or Update Subscriber.
4. Connect your Flodesk account and map the form fields (email, first name, last name) to the corresponding Flodesk subscriber fields.
5. Pick a Flodesk segment to assign the new subscriber to, and configure double opt-in if you need it.
6. Test the Zap and turn it on.

Zapier also offers pre-built templates for common workflows:

• Capture Webflow form submissions and update Flodesk subscribers
• Add Webflow orders to Flodesk subscriber segments
• Create Flodesk segments from Webflow form submissions

These templates make useful starting points when you want to launch a workflow faster and customize it afterward.

Zapier's Webflow trigger only fires for form submissions received on a published site with a custom domain, so you'll need a paid site plan.

Use viaSocket for expanded trigger options

viaSocket supports a wider set of triggers than Zapier, including CMS collection item events, page creation and deletion, inventory changes, and user account updates. On the Flodesk side, viaSocket covers the same core actions as Zapier (creating or updating subscribers, managing segments, adding subscribers to workflows, unsubscribing, and finding subscribers) and adds capabilities Zapier lacks: listing all subscribers, listing segments and workflows, listing segment colors, and creating custom fields.

To set up a viaSocket workflow:

1. Go to viaSocket's Webflow-Flodesk integration page and pick a trigger-action combination.
2. Connect your Webflow and Flodesk accounts.
3. Map fields between the trigger payload and the Flodesk action inputs.
4. Add conditional logic or filters if you need to route different form submissions to different segments.
5. Activate the workflow.

viaSocket supports instant triggers for real-time sync and scheduled triggers that poll at up to 15-minute intervals. Its built-in conditional logic lets you filter by form name or field value before creating the Flodesk subscriber.

Build with the Webflow and Flodesk APIs

For bidirectional data sync, custom field mapping, or CMS-based subscriber management, the API path gives you full control. You'll need server-side development for this approach, typically using serverless functions (short-lived server scripts that run on demand) on platforms like Vercel or Netlify. Flodesk API access requires a Pro or Everything plan. Build everything on the v2 API — the v1 API hit end-of-life on March 31, 2025.

The relevant APIs for this integration:

• The Flodesk REST API handles subscriber management, segment assignment, workflow enrollment, custom fields, and webhook registration
• The Webflow Data API handles CMS collections, form submissions, and site publishing
• Webhooks fire real-time events like form_submission and order_created that your server can forward to Flodesk

Together they cover custom server-side workflows that no-code tools can't handle.

Flodesk authenticates via API key (used as HTTP Basic Auth username with an empty password) or OAuth2 for multi-account apps. For the Data API, you'll authenticate with Bearer tokens — either site tokens or OAuth access tokens. Both APIs return JSON.

Sync form submissions to Flodesk subscribers

When a visitor submits a native form, a webhook can fire to your server, which then creates or updates a Flodesk subscriber and assigns them to a segment.

To implement this flow:

1. Register a webhook for the form_submission trigger type by calling POST /v2/sites/{site_id}/webhooks. Use the filter parameter to target a specific form by name (for example, { "name": "Newsletter Signup" }). You'll need the sites:write OAuth scope.
2. Build a serverless function that receives the webhook payload, reads the email and name values from payload.data, and calls Flodesk's POST /v1/subscribers endpoint. The field keys in payload.data should match your actual form field names. This endpoint uses upsert behavior, so it creates a new subscriber or updates an existing one matched by email without creating duplicates.
3. After creating the subscriber, call POST /v1/subscribers/{id}/segments with the target segment IDs to assign the subscriber to the correct list.
4. Verify the webhook signature using the x-webflow-signature header, which contains an HMAC-SHA256 hash you can compute from the payload and your webhook secret to confirm the request is authentic.

export default async function handler(req, res) {
  const { payload } = req.body;
  const email = payload.data['email'];
  const firstName = payload.data['first-name'];

  const authHeader = `Basic ${Buffer.from(
    process.env.FLODESK_API_KEY + ':'
  ).toString('base64')}`;

  // Upsert subscriber
  const subResponse = await fetch('https://api.flodesk.com/v1/subscribers', {
    method: 'POST',
    headers: { 'Authorization': authHeader, 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, first_name: firstName })
  });
  const subscriber = await subResponse.json();

  // Assign to segment
  await fetch(
    `https://api.flodesk.com/v1/subscribers/${subscriber.id}/segments`,
    {
      method: 'POST',
      headers: { 'Authorization': authHeader, 'Content-Type': 'application/json' },
      body: JSON.stringify({ segment_ids: [process.env.FLODESK_SEGMENT_ID] })
    }
  );

  res.status(200).json({ ok: true });
}

Store the Flodesk API key in environment variables. Never expose it in client-side code. Flodesk API keys grant full account access with no scoped permissions, so create a separate key per integration.

Create CMS items from new Flodesk subscribers

When a subscriber is added in Flodesk (through any channel), a webhook can fire to your server, which then creates a corresponding item in a CMS collection. This pattern supports member directories, gated content access records, or community listing pages.

To implement this flow:

1. Register a Flodesk webhook via POST /v1/webhooks for the subscriber.created event. Flodesk has no UI for webhook configuration; you handle all setup through the API.

{
  "name": "Webflow CMS Sync",
  "post_url": "https://your-function.vercel.app/api/create-cms-item",
  "events": ["subscriber.created"]
}

2. Build a serverless function that receives the Flodesk webhook payload and maps subscriber fields to CMS collection fields.
3. Create a live CMS item by calling POST /v2/collections/{collection_id}/items/live with the mapped field data. The /live endpoint publishes the item directly without a separate publish step.

export default async function handler(req, res) {
  const { subscriber } = req.body;

  await fetch(
    `https://api.webflow.com/v2/collections/${process.env.WF_COLLECTION_ID}/items/live`,
    {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.WEBFLOW_TOKEN}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        fieldData: {
          name: `${subscriber.first_name} ${subscriber.last_name}`,
          email: subscriber.email,
          'flodesk-id': subscriber.id,
          slug: subscriber.email.replace('@', '-at-').replace(/\./g, '-')
        }
      })
    }
  );

  res.status(200).json({ ok: true });
}

Store the Flodesk subscriber ID as a dedicated CMS field (flodesk-id). That makes later updates faster — you can look up the record directly instead of scanning the full collection. Flodesk exposes only three webhook events: subscriber.created, subscriber.added_to_segment, and subscriber.unsubscribed. There are no events for email opens, clicks, or workflow completions. This setup creates a published CMS item for each new subscriber and keeps later updates easier to manage.

What can you build with the Flodesk Webflow integration?

Pairing Flodesk with your site turns visitors into segmented email subscribers and triggers automated sequences without manual data handling between platforms.

• Newsletter capture in blog templates: Add an inline Flodesk form inside a CMS blog post template so every article includes a signup prompt. New subscribers land in a segment that triggers a welcome email sequence with links to your most popular posts.
• Lead magnet delivery pages: Build a landing page with a Flodesk inline form that collects an email address in exchange for a downloadable resource. Segment assignment on submission triggers a Flodesk workflow that automatically sends the download link via email.
• Post-purchase follow-up for e-commerce: Use Zapier to route order events into Flodesk purchase segments. Customers who buy a product automatically enter a post-purchase email sequence with usage tips, review requests, or related product recommendations.
• Subscriber-driven CMS directories: Use the Flodesk subscriber.created webhook and the Data API to auto-generate directory entries, community member profiles, or event attendee listings every time a new subscriber joins a specific segment.

If you need more control over real-time data sync between subscriber records and CMS collections, the API integration path covers those cases with full flexibility.