Buttondown

Webflow handles site design, hosting, and content management, but it doesn't include built-in email newsletter tools. Buttondown fills that gap by giving Webflow sites a subscription backend—embed a signup form, route submissions through automation tools, or connect both platforms through the Webflow Data API and Buttondown's API to create subscribers, tag them by source, and turn Webflow CMS blog posts into email campaigns.

This integration fits freelancers collecting subscribers on portfolio sites, SaaS teams building pre-launch waitlists, and content marketers syndicating Webflow blog posts to their email audience. If you publish on Webflow and communicate with readers through email, these two tools work together to connect both sides.

How to integrate Buttondown with Webflow

What is Buttondown? Buttondown is an email newsletter platform built for writers and developers. It supports subscriber management, tag-based segmentation, paid subscriptions through Stripe, and a REST API for custom integrations. Buttondown also offers RSS-to-email, webhook events, and Markdown-based email composition.

Teams connect Buttondown with Webflow when they need to collect email subscribers directly from their website without building a custom backend. The most common setup places a signup form on a Webflow landing page or blog sidebar, with Buttondown handling double opt-in, subscriber storage, and email delivery.

The Buttondown-Webflow integration supports 3 approaches:

• Embedded signup forms handle subscriber collection using Buttondown's HTML form or Webflow's native form element, with no server-side code required.
• Zapier lets you connect Webflow form submissions to Buttondown subscriber creation and tagging through automated workflows.
• The Webflow and Buttondown APIs give you full control over subscriber management, email creation, and CMS-to-newsletter sync, but require server-side development.

Most implementations start with an embedded form and add automation or API integration as the newsletter grows.

Add Buttondown signup forms with Code Embed elements

Buttondown provides an HTML form snippet that submits directly to its subscribe endpoint. You can paste this form into a Code Embed element in Webflow, giving you a working signup form without any backend code. Buttondown handles double opt-in and GDPR compliance automatically through the embed. A paid Webflow site plan is required to use the Code Embed element.

To set up the embedded form:

1. Log in to Buttondown and go to Settings > Embedding at buttondown.com/settings/embedding.
2. Copy the HTML from the Form section.
3. In Webflow, drag a Code Embed element onto your page from the Elements panel.
4. Paste the Buttondown form HTML into the code editor and click Save & Close.
5. Publish your site. Code Embed content only renders on published sites, not in preview mode.

The default form HTML looks like this:

<form
  action="https://buttondown.com/api/emails/embed-subscribe/YOUR-USERNAME"
  method="post"
  class="embeddable-buttondown-form"
>
  <label for="email">Email</label>
  <input type="email" name="email" placeholder="you@example.com" />
  <input type="hidden" value="1" name="embed" />
  <input type="submit" value="Subscribe" />
</form>

The embedded form supports these capabilities:

• Collecting email addresses with automatic double opt-in confirmation
• Capturing additional subscriber metadata using metadata__field-name input fields (double underscore prefix)
• Tagging subscribers by source page using a hidden <input type="hidden" name="tag" value="webflow-homepage" /> field
• Adding radio buttons for subscriber-selected tag segmentation

The embed hidden input is required. It signals to Buttondown that the submission comes from an embedded form. Without it, submissions may not process correctly.

Use a Webflow native form with Buttondown's action URL

If you want full visual control over your form's design using Webflow's built-in form element, you can point the form's action URL to Buttondown's subscribe endpoint instead of using a Code Embed element.

To configure a native Webflow form:

1. In Buttondown, go to Settings > Embedding and copy the subscribe URL: https://buttondown.com/api/emails/embed-subscribe/YOUR-USERNAME.
2. In Webflow, select your Form element and open the settings panel (gear icon).
3. Paste the Buttondown URL into the Action field.
4. Set Method to POST.
5. Publish your site.

After publishing, Buttondown handles the submission through that action URL instead of Webflow's native form processing.

When a custom action URL is set, Webflow stops processing the form natively. Submissions will not appear in Webflow's Site Settings > Forms panel. The page may redirect to Buttondown's confirmation page on submit, so Webflow's built-in success and error states may not display as expected.

Link to your Buttondown subscription page

For sites on free Webflow plans, or when you want the simplest possible setup, link directly to your hosted Buttondown subscription page. No Code Embed element is required.

To add a subscription link:

1. In Buttondown, go to Settings > Embedding and copy your subscription URL.
2. In Webflow, add a Button or Text Link element.
3. Set the link destination to your Buttondown subscription URL.
4. Publish your site.

Visitors who click the link will leave your Webflow site and complete their subscription on Buttondown's hosted page. This approach works on any Webflow plan, including free.

Connect with Zapier

Zapier supports direct Webflow-to-Buttondown connections, so you can build workflows without writing code. Zapier offers a pre-built template specifically for this pair. This approach preserves Webflow's native form success and error states because Webflow processes the submission normally before passing data to the automation tool.

To set up the Zapier integration:

1. Create or log in to a Zapier account.
2. Create a new Zap with Webflow as the trigger app and select New Form Submission as the trigger event.
3. Choose Buttondown as the action app and select Create Subscriber as the action event.
4. Map the email field from the Webflow form submission to Buttondown's email field.
5. Test and activate the Zap.

Zapier supports these Webflow triggers for Buttondown workflows:

• Webflow: New Form Submission (instant) creates a Buttondown subscriber
• Webflow: New Collection Item (polling) triggers a draft or scheduled email in Buttondown
• Webflow: Site Published (instant) can notify subscribers through Buttondown

These triggers are the main no-code options for passing Webflow events into Buttondown workflows.

Buttondown actions available in Zapier include Create Subscriber, Add Tags to Subscriber, Remove Tag from Subscriber, Create Draft, Create Scheduled Email, and Find a Subscriber. Zapier also supports Buttondown triggers such as New Subscriber and New Paid Subscriber, which can be paired with Webflow actions to write data back to Webflow CMS collections.

Build with the Webflow and Buttondown APIs

For full control over subscriber management, email creation, and CMS-to-newsletter sync, both Webflow and Buttondown expose REST APIs. This path requires server-side development because Buttondown's API does not support CORS for browser-origin requests. Direct fetch() calls from Webflow page JavaScript to Buttondown's API will fail. All API calls must route through an external proxy such as a Cloudflare Worker, Netlify Function, or Vercel Edge Function.

The relevant APIs:

• Buttondown's REST API handles subscriber creation, email drafting, tag management, and webhook registration at https://api.buttondown.com/v1/
• Webflow's Data API handles CMS collections and form submissions
• Webflow webhooks trigger real-time events like form_submission and collection_item_published

Together, these APIs cover subscriber capture, content sync, and event-driven automation between the two platforms.

Pin your Buttondown API version using the X-API-Version header to avoid unexpected breaking changes. Authenticate with Authorization: Token YOUR_API_KEY for Buttondown and Authorization: Bearer YOUR_API_TOKEN for Webflow.

Create subscribers through a serverless proxy

A serverless function sits between the Webflow form and Buttondown's API. This keeps your API key out of browser-accessible code and avoids CORS restrictions.

To implement this:

1. Set up a serverless function on Cloudflare Workers, Netlify Functions, or Vercel Edge Functions. The function accepts a POST request containing the subscriber's email address.
2. Inside the function, call POST https://api.buttondown.com/v1/subscribers with the Authorization: Token header and a JSON body containing email_address and optional tags.
3. In Webflow, add JavaScript to the page's custom code section (before </body>) that intercepts the form submission and sends the data to your serverless function URL.
4. The function returns a response to the browser, and Webflow's inline success state displays normally.

Use the X-Idempotency-Key header (a UUID or similar unique string) on subscriber creation requests to prevent duplicate records on network retries.

Sync CMS blog posts to Buttondown emails

When a new CMS item is published, you can automatically create a corresponding email draft in Buttondown. This eliminates manual content copying between the two platforms.

To implement this:

1. Register a Webflow webhook for the collection_item_published trigger type by calling POST /v2/sites/{site_id}/webhooks with the sites:write scope. Point the webhook URL to your middleware endpoint.
2. When the webhook fires, your middleware extracts the CMS item's title and body content from the payload.
3. The middleware calls POST https://api.buttondown.com/v1/emails with the subject and body fields. As of API version 2026-04-01, new emails default to draft status. Sending requires the X-Buttondown-Live-Dangerously confirmation header.

Verify incoming Webflow webhook requests using the x-webflow-signature header before processing. This pattern works well for content teams who manage blog posts in Webflow CMS and want each published post to generate a newsletter draft for review in Buttondown.

What you can build with the Buttondown Webflow integration

Integrating Buttondown with Webflow lets you capture, segment, and email subscribers directly from your Webflow site without managing a separate email infrastructure backend.

• Newsletter signup on portfolio sites: Place embedded Buttondown forms in the sidebar or footer of a freelancer portfolio built in Webflow. Tag subscribers by the page they signed up from (e.g., "blog" vs. "contact") using hidden input fields, then send targeted updates based on those tags.
• Blog-to-newsletter syndication: Connect a Webflow CMS blog collection to Buttondown through webhooks. Each new published blog post generates a draft email in Buttondown, ready for review and send. Content teams write once and distribute to both web and email audiences.
• Pre-launch waitlist collection: Add a Buttondown subscription link or embedded form to a Webflow landing page for an upcoming product. Collect early interest at zero cost using Buttondown's free tier and Webflow's free plan link method, then send a launch announcement when you are ready.
• Subscriber-gated content verification: Use the Buttondown API's GET /v1/subscribers endpoint to check a visitor's subscription status from your middleware. Display or restrict content on Webflow pages based on whether the visitor is an active subscriber, creating a lightweight membership experience without a full authentication system.

If you need more control over subscriber workflows, conditional tagging, or email scheduling based on CMS events, the API integration path covers those cases with full flexibility.