Mailjet

A Webflow form stores submissions and sends notification emails, but those notifications go out from Webflow rather than from a sending domain you authenticated yourself, and they do nothing to grow a mailing list. Webflow offers no built-in way to run a welcome series or send an order receipt from an address you own. That data sits in form submissions until you export it or connect it to an email platform.

Mailjet closes that gap. Form submissions flow into Mailjet contact lists, and order events can trigger transactional sends from a domain you control. Engagement data can come back into your site afterwards. Pick a method based on how much of the flow you want to own.

Marketers and founders reach for it first for newsletter signups. Agencies run email across several Webflow client sites, and developers wire transactional email into Webflow Ecommerce. Mailjet's subaccounts keep each client's contacts and sending separate, though how many you get depends on your plan. One account covers both the newsletter and the order receipt, so you are not paying two vendors for one job.

How to integrate Mailjet with Webflow

What is Mailjet? Mailjet is an email delivery platform from Sinch that covers marketing campaigns and transactional email in one account. Its Send API and SMTP relay carry password resets and order receipts, and its built-in Form Builder generates embeddable signup forms with double opt-in. Sinch owns the company, but the product is still sold and documented as Mailjet.

Teams pair the two platforms when a Webflow site becomes the front end of an email program. A landing page collects signups that Mailjet turns into list growth. Store events trigger confirmations or nurture sequences. An agency onboarding a client site can point that site's forms at a fresh Mailjet list on day one, and a store owner can swap the default order notification for a receipt sent from their own domain.

The Mailjet and Webflow integration supports four approaches:

• The Mailjet and Webflow MCP servers let one AI client read email performance and act on the site those emails point at, in the same session.
• The Mailjet subscription form embed captures signups on your Webflow pages with copy and paste HTML and no server code.
• Automation platforms such as Zapier, Make, n8n, and viaSocket connect Webflow form and order events to Mailjet lists and sends.
• The Webflow and Mailjet APIs cover contact sync, transactional email, event tracking, and per-form routing directly, at the cost of server-side development.

Most implementations combine two or more of these, depending on how much of the flow you need to control.

Query Mailjet and Webflow from one AI client

Mailjet publishes an open-source MCP server, so an AI client can answer questions about campaign performance without anyone opening a dashboard. Point that same client at Webflow's MCP server and a single session can read Mailjet statistics and then change the page a campaign linked to. Webflow's side covers design and build, content management, analytics, and automation, scoped to one workspace per authorization.

The Mailjet MCP server runs through npx and authenticates with your API key and secret key joined by a colon in one environment variable, the same credential pair the REST API uses. Mailjet ships it read-only by default, which is the right call: reporting questions are where the value is, and a read-only server cannot delete a contact list because a prompt was ambiguous. A developer can extend it for write access when there is a reason to.

This is a reporting and editing loop, not a data pipeline. Contact sync and transactional sends still belong to the methods below.

Embed a Mailjet subscription form

Mailjet's Subscription Form Builder generates a signup form you paste straight into a Code Embed element. The form posts to Mailjet's hosted endpoint, so nothing runs on your side, and it works on the free Mailjet account. On the Webflow side, Code Embed needs a paid Workspace or an active Site plan.

To set up the integration:

1. In Mailjet, go to Contacts, then Form Builder, then Create new form. Work through each section, from title and form design to opt-in method and contact list.
2. From the forms management page, open View Form Code and copy the generated HTML.
3. In Webflow, open the Add panel, drop a Code Embed element where you want the form, paste the HTML, and publish.

What this buys you over a native Webflow form is double opt-in, so a contact confirms by email before joining the list, plus the consent record that confirmation creates. New signups land in whichever list you picked in step one. The tradeoff is maintenance: every later change to the form in Mailjet means re-pasting the updated HTML into Webflow, which is why this path suits a stable newsletter box better than a form you iterate on weekly.

Connect with Zapier, Make, or other automation tools

Automation platforms leave native Webflow forms intact, so submissions still store in Webflow while a copy goes to Mailjet. Zapier is the best documented route, and its directory pairs the two apps with ready-made templates for the form-submission triggers. You will need your Mailjet API Key and Secret Key to authenticate the Mailjet side, and Zapier needs at least one existing submission on a form before it can connect the trigger.

Four combinations are worth building first:

• Form submission to list subscribe: Every Webflow form submission subscribes the contact to a Mailjet list, which is the standard newsletter capture flow.
• Form submission to templated send: A submission fires a Mailjet template, so the visitor gets a branded reply instead of a generic confirmation screen.
• New order to HTML email: A Webflow Ecommerce order triggers a Mailjet send, which is how you replace the default order notification with your own receipt.
• New unsubscribe to CMS update: A Mailjet unsubscribe updates the matching Collection item, keeping the site's records in step with your list.

Templates cover the form-submission triggers; the order and unsubscribe flows you assemble yourself from the available triggers and actions. Renaming a Webflow site or form can produce 400 or 404 errors, and reselecting the site and form in the trigger clears them, per Zapier's Webflow troubleshooting guide.

The other platforms cover similar ground. Make exposes 56 modules across the two apps, including Webflow Watch Events alongside Mailjet Create a Contact, Send a Message, and Make an API Call, though it ships no template for this specific combination. n8n pairs a Webflow trigger node with a Mailjet node for sending emails and templates, and viaSocket ships pre-built flows for both the form submission and new order triggers.

Build with the Webflow and Mailjet APIs

The API path gives you full control over contact sync, per-form routing, transactional sends, and engagement tracking, and it is the only path that gets you all four. Mailjet's API does not send CORS headers, so browsers block direct calls from page code. Run the integration on your own backend or on Webflow Cloud, which runs on Cloudflare Workers. Mailjet authenticates with HTTPS Basic Auth, using your API Key as the username and your Secret Key as the password, while the Webflow Data API expects a bearer token instead. Mailjet's REST resources sit under https://api.mailjet.com/v3/, with the newer transactional endpoint under v3.1. Use Webflow's v2 endpoints.

Four APIs carry most of the work:

• Mailjet Send API: The Send API v3.1 sends transactional mail, with template rendering and per-message error detail.
• Mailjet contact management: The contact management endpoints create contacts, manage lists, and set subscription status one contact or many at a time.
• Webflow Data API: It reads and writes CMS collections and retrieves stored form submissions.
• Webflow webhooks: Registered webhooks push site events to your server as they happen, so nothing has to poll.

If you would rather not call the Send API at all, Mailjet's SMTP relay configuration takes the same key pair as SMTP username and password against host in-v3.mailjet.com, on port 25, 80, 465, 587, 588, or 2525. Two implementation patterns cover most builds.

Subscribe Webflow form submissions to a Mailjet list

A form-submission webhook pushes each signup to your server, which subscribes the contact in Mailjet while the native form handler still records the submission. The webhook fires the moment a visitor submits, and a form-name filter sends one form's signups to one list.

To implement this:

1. Register a webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks and set triggerType to form_submission. Add a filter with the form name to scope it to one form; that filter is supported only for this trigger type.
2. Verify each incoming request using the x-webflow-timestamp and x-webflow-signature headers with HMAC SHA256 validation, and reject stale timestamps.
3. From your server, call POST https://api.mailjet.com/v3/REST/contactslist/{list_ID}/managecontact with the submitted Email and Action set to addnoforce. Return 200 OK to Webflow, since any other status triggers retries.

The request body is minimal.

{
  "Email": "contact@example.com",
  "Action": "addnoforce"
}

The addnoforce action leaves an existing unsubscribe alone, while addforce re-subscribes the contact. The subscriptions endpoint creates the contact if it does not already exist. It sends no confirmation email, so double opt-in needs its own server-side token flow.

Send transactional email from Webflow events and track the results

Order and CMS events can trigger templated Mailjet sends, and Mailjet's event callbacks can write the engagement result back into your site.

To implement this:

1. Register a webhook for ecomm_new_order or collection_item_created from the supported trigger types.
2. Call POST https://api.mailjet.com/v3.1/send with a TemplateID, TemplateLanguage set to true, and a Variables object for {{var:VAR_NAME}} placeholders. Set SandboxMode to true to validate payloads without sending.
3. Set CustomID to the destination CMS item ID when you are processing a CMS event. For orders, use the order identifier and keep a mapping to the CMS item. Then register POST /v3/REST/eventcallbackurl to receive open, click, bounce, and unsub event callbacks, each of which echoes your CustomID.

That echoed ID lets you update the matching record directly when it is a CMS item ID, or resolve the item through your stored mapping before calling PATCH https://api.webflow.com/v2/collections/{collection_id}/items/{item_id}. From there you can flag hard bounces using the bounce event's hard_bounce property, or log a last-opened date.

What you can build with the Mailjet Webflow integration

Integrating Mailjet with Webflow lets you run list growth and campaigns from the site itself, with transactional email on the same account, no contact exports, and no replacing your existing forms.

Four builds cover most of what teams ship:

• Newsletter signup pages: Embed a Mailjet subscription form on a Webflow landing page so a media site or SaaS blog collects addresses with double opt-in and a stored consent record.
• Lead nurture from form submissions: Route a Webflow contact form through Zapier into a Mailjet list, then start a welcome sequence in Mailjet's automation builder, which needs Mailjet's Premium plan or above.
• Branded order emails for Webflow Ecommerce: Catch the ecomm_new_order webhook and send a templated confirmation, so a store sends receipts from its own authenticated domain.
• Engagement tracking in the CMS: Feed Mailjet's open, click, bounce, and unsubscribe events back into Webflow CMS items, so a membership site can retire invalid addresses without anyone reading a report.

Webflow's own notification emails still have a job alongside all this, and it is worth learning how to customize those notification emails so the internal alert reads as deliberately as the mail Mailjet sends. When you are ready to work on both sides from one prompt, connect the MCP server and point your AI client at Mailjet's alongside it.