Mailjet

How to integrate Mailjet with Webflow

Mailjet offers three distinct integration paths depending on your technical requirements and workflow complexity. No official Webflow Marketplace app exists, so you'll choose between embedded forms, automation platforms, or direct API implementation.

Embedded forms work best for simple newsletter signups. Automation platforms like Zapier, Make, and n8n handle most production workflows without code. API integration provides complete control for custom transactional emails, bidirectional CMS synchronization, or complex segmentation logic that automation platforms can't support.

Each method handles different authentication requirements and technical constraints. According to Mailjet's Rate Limits documentation, Mailjet intentionally does not publish specific numeric rate limits and lacks CORS headers (Access-Control-Allow-Origin), making direct browser-to-API calls impossible. Plan your architecture accordingly.

Use Mailjet's subscription form builder

Mailjet's Subscription Form Builder generates ready-to-embed HTML code for email capture forms. You design forms visually in Mailjet's interface, then paste the generated code into Webflow's Custom Code Embed element (available in the Designer).

This method requires minimal technical knowledge using Mailjet's Form Builder combined with Webflow's Code Embed feature. According to Mailjet's Subscription Form Builder documentation, the tool includes built-in GDPR consent checkboxes and generates ready-to-embed HTML/iFrame code without coding. After embedding the form in Webflow, you can configure your Mailjet account to automatically add form submissions to specified contact lists and trigger welcome emails through Mailjet's automation settings, which are managed separately in your Mailjet interface.

Capabilities:

• Drag-and-drop form design with full visual customization of layout, text, images, buttons, and styling
• Two embed formats: inline embedded forms or pop-up overlays with automatically generated HTML/iFrame embed code
• Automatic list management that adds subscribers directly to specified Mailjet contact lists
• GDPR compliance tools including customizable consent checkbox options
• Welcome email automation configured through the Form Builder interface for immediate post-subscription responses

Choose embedded forms for newsletter signups, blog subscriptions, or footer email capture. This method works entirely through visual interfaces without touching code or managing API credentials.

Connect through automation platforms

Automation platforms enable Webflow form submissions to connect with Mailjet's contact management and email tools. Zapier, Make, and n8n all support this workflow through visual automation builders, allowing Webflow form submissions to trigger Mailjet contact creation, list subscriptions, and automated email sequences without custom code.

These automation platforms manage API authentication, rate limiting, and error recovery automatically, while you configure which Mailjet actions trigger from specific Webflow form submissions through visual workflow builders.

Capabilities for Webflow-to-Mailjet workflows:

• Pre-built automation templates connecting Webflow form submissions directly to Mailjet contact lists and campaigns
• Visual field mapping that routes Webflow form fields (name, email, custom fields) to corresponding Mailjet contact properties
• Conditional routing that adds Webflow form submitters to different Mailjet lists based on form field values (like industry or interests)
• Multi-step workflows that combine Webflow form submissions with Mailjet email sends, list additions, and campaign triggers in sequence
• Error handling with automatic retries for failed Webflow-to-Mailjet connections

Zapier's free plan includes 100 tasks monthly, with one Webflow form submission counting as one task; higher volumes require paid plans. According to Make's integration documentation, the platform supports more complex Webflow-to-Mailjet workflows with conditional branching and multi-step automation. n8n offers self-hosted deployment options for teams requiring data sovereignty or preferring open-source solutions.

For production sites needing reliable, maintainable Webflow-Mailjet workflows without ongoing developer involvement, automation platforms like Zapier, Make, or n8n provide fully-documented low-code integration paths. According to Zapier's Webflow-Mailjet workflows, teams can visually map Webflow form submissions to Mailjet contact lists and automated campaigns without coding. Most teams find this approach balances capability with implementation complexity—though success requires understanding platform rate limits, authentication requirements, and GDPR compliance obligations for customer data handling.

Build with Webflow and Mailjet APIs

Direct API integration provides complete control over data flow, email content, and subscriber management through Mailjet's RESTful Send API and SMTP relay service. This approach requires backend infrastructure (such as serverless functions or backend proxies to handle CORS restrictions) but enables custom transactional email workflows, real-time CMS synchronization via webhooks, advanced segmentation using contact properties, and dynamic templating with variables and conditionals.

Webflow's webhook system triggers your code when forms are submitted or CMS items change. Webhooks send POST requests with JSON payloads containing form field values, timestamps, and metadata. According to the research, Webflow supports a maximum of 75 webhooks per trigger type per site. Your backend receives these webhooks and calls Mailjet's APIs to create contacts, send emails, or update campaigns. However, due to CORS restrictions, direct browser-to-Mailjet API calls are not possible—you must route all requests through a backend proxy or serverless function (AWS Lambda, Cloudflare Workers, or Netlify Functions) that handles Mailjet authentication. Mailjet's webhook events notify your system of seven event types: sent (delivery confirmation), open (email opened), click (link clicked), bounce (delivery failure with hard/soft bounce distinction), blocked (pre-send block), spam (marked as spam), and unsub (unsubscribed). Each event returns a JSON payload with the event type, Unix timestamp, recipient email, campaign/contact IDs, custom identifiers, and event-specific fields like bounce error codes or clicked URLs.

Critical constraint: Mailjet's API lacks CORS headers. You cannot make direct API calls from client-side Webflow code. You must implement a backend proxy using serverless functions (AWS Lambda, Cloudflare Workers) or a traditional server. This architecture prevents exposing API credentials in browser-visible JavaScript.

Sync form submissions to contact lists

The Contact Management API creates and updates contacts. Use Webflow's form submission webhooks to trigger contact creation immediately when visitors submit forms.

Webflow sends form data as JSON to your webhook endpoint. Your backend extracts email addresses and custom field values, then calls Mailjet's POST /v3/REST/contact endpoint to create or update contacts. Add contacts to lists with POST /v3/REST/listrecipient. Both endpoints use Basic Authentication with your Mailjet API key and secret key.

Implementation steps:

1. Create webhook signature verification using HMAC SHA-256 to prevent spoofing
2. Extract form field values from webhook JSON payload
3. Call Mailjet's Contact API with Basic Authentication using your API Key (username) and Secret Key (password) encoded as Basic {base64(api_key:secret_key)}
4. Handle rate limit responses (HTTP 429) with exponential backoff retry logic, waiting 2^attempt seconds between retries
5. Store Mailjet contact IDs in your database or Webflow CMS for future reference

This pattern works for lead capture forms, event registration, content downloads, subscriber list management, or any workflow requiring immediate contact addition to email lists.

Send transactional emails for e-commerce orders

The Send API v3.1 delivers order confirmations, shipping notifications, and account emails via transactional email infrastructure. To send emails through Mailjet with dynamic order details from Webflow, you must implement a backend proxy or serverless function to handle API requests, as Mailjet's API blocks direct browser-to-API calls due to CORS restrictions. Configure Webflow webhooks to send order data to your backend service, which then uses Mailjet's Send API v3.1 to deliver templated emails with dynamic order details.

Mailjet templates support variables using {{var:VARIABLE_NAME}} syntax for dynamic content personalization. Pass order data as variables in your API request through the Send API v3.1. The platform merges data into templates automatically and sends to customers within seconds.

Capabilities:

• Template-based emails with dynamic content insertion using {{var:VAR_NAME}} syntax
• Bulk sending for multiple recipients in single API requests
• Attachment support up to 15MB total message size
• Custom headers including Reply-To configuration
• Cc/Bcc recipients for order notifications sent to multiple addresses

Mailjet is built to serve businesses of all sizes, from small operations to high-volume senders. The platform handles key email management functions through its infrastructure, including bounce processing tracked via webhook events, unsubscribe management through dedicated webhook notifications, and list management tools. According to Mailjet's documentation, the platform supports automation workflows, segmentation, and real-time event tracking that enables teams to manage subscriber engagement and list hygiene at scale.

Build bidirectional CMS synchronization

Connect Webflow's CMS API to Mailjet for content marketing workflows. Use a backend proxy or serverless function to fetch blog posts or product data from Webflow collections, then create targeted campaigns in Mailjet based on that content.

Mailjet's webhook events track email engagement in real time. When subscribers open emails or click links, webhooks notify your backend with events like open, click, bounce, spam, and unsub. Update Webflow CMS items to reflect engagement data, enabling content personalization based on email behavior and maintaining compliance with unsubscribe requests.

Bidirectional patterns:

• CMS to campaign: Fetch published blog posts with GET /collections/{collection_id}/items/live, generate email content, send campaigns through Mailjet using POST /v3.1/send with proper authentication and error handling
• Engagement to CMS: Receive Mailjet webhook events for opens, clicks, bounces, and other engagement signals, update CMS contact records with engagement scores via PATCH requests
• Product updates: Monitor Webflow CMS collections for changes via webhooks, trigger Mailjet transactional emails for abandoned cart or back-in-stock scenarios automatically

This architecture requires careful webhook handling. Mailjet retries failed webhook deliveries, though the official retry policy, frequency, and backoff strategy are not documented. Implement idempotent processing to handle duplicate events safely.

What you can build

Integrating Mailjet with Webflow enables automated email workflows through subscription forms, contact list management, and dynamic campaigns synced with your site's forms and CMS data—accessible through embedded forms, automation platforms, or custom APIs depending on technical requirements.

Automated welcome series: New subscribers from Webflow forms immediately enter multi-email onboarding sequences with personalized content based on signup source or preferences indicated in form fields, leveraging Mailjet's automation and personalization features.

E-commerce transaction emails: Order confirmations, shipping updates, and delivery notifications send automatically when customers complete purchases. These emails include dynamic order details, tracking numbers, and can feature personalized product recommendations, leveraging Mailjet's templating engine with variables and conditional logic.

Content-driven campaigns: New blog posts or portfolio items in Webflow CMS automatically trigger targeted email campaigns to subscriber segments interested in specific topics or categories using automation platforms like Zapier or Make.

Event registration workflows: Registration forms collect attendee information, add contacts to Mailjet lists with event-specific tags, send confirmation emails with calendar attachments, trigger automated reminder sequences before event dates, and maintain synchronized contact data between platforms.