Kit

Webflow does not include built-in email marketing, subscriber management, or automated email sequences. When visitors sign up through a form, there is no native way to tag them by interest, enroll them in a drip sequence, or deliver a lead magnet automatically. The gap between capturing a submission and nurturing that subscriber requires an external tool.

Kit (formerly ConvertKit) fills that gap by connecting form submissions on a Webflow site to automated email workflows. Embedding a Kit form or routing Webflow form data to Kit through an automation platform adds subscriber tagging, segmented sequences, and automated delivery to any Webflow page. The two tools together turn a static site into an audience-building system.

This integration is most useful for creators, course builders, newsletter publishers, coaches, and SaaS marketers who run their websites on Webflow. Freelancers and agencies building client sites also benefit from packaging Webflow design with Kit email funnels as a complete deliverable.

How to integrate Kit with Webflow

What is Kit? Kit is an email marketing and newsletter platform built for creators, formerly known as ConvertKit. It provides embeddable signup forms, visual email automation builders, subscriber tagging, drip sequences, and digital product sales through Stripe integration.

Teams use Kit with Webflow when they need email capture forms on Webflow pages that feed directly into automated subscriber workflows. A course creator might embed different Kit forms across a Webflow site to tag subscribers by topic interest and trigger separate welcome sequences for each group.

The Kit-Webflow integration supports four approaches:

• Kit form embeds add signup forms to any Webflow page using generated JavaScript or HTML snippets without writing custom code.
• Webflow native forms with a custom action URL route form submissions directly to Kit while keeping full design control in Webflow.
• Zapier, Make, and viaSocket connect Webflow form submissions to Kit actions like tagging, sequence enrollment, and subscriber creation through pre-built automation workflows.
• The Webflow Data API (V2) and Kit APIs give you full control over subscriber syncing, Webflow CMS updates, and webhook-driven workflows, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Embed Kit forms with Code Embed elements

Kit generates embeddable signup forms in four display formats — inline, modal, slide-in, and sticky bar. Pasting a Kit form's JavaScript snippet into a Webflow Code Embed element places the form directly on your page. This is Kit's officially recommended embed method because changes made to the form in Kit automatically appear on the published Webflow site. The Code Embed element requires an active paid site plan or a qualifying Workspace plan (Core, Growth, Agency, or Freelancer).

To embed a Kit form using JavaScript:

1. In Kit, go to Grow > Landing Pages & Forms and open an existing form or create a new one.
2. Click the Embed button at the top right of the form builder.
3. Select the JavaScript tab in the embed modal and click Copy.
4. In Webflow, open the Add panel and drag a Code Embed element onto the canvas where the form should appear.
5. Double-click the Code Embed element to open the code editor and paste the Kit JavaScript code.
6. Click Save & Close and then publish the site.

Kit forms do not render inside the Webflow editor. Preview the page or visit the published site to confirm the form displays correctly. If the form is not visible, check the Navigator panel to locate the Code Embed element on the canvas.

Kit's JavaScript embed format uses an HTML-formatted <script> tag. It goes into the Code Embed element, not a standalone script field. The form inherits Kit's default CSS styling, which may conflict with Webflow's global CSS resets. Add CSS through Webflow's custom code in head and body tags and target Kit's documented class names (.formkit-header, .formkit-input, .formkit-submit) to override styles as needed.

Use the HTML embed as an alternative

Kit also provides a raw HTML embed option. This method is appropriate only for cases where you need to edit the form markup directly in Webflow. Unlike the JavaScript embed, changes made to the form in Kit are not reflected on the Webflow site automatically — you must re-copy and re-paste the HTML after every edit.

To use the HTML embed:

1. Open your form in Kit's form builder and click Embed.
2. Select the HTML tab and copy the code.
3. Paste it into a Code Embed element in Webflow following the same steps as the JavaScript method.

The HTML embed includes Kit's CSS by default. You can strip the styles manually for a fully custom-styled form. Use this method only when you have a specific reason to edit form markup directly.

Link to Kit landing pages from Webflow

Kit landing pages are standalone pages hosted on Kit's servers. They cannot be embedded within a Webflow page. Instead, add a button or link element in Webflow that points to the Kit landing page URL. This approach works on any Webflow plan, including free accounts, since it only requires linking to an external URL.

To link a Kit landing page:

1. In Kit, go to Grow > Landing Pages & Forms and create or open a landing page.
2. Copy the share URL from the Embed modal.
3. In Webflow, add a button or link element and set its URL to the Kit landing page URL.
4. Publish the Webflow site.

This method keeps the Kit landing page separate from the Webflow site. It works well for dedicated opt-in pages linked from navigation menus or campaign CTAs.

Route Webflow native forms to Kit

For full design control over the form layout, build the form in Webflow and route submissions to Kit using a custom action URL. This bypasses Webflow's form processing entirely — submissions go directly to Kit and do not appear in the Webflow form submissions dashboard. A paid site plan is required to use custom form action URLs on custom domains.

To set up a Webflow form with a Kit action URL:

1. In Kit, open the form you want to receive submissions, click Embed, and select the HTML tab.
2. In the raw HTML, locate the <form> tag and copy the URL in the action attribute (typically formatted as https://app.convertkit.com/forms/{FORM_ID}/subscriptions).
3. In Webflow, select your form element and open the Settings panel.
4. Remove any existing Webflow or email notifications by clicking the delete icon next to Send to.
5. Click the add icon next to Send to and select Custom action.
6. Paste the Kit form action URL and set the method to POST.
7. Click Save and publish the site.

Webflow's default email field name is Email, but Kit expects email_address. Without renaming this field, the form submits successfully but Kit receives no usable data — a silent failure. Select the email input field in Webflow, open the Settings panel, and change the field Name from Email to email_address. For first name fields, use first_name.

After submission, the page redirects to Kit's endpoint response instead of showing Webflow's native success state. This method gives you complete design control but does not auto-update when you change form settings in Kit.

Connect with Zapier, Make, and other automation tools

Zapier, Make, and viaSocket each provide direct Webflow-to-Kit connections that require no custom code. These platforms act as middleware, translating Webflow form submissions into Kit subscriber actions like tagging, sequence enrollment, and custom field updates.

Zapier offers pre-built templates for the Webflow + Kit combination at zapier.com/apps/webflow/integrations/kit. Available trigger and action patterns include:

• Webflow form submission → Kit subscriber creation
• Webflow form submission → Kit sequence enrollment
• Webflow form field data → Kit tags for segmentation

These templates cover the most common Webflow-named subscriber capture and follow-up workflows without custom code. They are a practical starting point if you want to avoid server-side implementation.

Make provides modules for the Webflow + Kit combination, including Webflow triggers and Kit actions. Supported combinations include:

• Webflow Watch Events → Kit Add a Subscriber to Form
• Webflow Watch Events → Kit Add a Subscriber to Sequence
• Webflow Watch Events → Kit Add a Tag to a Subscriber

These examples keep Webflow explicit in the trigger itself and support custom Make scenarios even though the integration page does not list pre-built templates for this combination. They are best suited to teams that want more flexible branching logic than a simple template provides.

viaSocket lists pre-built automation templates that explicitly connect Webflow events to Kit actions. Examples include:

• Webflow new form submission → Kit add tag to subscriber
• Webflow new form submission → Kit create or update subscriber
• Webflow updated order → Kit remove tag from subscriber
• Webflow new order → Kit create purchase

These templates make viaSocket suitable for common subscriber and ecommerce automations without custom code. They are most useful when your workflow matches one of the listed templates closely.

One gotcha applies to Zapier specifically: the Webflow form submission trigger cannot detect a form until at least one live submission has been made on the published site. Submit a test entry after publishing before configuring the Zapier workflow.

Build with the Webflow and Kit APIs

For use cases that go beyond form-to-subscriber workflows — like syncing Kit subscriber events back to the Webflow CMS, behavioral tagging based on page visits, or bulk subscriber management — the Webflow and Kit APIs provide full control. This path requires server-side development using serverless functions (Vercel, Netlify, or AWS Lambda) since Webflow's Code Embed element does not support server-side languages, and client-side Kit API calls are CORS-blocked.

• The Kit API (V4) handles subscriber creation, tagging, sequence enrollment, custom fields, broadcast management, and outbound webhooks. Authenticate with an API key via the X-Kit-Api-Key header for standard operations or OAuth 2.0 for bulk endpoints and purchase creation.
• Webflow's Data API (V2) handles CMS collection items and form submissions. Authenticate with a Bearer token.
• Webflow webhooks trigger real-time events like form_submission, collection_item_created, and ecomm_new_order for pushing data to Kit as it happens.

All Kit V4 endpoints use the base URL https://api.kit.com/v4/.

The older V3 API (api.convertkit.com/v3/) is no longer in active development. V3 API keys are not compatible with V4 — create new keys in Kit's account settings under the Developer tab.

Sync Webflow form submissions to Kit subscribers

This is the most common API pattern. A Webflow webhook fires on each form submission and sends the data to a server-side handler that creates the subscriber in Kit.

To implement this workflow:

1. Register a Webflow webhook for form submissions:

curl -X POST https://api.webflow.com/v2/sites/{site_id}/webhooks \
 -H "Authorization: Bearer <token>" \
 -H "Content-Type: application/json" \
 -d '{"triggerType": "form_submission", "url": "https://your-server.com/webhook-handler"}'



2. In the webhook handler, verify the payload using the x-webflow-signature and x-webflow-timestamp headers. Extract email and First Name from the payload.data object.
3. Create or update the subscriber in Kit:

curl --request POST \
 --url https://api.kit.com/v4/subscribers \
 --header 'Content-Type: application/json' \
 --header 'X-Kit-Api-Key: <api-key>' \
 --data '{"email_address": "alice@example.com", "first_name": "Alice"}'



4. Add the subscriber to a Kit form to trigger any connected Visual Automations:

curl --request POST \
 --url https://api.kit.com/v4/forms/{form_id}/subscribers \
 --header 'Content-Type: application/json' \
 --header 'X-Kit-Api-Key: <api-key>' \
 --data '{"email_address": "alice@example.com"}'



5. Optionally apply a segmentation tag:

curl --request POST \
 --url https://api.kit.com/v4/tags/{tag_id}/subscribers \
 --header 'Content-Type: application/json' \
 --header 'X-Kit-Api-Key: <api-key>' \
 --data '{"email_address": "alice@example.com"}'



The POST /v4/subscribers endpoint is an upsert. It creates a new subscriber if the email does not exist and updates first_name if it does. Tag and form-add endpoints are idempotent and return 200 even if the subscriber is already tagged or subscribed. Always create the subscriber before tagging or adding to a form.

Sync Kit events to Webflow CMS items

Kit webhooks can push subscriber events (tag additions, sequence completions, purchases) to a server-side handler that writes data back to Webflow CMS collections. This is useful for displaying subscriber counts, building public member directories, or logging purchase activity on the Webflow site.

To set up a Kit-to-Webflow CMS sync:

1. Register a Kit webhook for the event you want to track:

curl --request POST \
 --url https://api.kit.com/v4/webhooks \
 --header 'Content-Type: application/json' \
 --header 'X-Kit-Api-Key: <api-key>' \
 --data '{
   "target_url": "https://your-server.com/kit-webhook",
   "event": {"name": "subscriber.tag_add", "tag_id": 37}
 }'



2. In the handler, extract subscriber data from the Kit webhook payload and map it to Webflow CMS fields.
3. Create or update a CMS item in Webflow:

curl -X POST https://api.webflow.com/v2/collections/{collection_id}/items/live \
 -H "Authorization: Bearer <token>" \
 -H "Content-Type: application/json" \
 -d '{"fieldData": {"name": "Alice", "slug": "alice", "email": "alice@example.com"}}'



Kit webhook payloads include subscriber.id and subscriber.email_address, but Webflow PATCH operations require the CMS item's _id. Your middleware needs to maintain a mapping between Kit subscriber IDs and Webflow item IDs, or query the Webflow CMS to resolve the record before issuing updates. Keep in mind that CMS item limits vary by Webflow plan.

What can you build with the Kit Webflow integration?

Integrating Kit with Webflow lets you turn any Webflow page into a subscriber acquisition and nurturing system without managing a separate email platform login for basic form handling.

• Segmented newsletter signups across multiple pages: Place different Kit inline forms on blog posts, landing pages, and exit-intent modals, each tagging subscribers by topic interest. A food blogger could embed separate forms for "quick meals" and "baking" categories, routing each group into dedicated Kit sequences.
• Course enrollment funnels with automated onboarding: Build a Webflow sales page for an online course and connect the enrollment form to a Kit drip sequence that delivers lessons over time. Kit's tagging separates buyers from browsers, so launch emails only reach prospects who have not purchased.
• Lead magnet delivery by content topic: Add Kit forms to specific Webflow blog posts or resource pages. Each form triggers a Kit automation that delivers a relevant PDF, checklist, or template and tags the subscriber for follow-up sequences matched to that resource.
• Post-purchase email sequences for Webflow ecommerce: Use a Webflow ecomm_new_order webhook to create a Kit subscriber tagged by product category. Kit sends order confirmations, usage tips, and cross-sell recommendations automatically based on what the customer bought.

If you need more control over behavioral segmentation based on page visits or complex multi-step CMS syncing, the API integration path covers those cases with full flexibility.