SMTP

How to integrate SMTP.com with Webflow

Webflow's native form notification system sends messages exclusively from Webflow's own domain and does not support custom sender addresses, delivery tracking, or automated email sequences. SMTP.com integration lets you send branded transactional emails with custom sender addresses, multi-step workflows, and delivery analytics that Webflow's system doesn't provide.

You can use middleware automation platforms like Zapier to connect form submissions to email delivery through visual workflow builders without writing code. Or build custom integrations using Webflow webhooks and SMTP.com's REST API for advanced workflows with conditional logic and CRM synchronization.

Use Zapier for no-code integration

Zapier connects Webflow form submissions to email delivery through the SMTP by Zapier module. This module acts as an email relay that receives form data from Webflow and sends emails through SMTP.com's servers using standard SMTP protocol configuration.

The integration requires configuring two components. First, set up Webflow as your trigger source to capture form submissions. Second, configure the SMTP by Zapier action module with SMTP.com server credentials to handle email delivery.

Zapier provides template-based workflows with guided field mapping rather than one-click setup. You'll configure which form fields populate email recipients, subject lines, and message content using Zapier's dynamic variable system.

Configuration requirements for SMTP by Zapier module

Set these parameters in the SMTP action step:

• SMTP hostname (smtp.smtp.com)
• Port (587 with STARTTLS encryption)
• Username and password from your SMTP.com account
• TLS security protocol
• Sender address (must be verified in SMTP.com)
• Recipient email addresses (map from Webflow form fields)
• Subject line templates
• Email body content with dynamic field insertion

Webflow trigger types available in Zapier

Zapier offers five trigger options. Four provide instant webhook-based triggering, while one uses polling:

• New Form Submission (instant webhook trigger)
• New Order (instant webhook trigger, requires Webflow Ecommerce plan)
• Updated Order (instant webhook trigger, requires Webflow Ecommerce plan)
• New Comment (instant webhook trigger)
• New Resolved Comment Thread (polling every 15 minutes on Free plan)

Order-related triggers only work with Webflow Ecommerce plans. Sites without ecommerce functionality should use the Form Submission trigger instead.

Alternative automation platforms

viaSocket, Pabbly Connect, and Make.com provide similar workflow automation capabilities with different pricing structures and feature sets. These platforms work well for users with specific requirements around task limits, execution timing, or API rate limits.

Middleware platform limitations

Automation platforms introduce service dependencies and may require paid plans for production usage. Multi-step email sequences with time delays typically require premium tier subscriptions. Zapier's free tier includes task limits that may not support high-volume implementations.

Build with Webflow and SMTP.com APIs

Custom API integration provides control over email content, delivery timing, and conditional logic based on form data. Configure Webflow webhooks to POST form submission data to your middleware endpoint, then call SMTP.com's messages API to send emails. This pattern supports complex workflows like multi-step sequences, CRM integration, and dynamic content generation.

Configure Webflow webhooks for form submissions

Webflow's webhook system sends HTTP POST requests containing form data to your specified HTTPS endpoint. Create webhooks through the API at POST <https://api.webflow.com/v2/webhooks> or via site settings. Each webhook delivery includes an x-webflow-signature header for payload verification, letting you validate authenticity and prevent unauthorized requests.

Webhook setup steps

1. Create an HTTPS endpoint on your server to receive webhook POSTs
2. Register the webhook via POST /v2/sites/:site_id/webhooks
3. Subscribe to the form_submission event type
4. Verify webhook authenticity using the x-webflow-signature header

Webflow allows only one site-wide webhook URL for form submissions. Multiple endpoints require building routing logic into your middleware to distribute events based on form ID or field values.

The form submission webhook event delivers JSON payloads containing all form field data, submission timestamp, form ID, and site ID. Extract relevant fields, format email content, then POST to SMTP.com's API.

Send emails via SMTP.com REST API

SMTP.com's messages endpoint accepts JSON payloads for email delivery. Send email with POST <https://api.smtp.com/v4/messages>.

Required parameters

• from (sender email address, must be verified in SMTP.com account)
• to (array of recipient email addresses)
• subject (email subject line)
• text or html (email body content)

Optional parameters

• cc and bcc (carbon copy and blind carbon copy recipient arrays)
• reply_to (reply-to address)
• attachments (file attachments)
• custom_args (metadata object for tracking)

The custom_args object lets you pass form submission IDs or tracking data through the delivery pipeline. This parameter helps associate emails with specific Webflow submissions when processing SMTP.com webhook events.

Authentication methods

The API supports three authentication approaches:

• Bearer token using Authorization: Bearer {apikey} header
• Query string parameter with API key in URL
• URL path authentication with API key in endpoint URL

All requests require the Accept: application/json header.

Security requirement

Only call SMTP.com APIs from backend services. Never implement SMTP email sending in client-side JavaScript, as this exposes credentials in browser-accessible code and creates security vulnerabilities. See SMTP.com's API documentation for secure implementation guidance.

Implement delivery tracking with webhooks

SMTP.com provides real-time delivery tracking through webhook events delivered via HTTP POST requests. The platform supports nine webhook event types across two categories.

Delivery events

• Processed (email accepted for delivery)
• Dropped (email rejected before sending)
• Delivered (successfully delivered to recipient server)
• Deferred (temporary failure with automatic retry)
• Bounce (permanent delivery failure)

Engagement events

• Open (recipient opened the email)
• Click (recipient clicked a tracked link)
• Unsubscribe (recipient opted out)
• Spam Report (recipient marked as spam)

According to SMTP.com's Event Webhook Reference, each webhook payload includes standardized core fields (event_id, message_id, status, recipient, subject, timestamp) with event-specific fields providing additional context such as failure reasons, user agent information, IP addresses, and clicked URLs.

Implementing webhook handlers

Configure webhook endpoints in your SMTP.com account to receive POST requests for each event type. Parse JSON payloads to extract delivery status and engagement data. Update your database or Webflow CMS collections with email performance metrics using the Webflow CMS API.

This creates a feedback loop where form submissions trigger emails through SMTP.com, delivery and engagement events are captured via webhooks, and that data synchronizes back to your Webflow CMS for reporting and customer communication tracking.

Handle authentication requirements

Production integrations require OAuth 2.0 authentication with the forms:read scope minimum for accessing form submission data. Generate and manage API tokens through Webflow's account settings. The authentication documentation describes token generation, scope requirements, and refresh patterns.

Implement token refresh logic to handle expiration. Include rate limit handling with exponential backoff when you receive HTTP 429 responses. Webflow's Data API enforces 60 requests per minute for Starter/Basic plans and 120 requests per minute for CMS/Business plans.

Alternative approach using REST API polling

For scenarios where webhooks aren't suitable, implement polling using the GET /v2/forms/:form_id/submissions endpoint. Track the last processed submission timestamp and periodically check for new entries using the GET /v2/forms/:form_id/submissions endpoint.

This approach introduces latency compared to webhooks and consumes API rate limit quota with each poll request. Webhooks provide immediate event notification without polling overhead.

What you can build

Integrating SMTP.com with Webflow lets you send branded transactional emails with custom sender addresses, delivery tracking, and automated workflows.

• Ecommerce order confirmation system: Build automated order confirmation emails that fire when checkout completes, including order number, purchased items with pricing, shipping address, and payment method. Use Webflow's Order webhook with middleware platforms like Zapier to connect to SMTP.com's API, sending branded receipts that match your site design. Note that Order webhooks require a Webflow Ecommerce plan.
• Multi-step onboarding sequence for SaaS signups: Create time-delayed email sequences triggered by Webflow form submissions where new users receive a welcome email immediately, a getting-started guide after 24 hours, feature education on day 3, and upgrade prompts on day 7. Store submission timestamps in Webflow CMS collections and use automation platforms like Zapier or Make to trigger subsequent SMTP.com API calls based on elapsed time. Multi-step sequences typically require paid automation platform tiers.
• Password reset and account security notifications: Send secure password reset links with time-limited tokens when users submit the forgot password form, plus security notifications when account changes occur. The authentication flow generates secure tokens and calls SMTP.com's email delivery API via POST <https://api.smtp.com/v4/messages> to send branded security emails.
• Abandoned cart recovery sequence with dynamic content: Capture cart abandonment events through middleware automation platforms like Zapier or Make and trigger emails through SMTP.com. Send the first reminder after 1 hour, a second with a discount code after 24 hours, and a final notice at 72 hours. Configure the middleware to integrate Webflow's webhook system with SMTP.com for this workflow. Cart tracking requires additional setup beyond basic form submissions.