Sendgrid

SendGrid turns Webflow form submissions into authenticated, branded emails through a dedicated delivery engine, with SPF and DKIM authentication, dynamic templates populated with form or order data, and tracking for opens, clicks, and bounces. It picks up where the fixed no-reply sender and native form notifications run out of room.

The connection runs through an automation platform, an embedded SendGrid signup form, or a direct API implementation. That covers marketing teams wiring up newsletter signups, e-commerce operators sending order confirmations with line item details, and developers building custom transactional flows behind server-side proxies.

How to integrate SendGrid with Webflow

What is SendGrid? SendGrid is a cloud-based SMTP provider and email delivery engine for high-volume transactional and marketing email. It manages infrastructure scaling, ISP outreach, reputation monitoring, and real-time analytics. Its two core products are the Email API, which sends and manages email at scale through RESTful APIs or SMTP relay, and Marketing Campaigns, which handles drip automation, signup forms, and list segmentation.

Reach for SendGrid when native form notifications aren't enough. A newsletter signup needs to land contacts in a segmented list. Orders and password resets need authenticated delivery with branded details that reach the inbox. SendGrid handles the email; your site handles the front end and the form data.

No official SendGrid app exists on the Webflow Marketplace. The SendGrid-Webflow integration supports these approaches:

• Automation tools like Zapier and Make connect form submissions to SendGrid email and contact actions without code.
• Embedded signup forms let you paste a SendGrid-generated iframe into your site using a Code Embed element.
• The Webflow Data API and SendGrid API give you full control over transactional email, templates populated with form or order data, and event tracking, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Connect with Zapier, Make, n8n, or IFTTT

Automation platforms are the fastest no-code path when you need to send actual emails or sync contacts. Each connects a form submission trigger to a SendGrid action, and the platform handles authentication internally so your SendGrid API key never touches the browser. Zapier hosts a dedicated Webflow and SendGrid integration page with pre-built templates, and Make offers a template for adding or updating SendGrid contacts from Webflow submissions. Take this path if you can't write code and have straightforward confirmation or list-sync needs.

To set up a Zapier automation, choose a Webflow trigger like New Form Submission, connect your SendGrid account and select an action like Send Email or Create or Update Contact, then map form fields to the SendGrid action and turn the Zap on.

Here are the Webflow triggers and SendGrid actions available across these platforms:

• Zapier Webflow New Form Submission → SendGrid Send Email (supports To, CC, BCC, Subject, Template, Categories, Send At, and tracking)
• Zapier Webflow New Order or Updated Order → SendGrid Create or Update Contact
• Make Webflow New Form Submission → SendGrid Add or Update a Contact with list assignment
• n8n Webflow Form Trigger → SendGrid Send Email node in n8n for automated confirmation emails
• IFTTT Webflow Form submitted → SendGrid Send an email
• viaSocket Webflow New Form Submission → SendGrid Add a Single Recipient to a List

Zapier, Make, n8n, and IFTTT all support real email sends. viaSocket lists only a single "Add a Single Recipient to a List" action with no Send Email option, so Zapier or Make are the stronger choices for most workflows.

Embed a SendGrid signup form with a Code Embed element

SendGrid Marketing Campaigns generates embeddable signup forms you can drop straight into a page. This method captures emails and syncs contacts to your SendGrid lists automatically with zero code. Use it for list-growth workflows. The Code Embed element ships with the free Starter plan, so you don't need a paid tier to test it.

Embed a signup form by creating a form in SendGrid's Marketing Campaigns visual builder, copying the generated <iframe> HTML from the Direct Embed sharing option, and pasting it into a Code Embed element on your page before you publish.

SendGrid also offers a Landing Page option, a direct link to a SendGrid-hosted form you can paste anywhere. The Code Embed element supports up to 50,000 characters, which is more than enough for an iframe snippet. You need a paid Site plan to add Custom code in head and body tags, but the on-page Code Embed element works on any plan.

Build with the Webflow and SendGrid APIs

For transactional and event-tracked email, the API path gives you full control over templates populated with form or order data. This route needs server-side development because SendGrid API keys must never appear in client-side code. The standard pattern uses a serverless function, such as a Cloudflare Worker or AWS Lambda, as a secure proxy. Webhooks route form or order data to the function, which calls the SendGrid API with the key held server-side.

The available APIs cover each side of the flow:

• SendGrid Mail Send API handles sending email via POST /v3/mail/send
• SendGrid Add or Update Contacts handles list management via PUT /v3/marketing/contacts
• Webflow Data API handles form submissions and Webflow CMS collections
• Webflow webhooks trigger real-time events like form_submission and ecomm_new_order

Authenticate SendGrid calls with Authorization: Bearer <API_KEY> and validate incoming webhooks using the x-webflow-timestamp and x-webflow-signature headers.

Send transactional email from a form submission

This is the most common API pattern. A form submission fires a webhook, your serverless function receives the payload, and SendGrid delivers the email. Use it when a form submission needs an authenticated welcome or confirmation email. The same flow can send internal team notifications.

Implement it by registering a webhook with POST /v2/sites/{site_id}/webhooks and triggerType: "form_submission". In your function, validate the request signature, then extract the email and form fields from the payload. Call POST /v3/mail/send with personalizations, a verified from.email, subject, and content. SendGrid returns HTTP 202 Accepted on success.

Verify your sending domain with SPF and DKIM before going to production, or SendGrid may drop your emails.

Send dynamic templates for order confirmations

For e-commerce, SendGrid Dynamic Templates let you send branded emails with order-specific data. The ecomm_new_order webhook payload doesn't include full order details, so fetch them separately before sending.

Build order confirmations by registering an ecomm_new_order webhook via POST /v2/sites/{site_id}/webhooks, calling GET /v2/sites/{site_id}/orders/{order_id} to retrieve complete order data, and calling POST /v3/mail/send with template_id (Dynamic Template IDs begin with d-) and personalizations[].dynamic_template_data populated with line items.

If you build on Webflow Cloud, note that the @sendgrid/mail and nodemailer packages rely on node:http and node:https, which aren't available in the Workers runtime. Call the SendGrid REST API with plain fetch instead, as documented in the Webflow Cloud guide.

Track email events back to Webflow CMS

SendGrid's Event Webhook posts delivery and engagement events like delivered, open, click, and bounce to your endpoint. To correlate those events with specific CMS records, pass an identifier at send time.

Close the tracking loop by registering your callback with POST /v3/user/webhooks/event/settings and specifying the event types you want. Include a custom_args object with a CMS item ID in your POST /v3/mail/send call, avoiding reserved keys like email and event. When SendGrid posts events, read the echoed custom_args, then update the matching record with PATCH /v2/collections/{collection_id}/items/{item_id}.

CMS changes don't fire webhooks, so any reverse sync from CMS to SendGrid requires polling.

What you can build with the SendGrid Webflow integration

Integrating SendGrid lets you send authenticated, branded email from your site without relying on the fixed no-reply sender.

• Form-triggered welcome emails: Wire a newsletter or contact form to SendGrid so every submitter gets an immediate branded welcome message. A Zapier Zap can send the email and add the contact to a segmented list in one flow.
• Newsletter signup with list sync: Embed a SendGrid Marketing Campaigns iframe in a Code Embed element on your page. New subscribers land in your SendGrid contact list automatically, no code required.
• E-commerce order confirmations: Fire an ecomm_new_order webhook to a Cloudflare Worker, fetch the order via the Data API, and send a Dynamic Template email with line item details and totals.
• Email engagement dashboard: Capture SendGrid open, click, and bounce events via the Event Webhook, then write them into a CMS Collection so your team sees delivery health inside the site.

If you need more control over custom conditional logic or high-volume sends, the API integration path covers those cases with full flexibility.