Trello

Your site collects form submissions, stores Webflow CMS items, and fires webhooks on publish. There's no task board. A new lead sits in the Forms panel until someone manually copies it into a to-do list. Editorial calendars live in another tool, and a page launch never marks the matching task done. Trello tracks that work on boards, lists, and cards, but it cannot read Webflow data on its own.

Connecting the two turns form submissions, orders, and CMS events into Trello cards. Moving a card to a "Done" list can create or update a CMS item. A public board can also appear on a page for clients or customers. The level of control required determines which connection method to use.

Agency project managers can route client requests into client-specific boards. Marketing ops teams can push leads into a visible pipeline. Content editors can sync an editorial board with the CMS, and ecommerce teams can track orders through fulfillment. For product teams, the embed route shows a roadmap without giving visitors a Trello login.

How to integrate Trello with Webflow

What is Trello? Trello is Atlassian's cloud-only work management tool. It organizes work on boards, lists, and cards. Cards can hold due dates, attachments, checklists, and Custom Fields (Standard plan and up). Every plan includes Automation and Power-Ups, and Atlassian runs a Trello MCP server that AI assistants can connect to.

Teams use the website to collect work and Trello to manage it. You can connect the two in four ways, from an AI assistant that works in both tools to a custom API receiver.

• Trello MCP and Webflow's MCP server: Connect both servers to one AI assistant, and a single conversation can read a board and create or update CMS items.
• Code Embed elements and email-to-board: Display Trello cards and boards on pages, and create cards from form notifications without an automation account.
• Automation platforms: Zapier, Make, n8n, IFTTT, and viaSocket connect triggers such as Webflow New Form Submission and Webflow New Order to Trello Create Card, and triggers such as Trello Card Moved to List to Webflow Create Item or Webflow Update Item.
• Webflow Data API and Trello API: Give you full control over webhooks, field mapping, and CMS updates, but require server-side development.

Pick MCP when a person is directing the work, and an automation platform or the APIs when the sync has to run unattended.

Connect Trello MCP and Webflow's MCP server to one AI assistant

Trello and Webflow each publish an MCP server. Add both to an assistant that supports MCP, and it can read a Trello board and act on your Webflow site in the same conversation. This route suits work a person directs, such as turning an editorial board into CMS drafts. It does not run in the background when a visitor submits a form.

Atlassian's Trello MCP guide says the server works on every Trello plan and connects through OAuth 2.0. The assistant only reaches the workspaces you authorize on the consent screen, and it acts with your existing Trello permissions. It can view, create, update, move, and archive cards, but it cannot permanently delete them. Atlassian lists ChatGPT, Claude, Cursor, Visual Studio Code, and Gemini CLI among supported clients. On the Webflow side, the MCP server overview lists CMS tools that manage items with bulk updates and publish or unpublish them.

To set it up:

1. Add https://mcp.trello.com/v1 to your assistant's MCP settings, start the connection, and approve the Trello workspaces it may use.
2. Connect Webflow's MCP server to the same assistant using Webflow's install guide for that client.
3. Ask for the work in plain language, for example: create a draft CMS item in the Blog Posts collection for each card in the Ready list.
4. Review the drafts in Webflow before you publish them.

If you skip a Trello permission on the consent screen, Atlassian's guide says to disconnect Trello MCP and reconnect it with the permission you need.

Embed Trello and create cards with Code Embed elements and email-to-board

Use a Code Embed element when visitors need to see a roadmap or client board without logging in. It renders Trello's official card and board snippets. The element accepts HTML, CSS, and JS up to 50,000 characters. It needs a Core, Growth, Agency, or Freelancer Workspace or an active Site plan. Trello's email-to-board address turns form notifications into cards without an automation account.

Embed an interactive Trello card

Cards embed in interactive mode by default, per Trello's card embedding guide. Boards, covered below, embed only in compact, non-interactive mode. The card embed lets viewers vote, watch, join, or comment, subject to the viewer's permissions on the board. Trello also documents a trello-card-compact class for a smaller card view. Per Trello's sharing rules, a link to a public item on a public board opens for anyone, while private items need board membership.

To embed a card:

1. Open the board, open Menu, select Visibility, and choose Public.
2. Open the card, click the three dots, choose Share, and copy the card link.
3. In Webflow, open the Add panel and drag a Code Embed element onto the canvas.
4. Paste the snippet and replace the href with the card link:

<blockquote class="trello-card">
  <a href="{url to card}">Trello Card</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

5. Save the embed and publish the site.

You only need the script once per page. To embed cards on several pages, you can load the script once using site-wide custom code, under Site settings > Custom code > Footer code. Then keep only the blockquote in each embed.

Embed a compact Trello board

Board embeds use the class trello-board-compact and the same embed.min.js loader, per Trello's board embedding guide. Trello also exposes window.TrelloBoards.create for inserting boards from your own script.

To embed a board:

1. Set the board to Public through Menu > Visibility.
2. Open the board menu, select Print, export and Share, and copy the board link.
3. Add a Code Embed element and paste a blockquote with class="trello-board-compact" and the board link, followed by the script tag:

<blockquote class="trello-board-compact">
  <a href="{url to board}">Trello Board</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

4. Publish the site.

Anyone with the link can view a public board, and only members can edit it. Search engines don't index public boards. Trello's Public Start Up Roadmap template is a ready starting point for this kind of page.

Create Trello cards from form notifications

Trello's email-to-board feature gives each board a unique email address per member. Any email sent to it becomes a card, with the subject as the title and the body as the description. The card is created as the member who owns the address, and Trello warns that anyone you share it with can create cards as you. Form notifications accept any typed email address as a recipient. That lets a submission become a card with no automation account. Starter sites limit notifications to five recipients, all of whom must be Workspace members. Sending to an external address needs a paid Site plan, per the Form submissions article.

To set up the integration:

1. In Trello, open the board menu, select Email-to-board, and copy the address from the Email address for this board field.
2. In Webflow, select the form, open the Settings panel, and choose Email Notifications under Send to.
3. Add the Trello address as a recipient, set the sender name, reply-to, subject, and message, then click Apply.
4. Publish the site and submit a test entry.

Trello reads a few conventions out of the email:

• Labels: Add #labelname, #labelcolor, or #labelnumber to the subject to apply a label.
• Members: Add a member's @username to the subject, or on its own line in the body, to add them to the card.
• Replies: For 7 days, replies in the thread that include the board address become comments on the card instead of new cards.
• Size: An email over 10 MB, attachments included, does not create a card.

Use an automation platform when you need Custom Fields or routing to different lists.

Connect with Zapier, Make, n8n, IFTTT, or viaSocket

Each of these platforms has both a Webflow side and a Trello side. Webflow triggers such as New Form Submission, New Order, Form submitted, and Watch Events feed Trello actions such as Create Card, and Trello triggers such as New Card or Card Moved to List feed Webflow actions such as Create Item and Update Item. n8n, viaSocket, and IFTTT each publish a Webflow and Trello pairing page, and Zapier publishes ready-made templates for the pair. n8n's Webflow Trigger covers events such as Webflow Collection Item Created and Webflow Site Publish. IFTTT's Webflow and Trello triggers poll rather than fire instantly: its connection page says IFTTT checks every 5 minutes on Pro and Pro+ and every hour on Free.

Common pairings include:

• Zapier: Webflow New Form Submission (Instant) → Trello Create Card, via Zapier's Send Webflow form data to Trello template.
• Zapier: Webflow New Order → Trello Create Card, which you assemble from the same trigger and action lists.
• Zapier: Trello New Card → Webflow Create Item, via the New Card template.
• Zapier: Trello Card Moved to List → Webflow Create Item, via the Card Moved template. Webflow Update Item and Webflow Update Live Item are also available as actions.
• Make: Webflow Watch Events → Trello Create a Card, plus Trello Watch Cards Moved to a List → Webflow Update an Item. Both are built as custom scenarios.
• n8n: Webflow Trigger (Form Submission, Collection Item Created, Ecomm New Order, Site Publish) → Trello node card create. The reverse runs Trello Trigger → Webflow node Item Create or Update.
• IFTTT: Webflow Form submitted or New order → Trello Create a card, and Trello Card added to list → Webflow Create collection item.
• viaSocket: Webflow New Form Submission → Create Trello Card is an available combination. Ready-made flows include New/Updated Board in Trello → Create Live Item in Webflow.

Start from a published template where one exists, then adjust the field mapping.

Set up a Zapier Zap from form submissions to Trello cards

Zapier needs at least one submission on the form before you connect it, per Zapier's Webflow guide. The Trello Create Card action requires a Board ID, a List ID, and a card name. Everything else on the card is optional mapping.

To build the Zap:

1. Publish the form and submit one test entry.
2. In Zapier, connect your Webflow account, choose the Webflow New Form Submission trigger, and pick the Site and Form. (Zapier is also listed in Webflow Apps.)
3. Add Trello with the Create Card action, select the Board and List, and map form fields to the card name and description.
4. Test the step, confirm the card appears in Trello, and turn the Zap on.

To avoid duplicate cards, add a search step such as Find Card by Custom Query, listed in Zapier's Trello guide, before Create Card. Zapier lists no CMS-item trigger for Webflow. Use n8n or a direct webhook when the trigger is a collection item.

Build with the Webflow and Trello APIs

The API path suits developers who need custom field mapping, deduplication, or two-way board and Collection sync. You run a small receiver that accepts webhooks from one platform and calls the other platform's REST API. That receiver has to run on a server or serverless function. A Code Embed only runs client-side code, and Trello says tokens must never be public.

• Trello REST API: The Trello cards reference is part of an API that handles cards, lists, boards, Custom Fields, and webhooks under the /1/ path.
• Webflow Data API: It handles CMS collections and form submissions under /v2/.
• Webflow webhooks: Webflow webhooks send real-time events for forms, CMS items, orders, and site publishes.
• Trello OAuth 2.0: Trello added OAuth 2.0 for user-facing apps in September 2026. Its OAuth 2.0 guide says it may not be the ideal fit for server-to-server integrations, so an API key and token remain the simpler choice for a receiver.

Both sides need credentials before anything fires. For Trello, go to Trello's Power-Up admin page and open your Power-Up. Open the Trello Auth tab and choose Generate a new API Key. Then open https://trello.com/1/authorize?expiration=30days&scope=read,write&response_type=token&key={APIKey} and click Allow to get a token, per the authorization guide. The guide accepts 1hour, 1day, 30days, or never for expiration. Trello deletes a webhook when the token it belongs to expires, so a short-lived token quietly ends the sync.

For Webflow, open Site settings > Apps & integrations > API access. Generate a site token with read and write permissions. Only site administrators can create one. Registering webhooks through the API needs a Data Client App (OAuth) bearer token with sites:write. Webhooks registered through the API include x-webflow-signature and x-webflow-timestamp headers. Webhooks added under Site settings > Apps & integrations > Webhooks don't include them, so your receiver can't verify those.

Create Trello cards from form submission webhooks

A form_submission webhook posts each entry to your receiver, which maps the fields and calls POST /1/cards. Creating the webhook through the API requires sites:write, per the webhook create reference. Receiving form data also requires forms:read. Only the form_submission type accepts an optional filter. You can use it to scope the webhook to one form by name.

To implement this:

1. Register the webhook with your Data Client App bearer token:

POST https://api.webflow.com/v2/sites/{site_id}/webhooks
Authorization: Bearer YOUR_TOKEN
Content-Type: application/json

{"triggerType": "form_submission", "url": "{your_receiver_url}"}

2. In the receiver, verify x-webflow-signature. Compute a SHA-256 HMAC of timestamp + ":" + JSON.stringify(request_body) with the webhook's signing secret. Reject requests whose x-webflow-timestamp is more than 5 minutes old. Site-token webhooks created after April 14, 2025 each have their own secret.
3. Return HTTP 200. Non-200 responses, redirects, and timeouts trigger up to three retries at 10-minute intervals. After repeated failures, Webflow deactivates the webhook and sends an email notification.
4. Read payload.data for the field values. payload.schema holds fieldName and fieldType, per the form submission event reference.
5. Call POST /1/cards with idList (required), name, and desc. Pass key= and token= as query parameters. The response includes id, idBoard, and shortUrl.

Store the returned card id against the payload's id. That mapping lets you update or deduplicate later. For Custom Fields, follow up with PUT /1/cards/{idCard}/customField/{idCustomField}/item. Its value object holds text, checked, date, or number.

Update Webflow CMS items when Trello cards change

Trello's own webhooks send a POST to your callbackURL whenever a watched model changes. With an API key and token, register one with POST /1/tokens/{APIToken}/webhooks/, passing key, callbackURL, and the board's idModel, per the webhooks guide. OAuth 2.0 apps use POST /1/webhooks with a bearer token instead. Trello first sends a HEAD request to the URL and refuses to create the webhook unless it returns 200. Each delivery carries action, model, and webhook objects, and action.type names the change.

To implement this:

1. Make the receiver answer HEAD requests with 200. Then call POST /1/tokens/{APIToken}/webhooks/ with key, callbackURL, idModel, and an optional description.
2. Verify the X-Trello-Webhook header with the documented Node.js check: crypto.createHmac("sha1", secret).update(JSON.stringify(request.body) + callbackURL).digest("base64"). The secret is your application secret from the Trello Auth tab, or your OAuth 2.0 client secret for OAuth 2.0 webhooks.
3. Branch on action.type and inspect action.data. The documented updateCard example for a due-date change includes action.data.card, action.data.old.due, and action.date. Trello's actions reference filters list changes as updateCard:idList, but the documented payload example covers a due-date change, so capture one live card-move delivery before you write the parser.
4. Look up the CMS item_id you stored for the card. The Trello docs do not describe where to keep this mapping, so your receiver owns it.
5. Update the item. For an immediate change, call PATCH /v2/collections/{collection_id}/items/{item_id}/live. A staged change uses PATCH /v2/collections/{collection_id}/items/{item_id}. Follow it with POST /v2/collections/{collection_id}/items/publish and itemIds.

Trello retries failed deliveries three times, at 30, 60, and 120 seconds. It deletes a webhook if your endpoint returns HTTP 410 or the token is revoked or expires. Reading a webhook back with GET /1/webhooks/{id} needs the token it was created under, or Trello returns a "webhook does not belong to token" error, per the webhooks reference.

Call the Webflow API from Trello Automation

Trello's Automation rules can issue HTTP requests with GET, POST, or PUT. Webflow's item update endpoints use PATCH, which falls outside that list, so a rule cannot update a CMS item directly. Variables such as {cardname} can fill the URL or the payload.

Creating an item is a different case. Trello's doc says the with headers option also lets you add a payload, so a rule can POST to /v2/collections/{collection_id}/items with an Authorization header and a JSON body containing fieldData.name and fieldData.slug. The tradeoff is that your Webflow token then lives inside a Trello rule rather than in a backend you control.

For updates, or to keep the token out of Trello, point the HTTP action at a receiver you control. The receiver can authenticate to Webflow and make the POST or PATCH request. {httpresponse} holds the receiver's response for a follow-up Trello comment.

What you can build with the Trello Webflow integration

Integrating Trello with Webflow turns site events into tracked work. Board progress can flow back to the site without copying data between tabs.

• Lead intake pipeline: A Webflow "Contact us" form submission creates a Trello card in an Incoming list, with the message in the description. The board comes from Trello's CRM Pipeline template. Sales moves the card from Incoming to Done while the submission stays in the Webflow Forms panel for records.
• Client project dashboards: SimplicitiDesigns, a subscription design agency on Webflow, used Memberstack for member signups, then Zapier and custom code to create a Trello board for each new member. Each member sees that board embedded on their dashboard.
• Editorial calendar that feeds the CMS: Writers plan posts on a board. A Trello card reaching the Ready list creates a Webflow CMS item through the Zapier Card Moved to List template listed above. The post renders in a Collection List on the blog page once an editor publishes it.
• Order fulfillment board: Each new Webflow Ecommerce order becomes a Trello card with the order details through Zapier's New Order trigger and Create Card action. Ops moves cards from Received to Packed to Shipped.

To send the same form data to several tools at once, build an automation hub.

For assistant-led work across both tools, connect Webflow's MCP server alongside Trello MCP. For unattended two-way sync, such as card moves that update live CMS items, use the API path.