# How to Create Responsive Email Templates in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Creating responsive email templates in Bubble requires using inline CSS since most email clients strip external stylesheets. This tutorial covers building HTML email templates with table-based responsive layouts, inserting dynamic Bubble data into templates, storing and managing templates as records in your database, and testing emails across different clients like Gmail, Outlook, and Apple Mail.

## Overview: Responsive Email Templates in Bubble

This tutorial teaches you how to create professional, responsive email templates that you can send from your Bubble app. You will learn email-specific HTML techniques and how to manage templates within Bubble.

## Before you start

- A Bubble app with email sending capability (SendGrid, Mailgun, or Bubble's built-in)
- Basic understanding of HTML (helpful but not required)
- Familiarity with Bubble Workflows and dynamic data
- A few email accounts for testing (Gmail, Outlook)

## Step-by-step guide

### 1. Create an EmailTemplate Data Type for template management

Go to the Data tab and create a Data Type called 'EmailTemplate' with fields: 'name' (text — template identifier like 'welcome_email'), 'subject' (text), 'html_body' (text — the full HTML content), and 'is_active' (yes/no). This lets you manage multiple templates and update them without changing workflows. Create records for common templates: welcome email, password reset, order confirmation, and newsletter.

**Expected result:** An EmailTemplate Data Type stores your email templates as database records.

### 2. Build a responsive HTML email template

Email HTML must use tables for layout since email clients do not support modern CSS like flexbox or grid. Create your template with a wrapper table at max-width 600px centered. Use inline CSS on every element since style tags may be stripped. For responsive behavior, add a media query in a style tag that sets table widths to 100 percent at max-width 480px — Gmail supports this. Use td elements for columns and set widths as percentages. Keep the design simple: a header with your logo, a body section with text, and a footer with unsubscribe and contact links.

> Pro tip: Use a tool like MJML or Maizzle to generate email-compatible HTML visually, then paste the output into your Bubble template.

**Expected result:** A table-based HTML email template renders correctly across major email clients.

### 3. Insert dynamic data into templates

In your EmailTemplate html_body field, use placeholder tokens like {{user_name}}, {{order_total}}, and {{action_url}}. When sending the email in your Bubble workflow, use the Find and Replace operator on the template text to replace each token with dynamic Bubble data. For example: EmailTemplate's html_body :find & replace ({{user_name}} → Current User's name) :find & replace ({{order_total}} → Order's total:formatted as currency). Chain multiple find and replace operations to fill all tokens.

**Expected result:** Email templates contain personalized data for each recipient when sent.

### 4. Set up the email sending workflow

In the workflow where you want to send the email, first retrieve the template: Do a Search for EmailTemplate where name = 'welcome_email' and is_active = yes, first item. Then apply all dynamic replacements using find and replace as described above. Finally, use the Send Email action (or your email service plugin) with the subject from the template and the processed HTML body. If using SendGrid or another service via API Connector, set the Content-Type header to text/html.

**Expected result:** Emails send with the correct template, personalized content, and proper HTML rendering.

### 5. Test across email clients

Send test emails to accounts on different providers: Gmail (web and mobile), Outlook (desktop and web), Apple Mail, and Yahoo Mail. Check that the layout renders correctly, images display, links work, and the responsive design stacks properly on mobile. Use a service like Litmus or Email on Acid for automated testing across 50+ clients. Common issues to check: images blocked by default, dark mode color inversions, and fonts falling back to system defaults. Fix issues by adding background colors inline and using web-safe fonts.

**Expected result:** Your email template displays correctly across all major email clients and mobile devices.

## Complete code example

File: `Workflow summary`

```text
EMAIL TEMPLATE SYSTEM SUMMARY
=====================================

DATA MODEL:
  EmailTemplate:
    name (text): template identifier
    subject (text): email subject line
    html_body (text): full HTML content
    is_active (yes/no)

TEMPLATE STRUCTURE (HTML):
  Wrapper table: max-width 600px, centered
  All CSS inline on elements
  Header: logo image, brand colors
  Body: content with placeholders
  Footer: unsubscribe link, contact info
  Media query for mobile: width 100%

DYNAMIC DATA TOKENS:
  {{user_name}} → Current User's name
  {{order_total}} → formatted currency
  {{action_url}} → link to app page
  {{company_name}} → app setting

SEND WORKFLOW:
  1. Search EmailTemplate (name = X, active)
  2. html_body :find&replace tokens with data
  3. Send Email / API Connector
     Subject: template's subject
     Body: processed HTML
     Content-Type: text/html

TESTING CHECKLIST:
  Gmail web + mobile
  Outlook desktop + web
  Apple Mail
  Yahoo Mail
  Dark mode rendering
  Images blocked view
  Mobile responsive stacking
```

## Common mistakes

- **Using external CSS stylesheets or style tags for email styling** — Most email clients strip style tags and all external CSS, leaving your email unstyled Fix: Use inline CSS on every HTML element in your email template
- **Using div-based layouts instead of tables** — Email clients have inconsistent div rendering, causing broken layouts especially in Outlook Fix: Use HTML tables for all email layout structure with td elements for columns
- **Not testing in Outlook which renders email using Microsoft Word's engine** — Outlook's rendering engine does not support many CSS properties, breaking layouts that work in other clients Fix: Always test in Outlook specifically and add Outlook-specific conditional comments for critical layout elements

## Best practices

- Use tables for layout and inline CSS for all styling
- Keep email width at 600px or less for optimal display
- Use web-safe fonts with proper fallbacks
- Include alt text on all images since many clients block images by default
- Always include a plain text version alongside HTML
- Add an unsubscribe link in every marketing email
- Store templates in the database for easy updates without code changes

## Frequently asked questions

### Can Bubble send HTML emails natively?

Yes. Bubble's built-in Send Email action supports HTML in the body field. For more control, use SendGrid or Mailgun via the API Connector.

### Why do my emails look different in Outlook?

Outlook uses Microsoft Word's rendering engine, which has limited CSS support. Use table-based layouts and avoid CSS properties like flexbox, grid, background images, and rounded corners.

### How do I add images to email templates?

Host images on a public URL and reference them with img tags. Bubble-hosted images use CDN URLs that work in emails. Always add alt text for when images are blocked.

### Can I create an email template editor in my app?

Yes. Add a rich text editor on an admin page that saves to the EmailTemplate's html_body field. This lets non-technical team members update templates.

### How do I handle unsubscribes?

Add an 'email_subscribed' yes/no field to your User Data Type. Include an unsubscribe link in every email that triggers a backend workflow to set this field to no.

### Can RapidDev help with email template design?

Yes. RapidDev can design and implement professional responsive email template systems for your Bubble app including template management, dynamic content, and multi-client testing.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/craft-responsive-email-templates-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/craft-responsive-email-templates-bubble