SendGrid

How to integrate SendGrid with Webflow

SendGrid handles transactional emails, marketing campaigns, and subscriber management through REST APIs. Webflow form submissions need email delivery, e-commerce orders need receipts, and marketing campaigns need subscriber data synced from your site.

Connect the platforms through embedded signup forms for simple email capture, automation platforms like Zapier for common workflows, or custom API implementations for transactional emails and data synchronization. This guide covers embedded forms, Zapier and Make workflows, and API integration patterns.

Embed SendGrid signup forms

SendGrid's Marketing Campaigns tool generates embeddable signup forms that capture emails and add contacts to your lists automatically. Create the form in SendGrid's visual builder, customize styling and fields, then paste the iframe code into Webflow's Code Embed element.

This method works for newsletter signups, content upgrade downloads, and waitlist collection. The SendGrid signup forms interface handles form creation and submission processing.

The forms capture subscriber data with these features:

• Add visitors to specific contact lists based on the form they submit
• Include built-in reCAPTCHA validation without additional setup
• Handle GDPR consent checkboxes and CAN-SPAM requirements automatically
• Trigger SendGrid automation sequences based on list membership

Add a Code Embed element to your Webflow page. Paste the iframe code from SendGrid's Share Code modal. Publish your site so submissions sync to SendGrid immediately.

Connect through automation platforms

Zapier and Make provide pre-built connections between Webflow and SendGrid without custom code. Build workflows visually by selecting triggers like Webflow form submissions and actions like sending SendGrid emails. These platforms handle authentication, API calls, and error retry logic.

Use automation tools when you need reliable form-to-email workflows but don't want to maintain backend infrastructure. Common patterns include sending welcome emails to new form submitters, notifying your team about order submissions, and adding contacts to segmented lists based on form responses.

Zapier connects Webflow form submissions and e-commerce orders to SendGrid actions:

• Send emails for new form submissions through Zapier's Webflow-SendGrid integration
• Add contacts to marketing lists by mapping form fields to SendGrid contact properties
• Notify teams about orders by routing Webflow e-commerce data to internal email addresses
• Create multi-step sequences that combine Webflow triggers with delays, filters, and multiple SendGrid actions

Make workflows support conditional logic and data transformation:

• Handle form data conditionally through Make's visual builder with branching logic based on form field values
• Transform data before sending to format Webflow submission data for SendGrid's expected structure
• Sync across multiple tools by connecting Webflow and SendGrid alongside CRM, spreadsheet, and project management apps

Both platforms require accounts with each service. Connect your Webflow site through API authorization, then authenticate SendGrid with an API key. Build workflows by mapping Webflow form fields to SendGrid email content or contact properties.

Build with Webflow and SendGrid APIs

SendGrid's REST APIs give you programmatic control over email delivery and contact management. Combine these with Webflow's APIs and webhook system to build custom integration logic. Host middleware code on serverless platforms like Cloudflare Workers, Vercel, or AWS Lambda.

This approach works when you need transactional emails with dynamic content, complex subscriber workflows, or when you need to fetch and format order data for custom receipts. Build contact forms that send formatted emails, or sync email engagement data with external databases for analytics.

Send transactional emails from form submissions

Webflow form submissions trigger webhooks to your endpoint. Your code receives the submission data, formats an email payload, and calls SendGrid's Mail API. This pattern works for contact forms, quote requests, and booking confirmations where each submission needs a custom email.

Set up a webhook endpoint that receives POST requests from Webflow. Extract form fields from the webhook payload. Build an email using SendGrid's Mail Send API with submission data. Return a 200 status to confirm receipt.

Example webhook handler structure:

// Verify field names match your Webflow form configuration
// and check current API documentation before implementation
async function handleWebflowSubmission(request) {
  const submission = await request.json();

  // Build email payload according to SendGrid Mail Send API spec
  const email = {
    personalizations: [{
      to: [{ email: submission.data['email-field-name'] }],
      dynamic_template_data: {
        // Map your specific form field names here
        name: submission.data['name-field'],
        message: submission.data['message-field']
      }
    }],
    from: { email: "hello@yourdomain.com" },
    template_id: "your-template-id"
  };

  try {
    await fetch('https://api.sendgrid.com/v3/mail/send', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${SENDGRID_API_KEY}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(email)
    });

    return new Response('OK', { status: 200 });
  } catch (error) {
    console.error('SendGrid API error:', error);
    return new Response('Error', { status: 500 });
  }
}

Implementation requirements:

• Configure Webflow form webhooks to send submissions to your endpoint
• Authenticate requests using SendGrid API keys with Mail Send permissions
• Use dynamic templates for consistent branding and content structure
• Implement error handling for failed API calls and webhook verification

Send e-commerce order confirmations

Webflow e-commerce triggers webhooks when orders are placed or fulfilled. Your endpoint receives the webhook, fetches complete order details from the Webflow API, then formats and sends a receipt email through SendGrid.

This requires fetching order data separately because Webflow's order webhooks don't include full line item details. Set up your webhook to receive order notifications, call the Webflow Orders API to get complete order data, then format a SendGrid email with product details, pricing, and shipping information.

Implementation steps:

• Configure webhooks for order events through Webflow's e-commerce webhooks
• Fetch complete order data using the order ID from the webhook payload
• Format order details into your SendGrid email template
• Handle order status changes and send appropriate emails for fulfillment updates

Manage contacts through custom sync logic

Track SendGrid contact data separately from Webflow CMS and sync updates through scheduled API calls. Webflow doesn't provide webhooks for CMS item changes, so poll the CMS API periodically to detect new or updated items, then sync contact data to SendGrid.

This requires running a scheduled job that queries your Webflow Collection lists, compares data with SendGrid contacts, and updates both platforms. Set up the sync interval based on how frequently your contact data changes.

Sync patterns:

• Add new subscribers by posting to /v3/marketing/contacts when CMS items are created
• Update contact properties by syncing custom fields like name, company, or preferences from CMS to SendGrid
• Manage list membership by assigning contacts to SendGrid lists based on collection or field values
• Handle unsubscribes by removing contacts from lists or adding to suppression groups when CMS status changes

Authenticate API requests with your Webflow access token and SendGrid API key. Implement rate limiting to respect API quotas on both platforms.

Note that Webflow CMS field slugs remain fixed after creation even when field names change. Plan your field structure carefully before building sync logic.

What you can build

Integrating SendGrid with Webflow lets you build email delivery systems that respond to form submissions and maintain subscriber data across platforms.

• Form-triggered email sequences: Send welcome emails to form submitters and add them to marketing lists based on form responses
• E-commerce order receipts: Build product stores where purchases trigger order confirmation emails with line item details fetched from Webflow's API
• Newsletter signup forms: Capture subscriber emails through embedded SendGrid forms that automatically add contacts to segmented lists
• Contact form notifications: Route form submissions to your team while sending confirmation emails to visitors through SendGrid templates